Material Design Buttons in Android with Example

Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android application. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. If you like 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 steps that need to be followed to get them, and one of them is Google Material Design Components (MDC) Buttons. A Button is a user interface that is used to perform some action when clicked or tapped. Under the Button category, there are mainly 4 types of buttons in Google material design components:

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

Below is a demo for all types of Buttons that we are going to create in this project.

MDC Button

Why MDC Buttons in Android?

Before going to implement all types of Button let’s understand why choosing these material components over ordinary inbuilt components in android? Please refer to the following points to understand this.

  1. Choosing these material components saves time and these make the app look more like materially designed, and makes the way for user interactions hassle-free for developers.
  2. If we take the buttons as an example we need to create a ripple as root element in custom_button.xml inside the drawable and then we need to set the background of the button as custom_button.xml, then only it will create the ripple effect for the ordinary button. But in Google MDCs there is no need of creating the manual ripple layout for the buttons.
  3. And the main thing about the Google Material Design Components is that these are open source and free. If you wish to contribute to the Google MDCs Click Here.
  4. One more thing great about the Google Material Design Components is that they support for cross-platform that includes Android, IOS, Flutter, Web applications.
  5. If the user wants to switch their system theme to Dark Theme, then the Google MDCs will automatically adapt and change their color and background to match the Dark Theme. But in the case of ordinary widgets, they won’t get adapt to the system theme change. The differences between the normal button and the Google MDC button when the dark theme is enabled is shown below:

Normal Contained Button

Normal Contained Button behavior under dark theme.

MDC button

Google MDC button behavior under dark theme. 



Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio

Step 2: Add Required Dependency

Include google material design components dependency in the build.gradle file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner.  

implementation ‘com.google.android.material:material:1.3.0-alpha02’

Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.

add gradle file

Step 3: Change the Base application theme

Go to app -> src -> main -> res -> values -> styles.xml and change the base application theme. The MaterialComponents contains various action bar theme styles, one may invoke any of the MaterialComponents action bar theme styles, except AppCompat styles.

Why the theme needs to be changed:

Let’s discuss why we need to change the action bar theme to the material theme of the app to invoke all the Google MDC widgets in our android application:



  1. Because all the Google material design components are built and packaged inside the MaterialTheme for Android.
  2. If you are invoking the AppCompat action bar theme you will not end up with the error, but the application crashes immediately after launching it. Below is the code for the styles.xml file.

styles.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<resources>
  
    <!-- 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>
  
</resources>

chevron_right


If you are unable to get the things in the step mentioned above you may refer to this image.

styles.xml

Step 4: Change the colors of the application

One can change the color combination of the application and it’s an optional step. Go to app -> src -> main -> res -> colors.xml file and choose your color combination. 

colors.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0f9d58</color>
    <color name="colorPrimaryDark">#006d2d</color>
    <color name="colorAccent">#55cf86</color>
</resources>

chevron_right


 If you are unable to get the things in the step mentioned above you may refer to this image. 

colors.xml

Step 5: Adding Google MDC buttons to the activity_main.xml file

Now in this file, we are going to design the material button as the user requirements. Note that for each of the Button styles the “style” attribute is different.

A. Button Style 1: Contained Button



Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to the app. Note that the contained button is the default style if the style is not set. Below is the XML code for the contained button.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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>

chevron_right


Output UI:

contained button

B. Button Style 2: Outlined Button

Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren’t the primary action in an app. These are used for more emphasis than text buttons due to the stroke. Below is the XML code for the Outlined button.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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>

chevron_right


Output UI:

outlined button

C. Button Style 3: Text Button



Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.  These are typically used for less important actions. Below is the XML code for the Text button.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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>

chevron_right


Output UI:

D. Button Style 4: Toggle Button

Toggle buttons group a set of actions using layout and spacing. They’re used less often than other button types. There are 2 types of Toggle Buttons in Google Material Design Components. 

  • Toggle Button
  • Toggle Button with icons

Before going to the design part do some pre-task to implement these two buttons. As now the styles and the attributes like padding and margin of the buttons in the toggle group needs to be changed so in the values folder open styles.xml and invoke the following code:

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<resources>
  
    <!-- 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>
  
    <!--these attributes and styles are only effected for 
        the MaterialButtonToggleGroup widget-->
    <style name="Widget.App.Button.OutlinedButton.IconOnly" 
           parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="iconPadding">0dp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:paddingLeft">12dp</item>
        <item name="android:paddingRight">12dp</item>
        <item name="android:minWidth">48dp</item>
        <item name="android:minHeight">48dp</item>
    </style>
  
</resources>

chevron_right


Toggle Button:

To emphasize groups of related toggle buttons, a group should share a common container. Below is the XML code for the Toggle button. 



XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">
  
    <!--attribution of google MDC toggle button is little 
        different from normal toggle button
        Instead of invoking ToggleButton you should invoke 
        com.google.android.material.button.MaterialButtonToggleGroup
        as you can see below-->
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
  
        <Button
            android:id="@+id/button1"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1" />
  
        <Button
            android:id="@+id/button2"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2" />
  
        <Button
            android:id="@+id/button3"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3" />
  
    </com.google.android.material.button.MaterialButtonToggleGroup>
  
</androidx.constraintlayout.widget.ConstraintLayout>

chevron_right


Output UI:

Toogle Button

Toggle Button with icons:

To implement the toggle button with icons only import the icons in the drawable folder. In this example, we have imported format_black, format_italic, format_underline icons. To import the icons right-click on the drawable folder, goto new, and select Vector Asset as shown below.

vector asset

After clicking on Vector Asset select the icon you want to import to the drawable folder as shown below.

select icon

After importing the desired icons invoke the code in the activity_main.xml file. Below is the XML code for the Toggle button with icons.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">
  
    <!--this implementation does not creates individual 
        toggle button it groups them together-->
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
  
        <Button
            android:id="@+id/bold_button"
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_format_bold_black_24dp" />
  
        <Button
            android:id="@+id/italic_button"
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_format_underlined_black_24dp" />
  
        <Button
            android:id="@+id/underline_button"
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_format_italic_black_24dp" />
  
    </com.google.android.material.button.MaterialButtonToggleGroup>
  
</androidx.constraintlayout.widget.ConstraintLayout>

chevron_right


Output UI:

For more information and more components like alert dialogue, SnackBars, etc., you may refer to the official documentation here. For more other resources and for more themes and customization you may visit and refer this.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.