Material Button in Android

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.

Add icons to the start or center of this button using the app:icon, app:iconPadding, app:iconTint, app:iconTintMode and app:iconGravity attributes.


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.

<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"
/>

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.

<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"
/>

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.

<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"
/>

Icon button

Every style for Material Button has an additional. Icon style. This style is meant to be used when the icon attribute is set for the button. The icon button style has a smaller start and end paddings to achieve visual balance in the button when an icon is present.

<com.google.android.material.button.MaterialButton
android:id="@+id/material_icon_button"
style="@style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon Button"
app:icon="@drawable/ic_android_black_24dp"
/>

Attributes

The following attributes can be changed for Material Button:

DescriptionRelevant attributes
Button paddingandroid:padding
android:paddingLeft
android:paddingRight
android:paddingStart
android:paddingEnd
android:paddingTop
android:paddingBottom
Button insetandroid:insetLeft
android:insetRight
android:insetTop
android:insetBottom
Background colorapp:backgroundTint
app:backgroundTintMode
Icon drawableapp:icon
Padding between icon and button textapp:iconPadding
Icon colorapp:iconTint
app:iconTintMode
Strokeapp:strokeColor
app:strokeWidth
The radius of all four corners of the
button
app:cornerRadius
Rippleapp:rippleColor

Android Material Button Example

  • add below dependency in your build.gradle.
implementation 'com.google.android.material:material:1.0.0'
  • 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>
  • 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:orientation="vertical"
android:gravity="center_horizontal"
android:padding="20dp"
tools:context=".MainActivity"
>

<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"
/>

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

<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"
/>

<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"
/>

<com.google.android.material.button.MaterialButton
android:id="@+id/material_icon_button"
style="@style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon Button"
app:icon="@drawable/ic_android_black_24dp"
/>

<com.google.android.material.button.MaterialButton
android:id="@+id/material_icon_text_button"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon Text button"
app:icon="@drawable/ic_android_black_24dp"
/>
</LinearLayout>

Screenshot

Material Button ANdroid
Material Button Android

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top
%d bloggers like this: