How to set Gradient Background color in Android Studio

In this article I will show you how to create gradient background color in Android Studio. I use Android Studio version 3.2.1. Follow this article step by step:

1. Create new project on your Android Studio and give name as you want. In this example, I named Gradient Background Color.

Set gradient background color in android studio

Set gradient background color in android studio

2. On drawable folder create a new file and give a name : gradient.xml or as you want. The step: Click drawable folder and click File -> New -> File. Then the window Choose Destination Directory appear, click OK and type gradient.xml and click OK.

3. Type this code in gradient.xml file:

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

Note: You can change the rectangle to oval. You can change the angle to 45 or 270

4. Open the color.xml and type the color code for the gradient as you want.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

</resources>

Note: You can creation the color as you want

5. Open your xml file that you want to have the background color, in my project I have save to main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:background="@drawable/gradient"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Note: On the line number 7 (main.xml) type the android:background=”@drawable/gradient” adjust to your code.

If you follow the step by step correctly the result will be like this:

Gradient Background color in Android Studio
Gradient Background color in Android Studio

Leave a Reply

Your email address will not be published. Required fields are marked *