June 22, 2020

Change the gradient color dynamically in android

By Mohit Agrawal

Learn how to change the gradient color dynamically like the old Instagram login UI

gradient instagram background

In this short android tutorial, I will show you how to animate the gradient color in android. If you are an Instagram user then you must remember the old login page UI with a dynamic color gradient background. Today I will guide you to design your own gradient view with dynamic colors.

Related post: Dynamic gradient view in Flutter

Implementation

Let’s start the coding part. Create a new empty Android project and give it some nice name.

STEP 1 – Let’s update the colors.xml first with our required colors.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="purple_500">#9C27B0</color>
    <color name="deep_purple_500">#673AB7</color>
    <color name="indigo_500">#3F51B5</color>
    <color name="blue_500">#2196F3</color>
    <color name="cyan_500">#00BCD4</color>
    <color name="light_blue_500">#03A9F4</color>
</resources>

These are the colors we will use in gradient view.

STEP 2 – Now in the drawable folder, create three files and name them gradient_one.xml, gradient_two.xml and gradient_three.xml.

Code for gradient_one.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/deep_purple_500"
        android:endColor="@color/purple_500"
        android:angle="0"/>
</shape>

Code for gradient_two.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/indigo_500"
        android:endColor="@color/blue_500"
        android:angle="45"/>
</shape>

Code for gradient_three.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/cyan_500"
        android:endColor="@color/light_blue_500"
        android:angle="90"/>
</shape>

STEP 3 – Our is to animate the three gradients which we have created in the above step. Create a <aimation-list/> in the file in the drawable folder only and name animation-list.xml. Here is the code.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/gradient_one"
        android:duration="6000" />
    <item
        android:drawable="@drawable/gradient_two"
        android:duration="6000" />
    <item
        android:drawable="@drawable/gradient_three"
        android:duration="6000" />
</animation-list>

STEP 4 – Till here we were setting up the resource files only. Now in this step I will show you how to use the animation list file to make the drawable animation.

Open the activity_main.xml and copy the below code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/animation_list"
    tools:context=".MainActivity" />

Now open the MainActivity.kt and copy this code.

import android.graphics.drawable.AnimationDrawable
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    lateinit var drawableAnimation: AnimationDrawable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        drawableAnimation = mainView.background as AnimationDrawable

        drawableAnimation.setEnterFadeDuration(5000)
        drawableAnimation.setExitFadeDuration(2000)

        supportActionBar?.hide()
    }

    override fun onStart() {
        super.onStart()
        drawableAnimation.start()
    }
}

You are now good to run your project. If you have done everything properly till here then you should be able to see the change in the gradient color dynamically. Let me know if you are facing any issue in the comment section.

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will happy to see your comments down below 👏.
Thanks for reading!!!

android android beginners tutorial android tutorial API call API call in iOS async asynchronous cardview custom switch custom ui dark web dark web links deep web deep web links Dynamic gradient view facebook messenger firebase hosting firebase hosting tutorial firebase tutorials flutter flutter for beginner flutter setup flutter tutorial flutter ui tutorial hacking hacking tutorial hashcat iOS ios tutorial ios ui tutorial json parsing kotlin listview in flutter Messenger for kids review onion links Roll the Dice app swift tech news tor tor browser tor links UISwitch volley wifi wifi hacking