Android

Lost In Android Support Material Design Library : Material Button

Google+ Pinterest LinkedIn Tumblr

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.

Android Material Elevated Filled Button
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.

Android Material 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.

Android Material TextButton
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.

Android Material OutlinedButton
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.

Android Material IconButton
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.

Android Material Button Corner Radius

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.

Android Material Button Background Tint

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

Android Material Button LargeComponent

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

Android Material Button Ripple Effect

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

Thank you for being here and keep reading…

2 Comments

    • ahsensaeed067 Reply

      Set property with the app:cornerRadius instead of android:cornerRadius.

Write A Comment