Bugdroid Bugdroid - 1 month ago 29
Android Question

How to create animated background gradient like Instagram app?

Below are screenshots of instagram app. The background keeps on transforming from one gradient to other very beautifully.
Instagram background gradient

Instagram background gradient

I want to know how can I achieve this. IS THERE ANY CODE TO ANIMATE A GRADIENT AUTOMATICALLY OR DO I NEED TO ADD DIFFERENT GRADIENTS WITH SLIGHT VARIATION, and if I use it won't cause any copyright issues with Instagram? I have tried animating using multiple gradient files with slight variation using Frame Animation but it isn't smooth and doesn't work well. Thanks

Answer

Create a TransitionDrawable to change between two drawables that you use for the background.

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- use whatever drawables you want, gradients, shapes etc-->
    <item android:drawable="@drawable/start" />
    <item android:drawable="@drawable/end" />
</transition>

Transition Drawables in Android

TransitionDrawable trans = (TransitionDrawable) myLayout.getBackground();
trans.startTransition(2000);