This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

MaterialButton use

First, the effect demonstration

Rounded corner, press with ripple, no projection, no extra space

<com.google.android.material.button.MaterialButton
android:id="@+id/bt_success"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="@dimen/dp220"
android:layout_height="@dimen/dp70"
android:layout_margin="@dimen/dp5"
android:backgroundTint="@color/theme_background"
android:insetTop="0dp"
android:insetBottom="0dp"
android:padding="0dp"
android:text="Complete"
android:textSize="@dimen/sp30"
app:cornerRadius="@dimen/dp35"
app:rippleColor="@color/white" />
Copy the code

Two, the use of steps

1. The import library

Import the dependencies, and you’re ready to go

Implementation 'com. Google. Android. Material: material: 1.5.0'Copy the code

2. Relevant public attributes

MaterialButton inherits AppCompatButton and makes some extensions on the existing Button, such as rounded corners, stroke, pre and post icon (icon can set Size, Tint, Padding, Gravity, etc.). Also support to press the water ripple and set color, basic can meet the needs of daily.

The public attributes are as follows:

3. Set related topics

Example code is as follows (set the related theme: add some Settings to styles.xml) :

<! -- MaterialButton Settings related topic -->
    <style name="MaterialButtonTheme" 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>

    <! -- Separate MaterialButton style -->
    <style name="Button" parent="Widget.MaterialComponents.Button">
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">@dimen/text_size_14_sp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:gravity">center</item>
        <item name="backgroundTintMode">src_atop</item>
        <item name="backgroundTint">@color/colorPrimary</item>
        <item name="elevation">@dimen/dimen_10_dp</item>
        <item name="rippleColor">@color/white</item>
        <item name="iconTintMode">src_atop</item>
        <item name="iconTint">@color/white</item>
        <item name="iconGravity">textStart</item>
        <item name="iconPadding">0dp</item>
        <item name="iconSize">@dimen/dimen_20_dp</item>
    </style>
    
    <! -- Separate MaterialButton style --> Theme color -->
    <style name="Button.ColorPrimary">
        <item name="backgroundTint">@color/colorPrimary</item>
    </style>
Copy the code

4. Pay attention to background

Prior to version 1.2, MaterialButton could only set the background color through the app:backgroundTint property, which received the Color State List. Custom drawable cannot be set with Android: Background.

This issue has been officially fixed since version 1.2. If no custom background is set, the MaterialShapeDrawable will still be used as the default background.

That is, if the button background is a solid color, it can be specified through app:backgroundTint; If the button background is gradient, you need to define your drawable and then set it to Android: Background.

Note: If you want to set the background using Android: Background, you need to set backgroundTint to @empty, otherwise background will not take effect.

The code is as follows:

<com.google.android.material.button.MaterialButton
    android:background="@ drawable/custom_background"
    app:backgroundTint=@ "empty" />
Copy the code

If you specify @empty, Android Studio will get a red warning and it will work fine, just ignore it. However, since you have customized the drawable, there is no need to use the MaterialButton, just use a normal Button or even a TextView.

About insetTop, insetBottom

Look at the following code:

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn1"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:textColor="@android:color/white"
    android:textSize="18sp"
/>
Copy the code

The MaterialButton default style specifies insetTop and insetBottom as 6dp, so that the height does not appear to be as high as the Button’s actual value. You can set the insetTop and insetBottom of the MaterialButton to 0DP in XML so that the height of the MaterialButton is the same as the actual height.

About the shadow

MD components come with shadows by default, and MaterialButton is no exception. But sometimes we do not want buttons have shadows, so this time can be specified style to style = “@ style/Widget. MaterialComponents. Button. UnelevatedButton”, so you can get rid of the shadow, let view look flat.

About the theme

After MDC1.1.0, the MaterialButton may have a flashback problem because the MD control was used but they were not set as the MaterialComponents. There are several solutions:

First customize the MaterialComponents_Theme in style.xml

<style name="MaterialComponents_Theme" parent="Theme.MaterialComponents.Light.NoActionBar"> <! -- Customize your theme here. --> ... </style>Copy the code

Method one:

Configured under the Application node in AndroidManifest and scoped for the entire application

<application
        .
        android:theme="@style/MaterialComponents_Theme"
Copy the code

Method 2:

Only configured for the current activity, scoped to the current activity

<activity
        .
        android:theme="@style/MaterialComponents_Theme"
Copy the code

Method 3:

Configured for each place where an MD control is used, the scope is for the current control only

<com.google.android.material.button.MaterialButton
    .
    android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" />
Copy the code

Example 5.

Sample style = “@ style/Button. ColorPrimary” for custom style

1. Normal rounded corner of MaterialButton (10DP rounded corner)

	<! -- Normal rounded corner MaterialButton-->
	<com.google.android.material.button.MaterialButton
	    android:id="@+id/materialButton1"
	    style="@style/Button.ColorPrimary"
	    android:layout_width="wrap_content"
	    android:layout_height="@dimen/dimen_30_dp"
	    android:text="10 dp rounded corners"
	    app:cornerRadius="@dimen/dimen_10_dp" />
Copy the code

2.MateralButton Plain Fillet (20DP fillet)

<! -- Normal rounded corner MaterialButton -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton2"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="20 dp rounded corners"
        app:cornerRadius="@dimen/dimen_20_dp"/>
Copy the code

3. Circular buttons with MateralButton text

<! -- Implement text only circular button -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialCircle"
        style="@style/Button.ColorPrimary"
        android:layout_width="@dimen/dimen_80_dp"
        android:layout_height="@dimen/dimen_80_dp"
        android:text="Material Circle"
        app:cornerRadius="@dimen/dimen_40_dp" />
Copy the code

<! -- Implement text only circular button + Stroke -->
<com.google.android.material.button.MaterialButton
        android:id="@+id/materialCircleStroke"
        style="@style/Button"
        android:layout_width="@dimen/dimen_80_dp"
        android:layout_height="@dimen/dimen_80_dp"
        android:backgroundTint="@color/white"
        android:text="Material Circle"
        android:textColor="@color/colorPrimary"
        app:cornerRadius="@dimen/dimen_40_dp"
        app:strokeColor="@color/colorPrimary"
        app:strokeWidth="@dimen/dimen_3_dp" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/btnSwitch"
                style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:backgroundTint="#00FFFFFF"
                android:insetTop="0dp"
                android:insetBottom="0dp"
                android:padding="0dp"
                android:text="Switch"
                android:textColor="@color/colorPrimary"
                android:textSize="10sp"
                app:cornerRadius="25dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:rippleColor="#FFFFFF"
                app:strokeColor="@color/colorPrimary"
                app:strokeWidth="2dp" />
Copy the code

4.MaterialButton only has buttons in icon style

<! -- Implement only ICON style button -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialCircleIcon"
        style="@style/Button.ColorPrimary"
        android:layout_width="@dimen/dimen_60_dp"
        android:layout_height="@dimen/dimen_60_dp"
        app:cornerRadius="@dimen/dimen_30_dp"
        app:icon="@drawable/ic_setting" />
Copy the code

5.MaterialButton Icon + Stroke + Rounded corner

<! Stroke + Rounded corner + Icon style -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButtonWhite"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:text="Material Button"
        android:textColor="@color/colorPrimary"
        app:cornerRadius="@dimen/dimen_20_dp"
        app:icon="@drawable/ic_setting"
        app:iconPadding="@dimen/dimen_10_dp"
        app:iconTint="@color/colorPrimary"
        app:strokeColor="@color/colorPrimary"
        app:strokeWidth="@dimen/dimen_3_dp" />
Copy the code

6. Stroke + rounded corner style

<! Implement stroke + rounded corner style -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton3"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="20dp rounded corner, 3DP stroke"
        app:cornerRadius="@dimen/dimen_20_dp"
        app:strokeColor="@color/red"
        app:strokeWidth="@dimen/dimen_3_dp" />
Copy the code

7. Rounded front icon

<! -- Implement rounded front icon -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton4"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Icon"
        app:cornerRadius="@dimen/dimen_10_dp"
        app:icon="@drawable/ic_setting"
        app:iconPadding="@dimen/dimen_20_dp" />
Copy the code

8. Shaded icon with rounded corners

<! -- Implement rounded corner after coloring icon -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton5"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Post-coloring"
        app:cornerRadius="@dimen/dimen_10_dp"
        app:icon="@drawable/ic_setting"
        app:iconGravity="end"
        app:iconPadding="@dimen/dimen_20_dp"
        app:iconTint="@color/mediumvioletred"
        app:iconTintMode="src_in" />
Copy the code

9. MaterialButtonToggleGroup MaterialButton (combination)

Public attributes:

attribute	describe	parameter
app:checkedButton	Selected by default	Button ID
app:singleSelection	Single choice	true/false
app:selectionRequired	After this parameter is set to true, at least one selection is forced	true/false

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_20_dp"
        app:checkedButton="@id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton5"
        app:singleSelection="true">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn1"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option one."
            android:textSize="@dimen/text_size_16_sp" />
    
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn2"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option two"
            android:textSize="@dimen/text_size_16_sp" />
    
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn3"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option three"
            android:textSize="@dimen/text_size_16_sp" />
    
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn4"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option four"
            android:textSize="@dimen/text_size_16_sp" />
    
    </com.google.android.material.button.MaterialButtonToggleGroup>
Copy the code

Overall XML code

      
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.supernova.module.widget.BackTitleBar
        android:id="@+id/backTitleBar"
        android:layout_width="@dimen/dimen_0_dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:showBackIcon="true"
        app:titleText="MaterialButton" />
    
    <! -- Normal rounded corner MaterialButton-->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton1"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dimen_30_dp"
        android:layout_marginTop="@dimen/dimen_16_dp"
        android:text="10 dp rounded corners"
        app:cornerRadius="@dimen/dimen_10_dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/materialCircle"
        app:layout_constraintTop_toBottomOf="@+id/backTitleBar" />
    
    <! -- Implement text only circular button -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialCircle"
        style="@style/Button.ColorPrimary"
        android:layout_width="@dimen/dimen_80_dp"
        android:layout_height="@dimen/dimen_80_dp"
        android:layout_marginTop="@dimen/dimen_16_dp"
        android:text="Material Circle"
        app:cornerRadius="@dimen/dimen_40_dp"
        app:layout_constraintLeft_toRightOf="@+id/materialButton1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/backTitleBar" />
    
    <! -- Implement only ICON style button -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialCircleIcon"
        style="@style/Button.ColorPrimary"
        android:layout_width="@dimen/dimen_60_dp"
        android:layout_height="@dimen/dimen_60_dp"
        android:layout_marginTop="16dp"
        app:cornerRadius="@dimen/dimen_30_dp"
        app:icon="@drawable/ic_setting"
        app:layout_constraintLeft_toRightOf="@+id/materialButton1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialCircle" />
    
    <! -- Normal rounded corner MaterialButton-->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton2"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_16_dp"
        android:text="20 dp rounded corners"
        app:cornerRadius="@dimen/dimen_20_dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/materialCircleIcon"
        app:layout_constraintTop_toBottomOf="@+id/materialCircle" />
    
    <! Stroke + Rounded corner + Icon style -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButtonWhite"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_20_dp"
        android:backgroundTint="@color/white"
        android:text="Material Button"
        android:textColor="@color/colorPrimary"
        app:cornerRadius="@dimen/dimen_20_dp"
        app:icon="@drawable/ic_setting"
        app:iconPadding="@dimen/dimen_10_dp"
        app:iconTint="@color/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/materialCircleStroke"
        app:layout_constraintTop_toBottomOf="@+id/materialCircleIcon"
        app:strokeColor="@color/colorPrimary"
        app:strokeWidth="@dimen/dimen_3_dp" />
    
    <! -- Implement text only circle + Stroke button -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialCircleStroke"
        style="@style/Button"
        android:layout_width="@dimen/dimen_80_dp"
        android:layout_height="@dimen/dimen_80_dp"
        android:layout_marginTop="@dimen/dimen_16_dp"
        android:backgroundTint="@color/white"
        android:text="Material Circle"
        android:textColor="@color/colorPrimary"
        app:cornerRadius="@dimen/dimen_40_dp"
        app:layout_constraintLeft_toRightOf="@+id/materialButtonWhite"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialCircleIcon"
        app:strokeColor="@color/colorPrimary"
        app:strokeWidth="@dimen/dimen_3_dp" />
    
    <! Implement stroke + rounded corner style -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton3"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_10_dp"
        android:text="20dp rounded corner, 3DP stroke"
        app:cornerRadius="@dimen/dimen_20_dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialCircleStroke"
        app:strokeColor="@color/red"
        app:strokeWidth="@dimen/dimen_3_dp" />
    
    <! -- Implement rounded front icon -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton4"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_10_dp"
        android:text="Icon"
        app:cornerRadius="@dimen/dimen_10_dp"
        app:icon="@drawable/ic_setting"
        app:iconPadding="@dimen/dimen_20_dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton3" />
    
    <! -- Implement rounded corner after coloring icon -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/materialButton5"
        style="@style/Button.ColorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_10_dp"
        android:text="Post-coloring"
        app:cornerRadius="@dimen/dimen_10_dp"
        app:icon="@drawable/ic_setting"
        app:iconGravity="end"
        app:iconPadding="@dimen/dimen_20_dp"
        app:iconTint="@color/mediumvioletred"
        app:iconTintMode="src_in"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton4" />
    
    <! MaterialButton-->
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_20_dp"
        app:checkedButton="@id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton5"
        app:singleSelection="true">
    
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn1"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option one."
            android:textSize="@dimen/text_size_16_sp" />
    
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn2"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option two"
            android:textSize="@dimen/text_size_16_sp" />
    
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn3"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option three"
            android:textSize="@dimen/text_size_16_sp" />
    
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn4"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option four"
            android:textSize="@dimen/text_size_16_sp" />
    
    </com.google.android.material.button.MaterialButtonToggleGroup>
Copy the code

My Github address: github.com/yutils My CSDN address: blog.csdn.net/Yu1441 My nuggets address: juejin.cn/user/443806… Thank you for your attention