How to Set Gradient Color in Android Studio

Hello developers, welcome to my new tutorial in this post I’m going to show you how to set gradient color in android studio, gradient color is he combination of 3 color (Start color, center color, and end color), in android studio we can set color by using below attributes

• angle
• start color
• end color
• type

We have 3 types to “type” for creating gradient color:

1. linear
2. radial
3. sweep

Let start to create gradient color step by step:

How to Set Gradient Color in Android Studio

First start your Android studio and create a project, I’m going to name it set gradient color then you go next and finish.

We already have two color codes here (start color – #f6d365 and end color – #fda085). So we are going to use them in our project, so when your Android studio finished then we are going to change the theme we’re going to use no extra bar.

set NoActionBar – go to – app/src/main/res/theme

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.LiveTemplatePractice" parent="Theme.MaterialComponents.DayNight.NoActionBar">
      
      
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Now is the time to create gradient color. We are going to add a resource file :

go to – app/src/main/res/drawable

We are going to give name it custom_gradient_color and click OK.

In this file we are going to create the one item and in this item, we’re going to create a shape and in this shape tag we are going to create a gradient

• First attribute will be angle which is a 90.
• Second attribute is start color (#f6d365)
• Third attribute will be end color (#fda085)
• and Final attribute will be typed which is linear and just close.

custom_gradient_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <shape>
            <gradient android:angle="90"
                android:startColor="#f6d365"
                android:endColor="#fda085"
                android:type="linear" />
        </shape>

    </item>
</selector>

Now we have created our gradient background file and the next thing we are going to do is implement this gradient color into our activity main layout

activity_main.xml

In your root layout just use a background attribute and add this file. We’re going to change text size in text color just to look better.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/custom_gradient_color"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I'm\nGradient Color"
        android:textSize="32sp"
        android:textAlignment="center"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

After completing above steps, now this time to run and test our application, we’re going to run our application in Android device to see how it looks like.

Now we have as you can see this is a very beautiful background so hurray finally you know how to set gradient color in android studio to build a beautiful app

If you feel this post has helped you, then share it with other developers like you.If you have any questions regarding this post. Feel free to comment. 

Happy Learning :)

You May Also Like ⇣

• Kotlin tutorial for beginners.
• How To Make An Android App For Beginners
• Android Interview Questions For Fresher.
• Top 5 Things To Avoid While Developing Android Apps.
• 5 Best GitHub Repositories For Android Developer.
• 15 Best Useful Sites For Online Learning.
• Firebase Authentication with Coroutines in Kotlin (2023)