How to Customize Buttons in Android

Hello, Today we are going to see how we can customize the button in android. We will see how we can make a rounded corner button with background color and also see how we can gradient to the button.

See the below gif for both examples.

First, let’s see

How to change button background color in android

Follow these steps to change your button background in android.

To apply or change the background color of a button in android, we need to make a button in our layout and a new drawable file.

We have added our button in layout as below,

<?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"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="Boring Button"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

we will make a drawable file and write the code for the background of the button.

After creating the file. Add this code in the drawable file, here we have named this file as

bg_btn.xml

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

In the above code, first, we specify the shape of the button by setting the root element as shape and pass attribute shape and set its value to rectangle. Ater the shape, we added a child element solid and set attribute color to red.

Now we have created our button background, now we have to apply these settings to the button.

Open your activity layout file in the layout folder and pass a background attribute in a button child and set its value to that drawable file we have made earlier, see below code for reference.

We have added some padding and change the text color to white so that it will look good and attractive button in android

<?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"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/bg_btn"
        android:textColor="@android:color/white"
        android:paddingStart="20sp"
        android:paddingEnd="20sp"
        android:text="Custom Button"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Now you can view your custom button preview in the preview window and if you run your app on the android mobile, you will see your custom button.

We can make this button rounded corner and add gradient color, something like this below.

If you want to learn how to make above buttons, you can refer to this article on customize button in android .

Thanks for reading hope you learned something new. Have a nice day.

Previously published at https://www.akshayrana.in/2020/05/customize-button-in-android.html