Material Design Buttons in Android with Example
Last Updated :
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 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.
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.
- 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.
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.
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:
- 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>
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<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.
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
<?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.
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
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="ExtraText">
<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
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="ExtraText">
<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
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="ExtraText">
<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>
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<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
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="ExtraText">
<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
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="ExtraText">
<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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...