The effect

preface

Let’s take a lookMaterialButtonWhat is the

As can be seen from the figure above, MaterialButton is no mystery, but a subclass of Button, but after Google’s packaging, on the basis of complying with Material Design, it is more convenient to use, and easy to achieve the desired effect.

use

Introduce the material package

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

conventional

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name"
    android:textAllCaps="false" />
Copy the code
  • Just like Button,textAllCapsYes Cancel all case.

icon

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:icon="@mipmap/ic_launcher" />
Copy the code
  • app:iconProperty to specify an icon.

Rounded corners

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:cornerRadius="25dp"
    app:icon="@mipmap/ic_launcher"
    app:iconGravity="end" />
Copy the code
  • app:cornerRadiusProperty to specify the fillet size.

The Button stroke

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:cornerRadius="25dp"
    app:strokeColor="@color/black"
    app:strokeWidth="3dp" />
Copy the code
  • app:strokeColorStroke color
  • app:strokeWidthStroke width

Text stroke

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:cornerRadius="5dp"
    app:rippleColor="@color/red"
    app:strokeColor="@color/red"
    app:strokeWidth="3dp" />
Copy the code

  • Instead of using style, the difference is that this is the stroke in the normal state of a Button, and this is the stroke in the state of a Button.

  • App :rippleColor click the rippleColor

The text button

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false" />
Copy the code
  • Same as usual, but addedstyle, this style is set for the background color when not selectedtransparent.

The round Button

<com.google.android.material.button.MaterialButton
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="20dp"
    android:insetTop="0dp"
    android:insetBottom="0dp"
    android:text="@string/login"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:cornerRadius="999dp"
    app:strokeColor="@color/orange"
    app:strokeWidth="5dp" />
Copy the code

Now, why do I have a circular Button here, because there are two properties involved, right

  • android:insetTopFrom the above
  • android:insetBottomBottom margin

These two parameters default to 6dp, if not set to 0dp, it is not a regular circle.

For the default parameters for the other properties, select the Design panel in the upper right corner of the XML file and select the View you want to View.

Author: yechaoa

Source code analysis ICON

The only drawback is that the MaterialButton cannot set an event for an icon like a chip.

Let’s take a look at the source code for the implementation of icon:

  public void setIcon(@Nullable Drawable icon) {
    if (this.icon != icon) {
      this.icon = icon;
      updateIcon(/* needsIconUpdate = */ true);
    }
  }
Copy the code

This is easy, so let’s go ahead and look at the updateIcon method that was called

private void updateIcon(boolean needsIconUpdate) { // Forced icon update if (needsIconUpdate) { resetIconDrawable(isIconStart); return; }... if (hasIconChanged) { resetIconDrawable(isIconStart); }}Copy the code

Both of these pieces of code call the resetIconDrawable method, so continue

private void resetIconDrawable(boolean isIconStart) { if (isIconStart) { TextViewCompat.setCompoundDrawablesRelative(this, icon, null, null, null); } else { TextViewCompat.setCompoundDrawablesRelative(this, null, null, icon, null); }}Copy the code

As many of you will see by this point, the icon implementation is equivalent to drawableStart. Only in the MaterialButton drawableStart has no effect, but icon and iconGravity are used together to achieve the effect.

attribute

For XML attributes, I did a neat thing

attribute meaning
insetBottom The bottom margin is 6dp by default
insetTop The top margin is 6dp by default
cornerRadius The rounded size
icon icon
iconGravity Icon position, only before and after
iconPadding Icon distance from text, default 8dp
iconSize Size of the icon
iconTint Icon color
iconTintMode Icon Color Mode
rippleColor Click on ripple color
strokeColor Stroke color
strokeWidth Stroke width
app:backgroundTint Background color (notice the namespace)

Github

Github.com/yechaoa/Mat…

Thank you

The official documentation

The last

Writing is not easy, thanks for your support