This article is the first part of the series, Lost in Android Support Material Design Library. If you didn’t read the previous one you can start from here.



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.

There are so many components in the Android Material design library to cover. But in this post, we’ll only be covering the features of Material Button. From the Material website, the following is the definition of Material Button.

Buttons allow users to take actions, and make choices, with a single tap.

Adding the Material Button to your Android application is very easy.

Add Dependency

Add the latest material design library to your app-level build.gradle file.

implementation 'com.google.android.material:material:1.2.0-alpha06' ..... .....

Note: The library support of Material Component in Android is currently in alpha mode. You can track a new release on the GitHub Repository.

In order to use Android Material Component correctly, you need to choose a base variant for your AppTheme inside the styles.xml file.

<style name="AppTheme" parent="Theme.MaterialComponents.*"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>

Check out the available Material themes from this link.

Quick Start

First, let’s create a simple Material Button by adding the following code in your xml file.

<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Press Me" android:layout_height="wrap_content"/>

At this point, you’ll have the Material Button in your application like below.

provided by ahsensaeed Your theme’s colorPrimary provides the default background for a button. We’ll see how to change the background color of the button at the end of this article.

Types Of Material Button

There are five main button types described in material design.

Raised, Filled, Elevated Button (Default)

The example we’ve seen above is the example of a filled, elevated button. The elevated button is a standard button that signifies final actions like ‘Save‘ or ‘Confirm‘. If we did not specify any style attribute, the button will use the @style/Widget.MaterialComponents.Button as a default style.

Raised, Filled, Unelevated Button

The UnelvatedButton will not show any elevation when the user presses the button. Let’s see an example of how we can create an UnelevatedButton.

<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:text="Press Me" style="@style/Widget.MaterialComponents.Button.UnelevatedButton" android:layout_height="wrap_content"/>

The following shows the demo of UnelevatedButton.

provided by ahsensaeed You see there’s no elevation showing when a user presses the button. The same coloring scheme applies for UnelevatedButton like, we see above in button with elevation.

Text Button

The TextButton is typically used for less pronounced action like in dialogs, cards, multiples options, etc.. It has a transparent background with colored text.

<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" style="@style/Widget.MaterialComponents.Button.TextButton" android:layout_height="wrap_content" android:text="Press Me" />

In order to use TextButton, we need to specify the style attribute inside the MaterialButton tag @style/Widget.MaterialComponents.Button.TextButton . Let’s see how it looks like.

provided by ahsensaeed In TextButton the primary color of your theme will be used for button text color instead along with a transparent background. Also, the primary color will be shown as a background with 12% opacity when you communicate with it.

Outlined Button

The OutlineButton is similar to TextButton instead added a thin grey rounded rectangle border around the button.

<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" style="@style/Widget.MaterialComponents.Button.OutlinedButton" android:layout_height="wrap_content" android:text="Press Me" />

The OutlineButton uses the style attribute of @style/Widget.MaterialComponents.Button.OutlinedButton . Below is the demo.

provided by ahsensaeed You can change the default width of 1dp stroke by adding the app:strokeWidth="2dp" . Another thing you can change the stroke color of the button with the property of app:strokeColor="@color/someColor" .

Icon Button

Every style of Material Button that we’ve discussed earlier has the property of set icon. The icon will be shown after adding the icon property to Material Button.

<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" style="@style/Widget.MaterialComponents.Button.*" android:layout_height="wrap_content" app:icon="@drawable/ic_email_black_24dp" android:text="Press Me" />

Note: Replace the style property with the appropriate button style you wanna show with the icon.

provided by ahsensaeed There is a number of properties we can use when using IconButton. The app:iconSize="15dp" for icon width and height. We can add the spacing between icon and text with app:iconPadding="10dp" . The default spacing is 4dp for TextButton and 8dp for other button types. There is also an option to change the icon color with iconTint attribute. Now in order to change the icon position use the iconGravity attribute.

Styling the MateriaL Button

cornerRadius: Used to define the radius corners of the button. The app:cornerRadius="20dp" attribute to change the size of corners. Not applicable to TextButton.

backgroundTint: If you wish to change the background color of the button. Use the app:backgroundTint="@color/colorButton" instead of android:background property to avoid breaking the button style. Not applicable to TextButton.

shapeApperance: Customize the corners using the app:shapeApperance="@style/ShapeAppearance.MaterialComponents.LargeComponent" . The default shapeAppereance for Material Button is SmallComponent.

rippleColor: The color of the button touch ripple can be customized with app:rippleColor="@color/colorButtonRipple" property.

If you find the post helpful please share the article with the community.

Thank you for being here and keep reading…

