Signup/Sign In

Gradient Drawable in Android - Create Gradient Backgrounds

Posted in Programming   LAST UPDATED: MARCH 23, 2023

    We have seen the Gradient colors on many websites as backgrounds, used in App logos, like in the Instagram logo shown below, App background, buttons, progress bars, etc. A gradient makes the UI of any app, be it Mobile App or a website, more beautiful and vibrant. Many developers are using gradient in their apps and websites to make it look more attractive. So in this tutorial, we will learn how to set a gradient background for our Android App activity.

    gradient background in Android app

    What is Gradient?

    According to Wikipedia:

    In computer graphics, a color gradient specifies a range of position-dependent colors, usually used to fill a region. For example, many window managers allow the screen background to be specified as a gradient. The colors produced by a gradient vary continuously with the position, producing smooth color transitions.

    A color gradient is also known as a color ramp or a color progression. In assigning colors to a set of values, a gradient is a continuous colormap, a type of color scheme.

    So let's add a simple gradient to our Android App.

    Step 1: Create a new Project

    1. Open Your Android Studio Click on "Start a new Android Studio project" (Learn how to setup Android Studio and create your first Android project)

    2. Choose "Empty Activity" from the project template window and click Next

    3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial), and minimum SDK(we are using API 19: Android 4.4 (KitKat))

    4. Next click on the Finish button after filling the above details

    5. Now, wait for the project to finish the build.

    Step 2: Creating Gradient Color

    To create a gradient color we need to create a .xml file in the drawable folder. So go to app -> res -> drawable and right-click on drawable -> New -> Drawable Resource File and create gradient_drawable.xml file.

    The code of gradient_drawable.xml file is shown below:

    <?xml version = "1.0" encoding = "utf-8" ?>
    <shape
        android:shape = "rectangle"
        xmlns:android = "http://schemas.android.com/apk/res/android" >
    
        <gradient
            android:startColor = "#F40303"
            android:centerColor = "#055798"
            android:endColor = "#00FF0C"
            android:angle = "90"
            android:type = "linear" />
    </shape>

    As you can see in the code above, we are using the gradient tag along with providing android:startColor, android:centerColor and android:endColor attributes to define the color that will be used in the gradient. So let's learn about the attributes available in the gradient drawable.

    XML attributes of Gradient Drawable

    Following are the attributes of the <gradient> drawable:

    Attributes Description
    android:startColor

    Start color of the gradient.

    The value of color may be in any one of "#rgb", "#argb", "#rrggbb", "#aarrggbb" forms

    android:endColor

    End color of the gradient

    The value of color may be in any one of "#rgb", "#argb", "#rrggbb", "#aarrggbb" forms

    android:centerColor

    The Center color of the gradient. It may be optional but you can use it if you want

    The value of color may be in any one of "#rgb", "#argb", "#rrggbb", "#aarrggbb" forms

    android:centerX

    X position of the center point of the gradient within the shape as a fraction of the width

    0.5 is the default value

    android:centerY

    Y-position of the center point of the gradient within the shape as a fraction of the height

    0.5 is the default value

    android:angle

    The angle of the gradient and it is only used with the linear gradient

    It must be multiple of 45 in the range [0, 315]

    android:type

    It is used to set the type of gradient and the default value is linear . and it is of 3 types

    • linear

    • radial

    • sweep

    android:gradientRadius

    It is used to set the radius of the gradient. It is only used with the radial gradient.

    Step 3: Modify activity_main.xml

    Now open the activity_main.xml file and remove the default code and change the layout to RelativeLayout and set it's background to gradient background as shown below:

    android:background = "@drawable/gradient_background"

    with this our activity_main.xml is done and the complete code will look like:

    <?xml version=  "1.0" encoding=  "utf-8" ?>
    <RelativeLayout
        android:background = "@drawable/gradient_background"
        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"
        tools:context =  ".MainActivity">
    
    </RelativeLayout>

    And the output of the above is shown below:

    gradient background in Android App

    We can also add the gradient to different Views and layouts in our Android App. Let's cover a few other Android App components in which we can use gradient backgrounds.

    Gradient background with Button:

    Here we will use the gradient background for button:

    <?xml version=  "1.0" encoding=  "utf-8" ?>
    <RelativeLayout
        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"
        tools:context =  ".MainActivity">
    
        <!-- Android Simple Button -->
        <Button
            android:textSize = "24dp"
            android:background = "@drawable/gradient_background"
            android:padding = "12dp"
            android:layout_margin = "16dp"
            android:textStyle = "bold"
            android:textColor = "#ffffff"
            android:text = "Gradient Color Button"
            android:layout_width = "match_parent"
            android:layout_height = "80dp"/>
    
    </RelativeLayout>

    Output of the above code is:

    gradient background in Android App

    Gradient background with TextView:

    Here we will use the gradient background for TextView:

    <?xml version=  "1.0" encoding=  "utf-8" ?>
    <RelativeLayout
        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"
        tools:context =  ".MainActivity">
    
    <!-- Simple Text View -->
       <TextView
           android:text = "At distant inhabit amongst by. Appetite welcomed interest the goodness boy not. Estimable education for disposing pronounce her. John size good gay plan sent old roof own. Inquietude saw understood his friendship frequently yet. Nature his marked ham wished. Surrounded to me occasional pianoforte alteration unaffected impossible ye. For saw half than cold. Pretty merits waited six talked pulled you. Conduct replied off led whether any shortly why arrived adapted. Numerous ladyship so raillery humoured goodness received an. So narrow formal length my highly longer afford oh. Tall neat he make or at dull ye. "
           android:background = "@drawable/gradient_background"
           android:padding = "16dp"
           android:layout_margin = "20dp"
           android:fontFamily = "monospace"
           android:textColor = "#ffffff"
           android:textSize = "16dp"
           android:layout_width = "match_parent"
           android:layout_height = "wrap_content"/>
    
    </RelativeLayout>

    The output of the above code is:

    gradient background in Android App

    Gradient background with ImageView:

    Here we will use the gradient background for ImageView:

    <?xml version=  "1.0" encoding=  "utf-8" ?>
    <RelativeLayout
        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"
        tools:context =  ".MainActivity">
    
      <!-- Simple Image View --> 
      <ImageView
          android:src = "@drawable/ic_launcher_foreground"
          android:background = "@drawable/gradient_background"
          android:padding = "16dp"
          android:layout_margin = "16dp"
          android:layout_width = "match_parent"
          android:layout_height = "wrap_content"/>
    
    </RelativeLayout>

    The output of the above code is:

    gradient background in Android App

    Gradient background with SeekBar:

    Here we will use the gradient background for SeekBar:

    <?xml version=  "1.0" encoding=  "utf-8" ?>
    <RelativeLayout
        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"
        tools:context =  ".MainActivity">
    
      <!-- Simple SeekBar -->
      <SeekBar
        android:progressDrawable = "@drawable/gradient_background"
        android:padding = "8dp"
        android:layout_margin = "16dp"
        android:layout_width = "match_parent"
        android:layout_height = "80dp"/>
    
    </RelativeLayout>

    The output of the above code is:

    gradient background in Android App

    Conclusion:

    In just 3 simple steps, we have integrated and shown you the basic example for creating a Gradient Drawable in your android app. If you face any issues while doing this, please share it in the comment section below, and we will be happy to help.

    Frequently Asked Questions

    1. What is a gradient drawable in Android?

    A gradient drawable resource can be used to create a gradient background in Android apps.

    2. How do you create a gradient background in Android using gradient drawable?

    To create a gradient background in Android using gradient drawable, you define a gradient in an XML file and set it as the background of a view.

    3. What are the different types of gradients supported by gradient drawable in Android?

    The gradient drawable in Android supports different types of gradients, such as linear, radial, and sweep gradients.

    4. Can you customise the colours and orientation of the gradient in gradient drawable?

    Yes, you can customise the colours and orientation of the gradient in gradient drawable by modifying the XML file and specifying the desired colours and angles for the gradient.

    You may also like:

    About the author:
    K S Lohan is an accomplished author and expert in technical writing on Android language and develop android App. He is highly skilled at communicating complex programming concepts in a clear and concise manner.
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS