In this article we will show you the solution of material button android, Material Design Components (MDC) gives designers and developers a simple way to execute Material Design in their Android application.

It is developed by a core team of engineers and UX designers at Google inc, these components provide a reliable development workflow to create and build beautiful and functional Android apps.

Step By Step Guide On Material Button Android :-

If you want the way how the UI elements from Google Material Design Components for android which are designed by Google are pretty awesome, then here are some basic steps that need to be followed to get those design components, and one of them is Google Material Design Components (MDC) Buttons.

A Button is basically a UI that is used to perform some action when it is clicked or tapped.

Under the category, there are mainly 4 types of buttons in Google MDC:

1. Contained button
2. Outlined button
3. Text button
4. Toggle button

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=".MainActivity"
    tools:ignore="ExtraText">
    <!-- Since this is the default type, you don't need to
         specify a style tag as long as you are using a
         Material Components Theme -->
    <Button
        android:id="+id/contained_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Contained Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
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=".MainActivity"
    tools:ignore="ExtraText">
    <!--style attribute below is to be invoked for outlined button-->
    <Button
        android:id="@+id/outlined_button"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlined Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
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=".MainActivity"
    tools:ignore="ExtraText">
    <!--style attribute below is to be invoked for text button-->
    <Button
        android:id="@+id/text_button"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<?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"
    tools:ignore="ExtraText">
    <!--style attribute below is to be invoked for outlined button-->
    <Button
        android:id="@+id/outlined_button"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlined Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
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=".MainActivity"
    tools:ignore="ExtraText">
    <!--style attribute below is to be invoked for text button-->
    <Button
        android:id="@+id/text_button"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<?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"
    tools:ignore="ExtraText">
    <!--style attribute below is to be invoked for text button-->
    <Button
        android:id="@+id/text_button"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

1. First step, creating a new project Kindly refer to How to Create a New Project in Android Studio.
2. Second step Adding Dependency. This Include google material design components dependency in the build.gradle file.
3. Thirdly, changing base app theme. Then Go to app -> src -> main -> res -> values -> styles.xml and kindly change the base application theme. The Materia lComponents actually contains various action bar theme styles, the MaterialComponents action bar theme styles, except AppCompat styles.
4. Changing the color of the application. You can change the color combination of the application and it’s an optional step. Kindly Go to app -> src -> main -> res -> colors.xml file and then you may choose your color combination.
5. Next step,Add Google MDC buttons to activity_main.xml file.Now in this particular file, we are going to design the material button as per the user requirements. Note that for each of the Button styles the “style” attribute is always different. A) Button Style 1: Contained Button. Contained buttons are high-emphasis, generally distinguished by their use of elevation and fill. They contain some actions that are primary to the app. B) Button 2: Outlined Button.Outlined buttons are basically medium-emphasis buttons. They have actions that are important but they aren’t the primary action in an app. These are generally used for more emphasis than text buttons due to stroke. Below you cas see is the XML code for the Outlined button. C). Button 3: Text Button.Text buttons are mainly used for less-pronounced actions, located in dialogs and cards. In cards, text buttons help maintain an emphasis on actual card content. These are typically used for much less important actions. Below you can see is the XML code for the Text button.
6. Run the code.

Conclusion :-

This is how we have implemented the material buttons in android. We have implemented three material buttons, in the next tutorial we will execute Toggle button.

I hope this article on material button android helps you and the steps and method mentioned above are easy to follow and implement.