rahulthapar15/InstagramLoginTransition

Gradient Transition similar to Instagram LogIn Screen.

InstagramLoginTransition

Implement Gradient Transition similar to Instagram LogIn Screen.

1. Make layout full screen

Add this to styles.xml in res folder.

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>

Add this theme to the AndroidManifest.xml

android:theme="@style/MyTheme"

In your Main class add the following :

requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

2. Defining the colors for transition

Add the following in drawable folder

color1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#7551a1"
        android:endColor="#516397"
        android:angle="0"/>
</shape>

color2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#7551a1"
        android:endColor="#419c99"
        android:angle="45"/>
</shape>

color3.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#396ce4"
        android:endColor="#7745c6"
        android:angle="90"/>
</shape>

color4.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#7440ef"
        android:endColor="#e167ba"
        android:angle="135"/>
</shape>

3. Defining animation-list

Add the following in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/color1"
        android:duration="8000" />
    <item
        android:drawable="@drawable/color2"
        android:duration="8000" />
    <item
        android:drawable="@drawable/color3"
        android:duration="8000" />
    <item
        android:drawable="@drawable/color4"
        android:duration="8000" />
</animation-list>

4. Using this animation-list in activity_main.xml

android:background="@drawable/animation"

5. Inside Main class (MainActivity.java)

AnimationDrawable animation;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
       animation = (AnimationDrawable) layout.getBackground();

        //Animation Start to End Fade effect
        animation.setEnterFadeDuration(5000);
        animation.setExitFadeDuration(1000);
    }
    
     @Override
    protected void onResume() {
        super.onResume();
        if (animation != null && !animation.isRunning())
            animation.start();
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (animation != null && animation.isRunning())
            animation.stop();
    }