How to create Custom button with Material Design 3

Button

A button consists of text or an icon, or both, that communicates what action occurs when the user taps it. It is a very common widget in Android and developers often use it.

The button can be divided into two categories: 

1. the first is Button with text on, and 

2. Second is button with an image on. 

A button with images on can contain both an image and a text. Android buttons with images on are also known as Image Button.

But in this post we will create a Simple Text Button using material Button with background.

Steps

1. Create a New Project.

2. Navigate to the app > res > layout > activity_main.xml 

and add the below code to that file. 

Below is the code for the activity_main.xml file. 

activity_main.xml

        

        <?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=".TextButton">
    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:textSize="25sp"
        android:text="Button"
        android:background="@drawable/custom_button"
        app:layout_constraintTop_toTopOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

3. To add Background in Material Button we use attribute

    
    android:background

So now create a drawable file named as custom_button

Navigate drawable > New > Drawable Resource File

and add the below code to that file. 

      <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
        <corners
        android:bottomLeftRadius="20dp"
        android:topRightRadius="20dp"
        />
        </shape>
    </item>
    </selector>

OUTPUT

Without Background                                With Background

Thanks for reading!😊😊😊😊😊😊

If you enjoyed reading , Show some Love by

 clapping 👏 on this post!

If you have any suggestion share with me.