173 reads

How to Customize Buttons in Android

by Akshay RanaMay 22nd, 2020

Too Long; Didn't Read

We will see how we can make a rounded corner button with background color. We will also learn how to make a gradient to the button in android. We can make this button rounded corner and add gradient color, something like this below. If you want to learn more from this article, you can refer to this article on customize buttons in android. You can also learn more about how to create a custom button in an app on the android mobile. You will see your custom button preview in the preview window of your app.

featured image - 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>