About Material Button, you can say this is the improved type of Button component. Material button has different build-in styles same like EditTextField, BottomAppBar, BottomNavigationView in Android Material design library. In this tutorial, we shall explore Button in different types using the Material design library.

So let’s start the tutorial, first, we shall include Android Material design library.

implementation 'com.google.android.material:material:1.1.0-alpha08'

Now we shall convert our Appcompat style to Material style.

   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Material Button is totally different from AppCompatButton and simple Button. For example, AppCompatButton has a 4dp inset on both left and right side but Material Button does not. So if you want to see the difference, you can create XML of both buttons and can see in the preview window. If you want to add inset in Material Button, then you can add the following attributes

  • android:insetRight
  • android:insetLeft

Material Button has four build-in styles which are

  1. TextButton
  2. Outlined Button
  3. UnElevatedButton
  4. Extended Floating Button with icon

I have added all four styles in following XML file, have a look

<?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">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:layout_marginEnd="8dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Material button"
            android:textSize="16sp" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.TextButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text Button"
            android:textSize="16sp" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Outlined Button"
            android:textSize="16sp" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="UnElevated Button"
            android:textSize="16sp" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_search"
            android:text="Button with Icon"
            android:textSize="16sp" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Thanks for reading the tutorial. Please like our Facebook page for a new and latest tutorial. Join our WhatsApp group for asking any questions about this tutorial. Please subscribe to our Youtube channel for the latest updates and tutorials.

1 Comment

Write A Comment