How to Create Button Gradient Background in Android

This is a simple code snippet on how to create button gradient background in android. You can copy and paste the code in your project. Feel free to customize it to your taste.

We are going to use a shape drawable layout to achieve android button gradient. The gradient type property supports three different gradient and we will look at each of them.

Android Button Linear Gradient Background

btn_gradient.xml

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

    <gradient
        android:centerX="50%"
        android:centerY="50%"
        android:endColor="#308c35"
        android:gradientRadius="100dp"
        android:startColor="#66BB6A"
        android:type="linear" />

    <corners android:radius="22dp" />

</shape>

The gradient drawable file is assigned to the button background property.

activity_button_gradient.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:layout_height="match_parent"
    tools:context=".button.GradientColorButtonActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_gradient"
        android:text="Linear Gradient Button"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

android linear gradient

Android Button Radial Gradient Background

The only change we will make in our code is to change the gradient type from linear to radial as shown below.

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

    <gradient
        android:centerX="50%"
        android:centerY="50%"
        android:endColor="#308c35"
        android:gradientRadius="100dp"
        android:startColor="#66BB6A"
        android:type="radial" />

    <corners android:radius="22dp" />

</shape>

android radial gradient button

Android Button Sweep Gradient Background

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

    <gradient
        android:centerX="50%"
        android:centerY="50%"
        android:endColor="#308c35"
        android:gradientRadius="100dp"
        android:startColor="#66BB6A"
        android:type="sweep" />

    <corners android:radius="22dp" />

</shape>

 

 

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.