Instagram Like Gradient Color Transition in Android

InstagramLikeColorTransition.txt

/******This Gist explains how to create instagram like Gradient color transition in android.******/

1. Create some gradient color drawables inside drawable Folder.
  a) color1.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#c44e4e"
        android:endColor="#dcb9b9"
        android:angle="0"/>
    </shape>
    
  b) color2.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:startColor="#680b0b"
            android:endColor="#c6b147"
            android:angle="45"/>
    </shape>
    
  c) color3.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:startColor="#57caa8"
            android:endColor="#44c74b"
            android:angle="90"/>
    </shape>
    
  d) color4.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:startColor="#7141e2"
            android:endColor="#d46cb3"
            android:angle="135"/>
    </shape>
    
2. Create animation list using the above created gradient colors, animation_list.xml, inside 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="10000" />
        <item
            android:drawable="@drawable/color2"
            android:duration="10000" />
        <item
            android:drawable="@drawable/color3"
            android:duration="10000" />
        <item
            android:drawable="@drawable/color4"
            android:duration="10000" />
    </animation-list>
    
3. Apply the animation_list created above as a background to the top view of your activity layout.
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/animation_list"
        android:id="@+id/container">
        
        <!-- Child Views -->
        
    </LinearLayout>
    
4. Inside your activity use AnimationDrawable to apply the transition.
    LinearLayout container = (LinearLayout) findViewById(R.id.container);
    
    AnimationDrawable anim = (AnimationDrawable) container.getBackground();
    anim.setEnterFadeDuration(6000);
    anim.setExitFadeDuration(2000);
    
5. Starting animation:- start the animation on onResume.
    @Override
    protected void onResume() {
        super.onResume();
        if (anim != null && !anim.isRunning())
            anim.start();
    }
      
6. Stopping animation:- stop the animation on onPause.
    @Override
    protected void onPause() {
        super.onPause();
        if (anim != null && anim.isRunning())
            anim.stop();
    }

/* * That's all you need to apply the gradient color animation transition.
   * Above is just the example using 4 gradients.
   * You can create as many gradients as you need.
   * and can create the animation_list using that gradients.
   * */
  // --------------------------------------------------------------------------------------------------------------
  Link to the sample app repo of above functionality
  https://github.com/deepak786/InstagramLikeColorTransition

Kudos Developer!!! Thank you, it was very useful and easy to follow... :)

@avinashlegendkiller You are most welcome and thanks :)

Thanks!!!!

Heyy,, I followed the above method. But I'm getting an error and it says, "Cannot Resolve symbol anim"

Here is my code,
`package com.ap.inr;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.LinearLayout;

public class gradient extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.gradient);
    LinearLayout container = (LinearLayout) findViewById(R.id.container);

    AnimationDrawable anim = (AnimationDrawable) container.getBackground();
    anim.setEnterFadeDuration(6000);
    anim.setExitFadeDuration(2000);

}

@Override
protected void onResume() {
    super.onResume();
    if (anim != null && !anim.isRunning())
        anim.start();
}

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

}
`

@abhishekds94 you should have declared your anim variable globally.

Awesome! Thanks!

getting error --- anim - Qualifier must be an expression.

my code:

public class MainActivity extends AppCompatActivity {

@OverRide
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

    LinearLayout container = (LinearLayout) findViewById(R.id.container);
    AnimationDrawable anim = (AnimationDrawable) container.getBackground();
    anim.setEnterFadeDuration(6000);
    anim.setExitFadeDuration(2000);

}


@Override
public void onResume() {
    super.onResume();
    if (anim != null && !anim.isRunning())
        anim.start();
}

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

no animation is showing

Is there a way to avoid going to white before going to the next gradient?

Keep the duration for the exit fade to be a lot larger than the the enter fade duration.

same here i have error of anim should we declare animation globally or what

@hama-Omer so you have to declare the variable anim outside of onCreate method.

Private AnimationDrawable anim;

@override
 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    LinearLayout container = (LinearLayout) findViewById(R.id.container);
    anim = (AnimationDrawable) container.getBackground();
    anim.setEnterFadeDuration(6000);
    anim.setExitFadeDuration(2000);
}

Hello all,

i noticed that some users have issues while using this gist so i have decided to create a sample app of the above functionality.
will update you when the sample is ready.

Below is the link to sample app repo
https://github.com/deepak786/InstagramLikeColorTransition

Good repo InstagramLikeColorTransition, keep going!

im using kotlin and i have problem yet !
i checked your new sample , and i declared anim before onCreate , but after that anim dosent have setEnterFadeDuration !!

@aryalireza Please check the sample at https://github.com/deepak786/InstagramLikeColorTransition
I have added the Kotlin module.

Wowsome, thanks bro

Thanks It worked but I tweaked some color values and angle to make it more appealing

@innovativesahil mind showing us?

@deepak786 i did just that, but the app crashes whenever that activity is launched whose background is animation. reallyneed this please help