Material Design Buttons in Android with Example - GeeksforGeeks

02 Sep, 2020
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:
Contained ButtonOutlined ButtonText ButtonToggle Button
Contained Button
Outlined Button
Text Button
Toggle Button
Below is a demo for all types of Buttons that we are going to create in this project.
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.
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.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.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.One more thing great about the Google Material Design Components is that they support for cross-platform that includes Android, IOS, Flutter, Web applications.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:
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.
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.
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.
One more thing great about the Google Material Design Components is that they support for cross-platform that includes Android, IOS, Flutter, Web applications.
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 behavior under dark theme.
Google MDC button behavior under dark theme. 
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. 
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.
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:
Because all the Google material design components are built and packaged inside the MaterialTheme for Android.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.
Because all the Google material design components are built and packaged inside the MaterialTheme for Android.
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
<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>
If you are unable to get the things in the step mentioned above you may refer to this image.
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
<?xml version="1.0" encoding="utf-8"?><resources>    <color name="colorPrimary">#0f9d58</color>    <color name="colorPrimaryDark">#006d2d</color>    <color name="colorAccent">#55cf86</color></resources>
 If you are unable to get the things in the step mentioned above you may refer to this image. 
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
<?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>
Output UI:
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
<?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>
Output UI:
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
<?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>
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
<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>
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
<?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">      <!--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>
Output UI:
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.
After clicking on Vector Asset select the icon you want to import to the drawable folder as shown below.
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
<?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">      <!--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>
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.
android
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Android RecyclerView in Kotlin
Content Providers in Android with Example
Navigation Drawer in Android
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to View and Locate SQLite Database in Android Studio?
How to Post Data to API using Retrofit in Android?
Android Listview in Java with Example