Open in app

Sign in

Write

Sign in

Buttons — Material Components For Android

Velmurugan Murugesan
5 min readApr 10, 2019

--

Material Button Android is a customizable button component with updated visual styles. This button component has several built-in styles to support different levels of emphasis, as typically any UI will contain a few different buttons to indicate different actions.

Do not use the android:background attribute. Material Button manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.

For filled buttons, this class uses your theme’s ?attr/colorAccent for the background tint color and white for the text color. For unfilled buttons, this class uses ?attr/colorAccent for the text color and transparent for the background tint.

To work with the material design, we should add the material design library into our projects.

implementation 'com.google.android.material:material:1.0.0'

Checkout my other post on Material design:

ShapeableImageView — Material components for android

Sliders — Material Component For Android

Android Chips — Material Component For Android

Cardview Android Example [beginners]

Type of Material Button

Filled, elevated button (default)

The default style represents an elevated button with a colored background. This should be used for important, final actions that complete a flow, like ‘Save’ or ‘Confirm’. If no style attribute is specified for a MaterialButton, this is the style that will be used.

Style attribute for filled button:

style="@style/Widget.MaterialComponents.Button"

create filled material button using XML:

<com.google.android.material.button.MaterialButton
        android:id="@+id/material_button"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Default Button"/>

Alternatively, it can be done programmatically:

val cardButton =
            MaterialButton(this,null, R.attr.materialButtonStyle)
        cardButton.text = "Filled Button"
        cardButton.id = View.generateViewId()
        layout.addView(cardButton)

Filed button with icon

Button
        android:id="@+id/containedButton"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:icon="@drawable/ic_baseline_sort_24"
        android:text="Filled button" />

Outlined button

The OutlinedButton style has a transparent background with colored text, and a small stroke around the button. Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

Style attribute for outlined button:

@style/Widget.MaterialComponents.Button.OutlinedButton

create outlined button using XML,

<com.google.android.material.button.MaterialButton
        android:id="@+id/materialoutline_button"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlined Button"/>

Alternatively, it can be done programmatically:

val cardButton =
            MaterialButton(this,null, R.attr.materialButtonOutlinedStyle)
        cardButton.text = "Outlined Button"
        cardButton.id = View.generateViewId()
        layout.addView(cardButton)

Outlined button with icon

<Button
        android:id="@+id/containedButton"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:icon="@drawable/ic_baseline_favorite_border_24"
        android:text="Outlined Button" />

Text button

The TextButton style has a transparent background with colored text. Text buttons are used for low-priority actions, especially when presenting multiple options.

Style attribute for text button:

@style/Widget.MaterialComponents.Button.TextButton

create text button using XML,

<com.google.android.material.button.MaterialButton
        android:id="@+id/material_text_button"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Button"/>

Text button with icon

<Button
        android:id="@+id/containedButton"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:icon="@drawable/ic_baseline_filter_list_24"
        android:text="Text Button" />

Toggle button

Toggle buttons can be used to select from a group of choices.

To emphasize groups of related toggle buttons, a group should share a common container.

Style attribute for toggle button:

@style/Widget.MaterialComponents.Button.OutlinedButton

crate toggle buttons using XML,

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true"
        android:layout_gravity="center"
        app:checkedButton="@id/button2"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:selectionRequired="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <Button
            style="@style/Widget.App.Button.OutlinedButton"
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sort"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton"
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Filter"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton"
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Favorite"
            />
    </com.google.android.material.button.MaterialButtonToggleGroup>

Toggle button with icon

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true"
        android:layout_gravity="center"
        app:checkedButton="@id/button2"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:selectionRequired="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <Button
            style="@style/Widget.App.Button.OutlinedButton"
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sort"
            app:icon="@drawable/ic_baseline_sort_24"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton"
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Filter"
            app:icon="@drawable/ic_baseline_filter_list_24"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton"
            app:icon="@drawable/ic_baseline_favorite_border_24"

            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Favorite"
            />
    </com.google.android.material.button.MaterialButtonToggleGroup>

Toggle button with icon only

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true"
        android:layout_gravity="center"
        app:checkedButton="@id/button2"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:selectionRequired="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <Button
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:id="@+id/button1"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="Sort"
            app:icon="@drawable/ic_baseline_sort_24"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:id="@+id/button2"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="Filter"
            app:icon="@drawable/ic_baseline_filter_list_24"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            app:icon="@drawable/ic_baseline_favorite_border_24"

            android:id="@+id/button3"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="Favorite"
            />
    </com.google.android.material.button.MaterialButtonToggleGroup>

Attributes

The following attributes can be changed for Material Button:

padding

android:padding
android:paddingLeft
android:paddingRight
android:paddingStart
android:paddingEnd
android:paddingTop
android:paddingBottom

Button inset

android:insetLeft
android:insetRight
android:insetTop
android:insetBottom

Background color

app:backgroundTint
app:backgroundTintMode

Icon drawable

app:icon

Padding between icon and button text

app:iconPadding
Icon color

app:iconTint
app:iconTintMode

Stroke

app:strokeColor
app:strokeWidth

The radius of all four corners of the button

app:cornerRadius

Ripple

app:rippleColor

Theming material button

Buttons support Material Theming and can be customized in terms of color, typography and shape.

Implementing button theming

using default style theme attributes, styles and theme overlays (themes all buttons but does not affect other components):

res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <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>

       <style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <style name="Widget.App.OutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.OutlinedButton</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <style name="Widget.App.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextButton</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
        <item name="strokeColor">#121212</item>

    </style>

    <style name="ThemeOverlay.App.Button" parent="">
        <item name="colorPrimary">#C6C6C6</item>
        <item name="colorOnPrimary">#121212</item>
    </style>

    <style name="ThemeOverlay.App.OutlinedButton" parent="">
        <item name="colorPrimary">#311B92</item>
        <item name="colorOnPrimary">#121212</item>

        <item name="strokeColor">#121212</item>

    </style>

    <style name="ThemeOverlay.App.TextButton" parent="">
        <item name="colorPrimary">#A33333</item>
        <item name="colorOnPrimary">#121212</item>
    </style>

    <style name="TextAppearance.App.Button" parent="TextAppearance.MaterialComponents.Button">
        <item name="fontFamily">@font/roboto_bold</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
        <item name="android:textColor">#f43434</item>

    </style>

    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">8dp</item>
    </style>

</resources>

Using one of the styles in the layout (affects only this button):

<Button
    ...
    style="@style/Widget.App.Button"
/>

Android Material Button Example

  1. add below dependency in your build.gradle.
implementation 'com.google.android.material:material:1.0.0'

2. Change the theme of the app.

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

3. Finally, add the Material Buttons into your activity XML.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="#E5E5E5"
    android:orientation="vertical"
    android:gravity="center"
    android:id="@+id/layout"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/containedButton"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:icon="@drawable/ic_baseline_sort_24"
        android:text="Filled button" />

    <Button
        android:id="@+id/outlineButton"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Outline button"/>
    <Button
        android:id="@+id/textButton"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Text button"/>


    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true"
        android:layout_gravity="center"
        app:checkedButton="@id/button2"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:selectionRequired="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <Button
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:id="@+id/button1"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="Sort"
            app:icon="@drawable/ic_baseline_sort_24"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:id="@+id/button2"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="Filter"
            app:icon="@drawable/ic_baseline_filter_list_24"
            />
        <Button
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            app:icon="@drawable/ic_baseline_favorite_border_24"

            android:id="@+id/button3"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:text="Favorite"
            />
    </com.google.android.material.button.MaterialButtonToggleGroup>

</LinearLayout>

Thats it.

Thanks for reading.

Android
Material Design
Android Material
Button
Android Material Button

--

--

Velmurugan Murugesan
Velmurugan Murugesan

Written by Velmurugan Murugesan

530 Followers
141 Following

Lead Android Engineer @htcindia | @github contributor | Blog writer @howtodoandroid | Quick Learner

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams