-
-
Save deepak786/12eee8412fa7914a16774ce546e1a089 to your computer and use it in GitHub Desktop.
/******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 |
@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
Kudos Developer!!! Thank you, it was very useful and easy to follow... :)