Last active
April 27, 2022 14:30
-
-
Save deepak786/12eee8412fa7914a16774ce546e1a089 to your computer and use it in GitHub Desktop.
Instagram Like Gradient Color Transition in Android
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******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 |
@deepak786 i did just that, but the app crashes whenever that activity is launched whose background is animation. reallyneed this please help
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@innovativesahil mind showing us?