Android Material Common components

Study Notes (2)

Android Material Common components

Note that the Meterial component must be used with the Meterial theme, otherwise some controls may not work

Add dependencies, currently up to 1.2.1

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

1) TextInputLayout is used with TextInputEditText

 <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/til"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username"  // Write hints on TextInputLayout. When you click Edittext, the text floats up
            app:counterEnabled="true"  // Enable the count function
            app:counterMaxLength="10"  // Count the maximum length allowed. Input can exceed the maximum length
            app:errorEnabled="true"    // Enable error message, the UI will display when the maximum length is exceeded
            app:hintTextAppearance="@style/MaterialAlertDialog.MaterialComponents.Title.Text" // Hint's custom style
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:passwordToggleEnabled="true">   // If the password is visible, the password is visible by default

            <com.google.android.material.textfield.TextInputEditText// With normalEditTextDo not have what differenceandroid:layout_width="match_parent"
                android:inputType="textPassword"
                android:layout_height="80dp" />
        </com.google.android.material.textfield.TextInputLayout>
Copy the code

We set error messages in our code

binding.til.editText? .addTextChangedListener(object : TextWatcher { override funbeforeTextChanged(s: CharSequence? , start: Int, count: Int, after: Int) {
                TODO("Not yet implemented")
            }

            override fun onTextChanged(s: CharSequence? , start: Int, before: Int, count: Int) {
                TODO("Not yet implemented")
            }

            override fun afterTextChanged(s: Editable?) {
                if(binding.til? .editText!! .text.toString().trim().length >10) {
                    binding.til.error = "User name length out of limit"
                } else {
                    binding.til.error = null}}})Copy the code

Render the effect in a GIF

Added: ① Change the password visible to the eye icon. The custom selector

<? xml version="1.0" encoding="utf-8"? ><selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/pwd_visiable" android:state_checked="true"/>
    <item android:drawable="@mipmap/pwd_gone" android:state_checked="false"/>
    <item android:drawable="@mipmap/pwd_gone" />
</selector>
Copy the code

Then use TextInputLayout in the layout file

 app:passwordToggleDrawable="@drawable/ic_background"
Copy the code

Support a variety of styles of customization

app:hintTextAppearance="@style/HintAppearance"Floating label font styleapp:errorTextAppearance="@style/ErrorAppearance"Error message font styleapp:counterTextAppearance="@style/CounterAppearance"Font styles are counted when the maximum word count is not exceededapp:counterOverflowTextAppearance="@style/CounterOverflowAppearance"When the maximum number of words is exceeded, the font style is countedCopy the code

2) Chip and ChipGroup

The classification of the Chip

(1) the Action chip

style="@style/Widget.MaterialComponents.Chip.Action"
Copy the code

Default style, do not show before and after the icon, click after no selected state.

(2) the Filter Chip

style="@style/Widget.MaterialComponents.Chip.Filter"
Copy the code

In the initial state, the front and back ICONS are not displayed. After clicking, the selected ICONS are displayed and the selected state is displayed

(3) Entry Chip

style="@style/Widget.MaterialComponents.Chip.Entry"
Copy the code

By default, the delete button is displayed at the end, and the selected icon is displayed at the front after clicking.

(4) Choice Chip

style="@style/Widget.MaterialComponents.Chip.Choice"
Copy the code

By default, before and after ICONS are not displayed, but when clicked, they are selected. You can select multiple ICONS in ChipGroup

The properties of Chip

Category Property Name Description Shape App :chipCornerRadius Radius Size App :chipMinHeight Minimum height Background App :chipBackgroundColor Background color Border App :chipStrokeColor Border Color Border APP :chipStrokeWidth Border width Ripple APP :rippleColor Water Ripple effect color Label Android: Text Text content Label Android :textColor changes the textColor Label android:textAppearance font style Chip Icon app:chipIconVisible whether the Icon in front shows the Chip Icon Chip Icon APP :chipIconTint Color Icon before text Chip Icon APP :chipIconSize Chip Icon before text Close Icon App :closeIconVisible Chip Close Icon app:closeIcon Chip Close Icon app:closeIconSize Text behind the Close Icon size Close Icon app:closeIconTint Text behind the coloring Checkable app: Checkable can be Checked Checked Icon app:checkedIconVisible Check Icon App :checkedIcon Check Icon Paddings app:chipStartPadding Chip Left margin Paddings APP :chipEndPadding Paddings app:iconStartPadding chipIcon Paddings app:iconEndPadding chipIcon Paddings The app: textStartPadding text left Paddings app: textEndPadding text right margin Paddings app: do the left from the Paddings closeIconStartPadding close button App :closeIconEndPadding Close the right margin of the buttonCopy the code

Chip listening in

Click the event setOnClickListener

Selected setOnCheckedChangeListener

Delete the Chip to monitor setOnCloseIconClickListener

ChipGroup

Like RadioGroup, ChipGroup is used to manage multiple chips

Auto wrap (default)

SingleLine scrolling app:singleLine=”true”

The properties of ChipGroup

Example of property name functionapp:checkedChip Initially selected Chip app:checkedChip= "@ID /chipInGroup2_1"appApp :chipSpacing= "25dp"app: chipSpacingHorizontal app: horizontal spacing between the Chip chipSpacingHorizontal = 35 "dp"appApp :chipSpacingVertical= "10dp"app:singleLine enable singleLine mode app:singleLine="true"app:singleSelection Enable radio mode app:singleSelection="true"Copy the code

ChipGroup listening in

Monitored setOnCheckedChangeListener (1) is selected

SingleSelction =true takes effect

② Get the selected Chipid getCheckedChipIds

3), MaterialButton (emphasis)

The rounded button

app:cornerRadius="15dp"  // The rounded corner size
app:backgroundTint="@color/colorPrimaryDark"  // Modify solid color background, if gradient color is required, custom drawable
Copy the code

Irregular fillet

<! -- Double rounded button style --><style name="DoubleFilletButtonStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">25dp</item>
        <item name="cornerSizeBottomRight">25dp</item>
    </style>
Copy the code

Add borders

  app:strokeColor="@color/black"
  app:strokeWidth="1dp"
  android:padding="1dp"  // Add padding depending on the effect
Copy the code

Radio buttons

android:layout_width="80dp"
android:layout_height="80dp"  // Circle size
android:insetLeft="0dp"    //4 inner margins default to 6dp. To set the circle, set the inner margins to 0dp
android:insetTop="0dp"     //4 inner margins default to 6dp. To set the circle, set the inner margins to 0dp
android:insetRight="0dp"   //4 inner margins default to 6dp. To set the circle, set the inner margins to 0dp
android:insetBottom="0dp"  //4 inner margins default to 6dp. To set the circle, set the inner margins to 0dp
app:cornerRadius="40dp"   // Half the diameter
Copy the code

Add icon icon to Button

The following code places the icon and text in the middle of the button, with the default icon to the left and text in the middle of the remaining space

android:layout_width="210dp"
android:layout_height="80dp"
android:gravity="left|center_vertical"   // Left, vertical center
android:paddingLeft="60dp"  // Jump to the position of icon and text via the padding
android:text="Thumb up"
android:textSize="24sp"
app:cornerRadius="40dp"
app:icon="@mipmap/dianzhan"   / / reference icon
app:iconGravity="start"       // Position of icon, optional upper left, lower right
app:iconPadding="0dp"         / / icon padding
app:iconSize="25dp"           / / the size of the icon
app:iconTint="@color/teal_200"   // Change the rendering color of icon to pink
app:iconTintMode="src_atop"    // Render mode
Copy the code

Water ripples on the Button

App :rippleColor=”@color/black”

Supplementary parts:

1) if you want the button to set the height and height Can be four insetTop insetBottom insetLeft, insetRight is set to 0

(2) get rid of the shadow of the Button, style can be specified as style = “@ style/Widget. MaterialComponents. Button. UnelevatedButton” so it looks more flat

4) ShapeableImageView (key)

Rounded corners

Define rounded corner style

<style name="roundedCornerStyle">
      <item name="cornerFamily">rounded</item>
      <item name="cornerSize">12dp</item>
</style>
Copy the code

use

app:shapeAppearanceOverlay="@style/roundedCornerStyle"
Copy the code

circular

Define circular style

 <style name="circleImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>   / / define 50%
    </style>
Copy the code

Use the same

Corner cut

<style name="cutImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">24dp</item>
    </style>
Copy the code

Diamond cutting Angle

<style name="diamondImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>
Copy the code

Irregular fillet

 <style name="roundedCornerStyle">
        <item name="cornerFamilyTopLeft">rounded</item>   // Select rounder,cunt
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>   // use dp or percentage
        <item name="cornerSizeTopRight">50%</item>
    </style>
Copy the code

Add an external border

android:padding="2dp"  / / need
app:strokeColor="# 000"
app:strokeWidth="4dp"
Copy the code

5) Progress Indicators

Linear and Circular Material Design provides two visually distinct types of progress indicators: linear and circular progress indicators. Corresponding LinearProgressIndicator and CircularProgressIndicator respectively

Deterministic and uncertain Progress indicators may be deterministic or uncertain. Determine how long the metrics display process takes. An indeterminate indicator indicates an indeterminate wait time. If progress cannot be detected, or it is not necessary to indicate how long the activity will take. Simply add the Android: Indeterminate =”true” attribute to scroll through the loop for an indeterminate progress indicator.

Commonly used attributes

App: indicatorDirectionLinear linear indicator forward in the direction of the modelappPattern: indicatorDirectionCircular circular indicator forward directionapp:indicatorCornerRadius indicator and radius of each corner of the trackapp:indicatorSize Indicates the width of progress tracking and indicatorsappCircularRadius Defines the radius of the circular progress indicatorappCircularInset The extra space from the outer edge of an indicator to the edge of an indicator, equivalent to marginapp:trackColor The color used by the progress track, the color of the progress not completedapp:indicatorColor indicates the indicatorColor. It can be set as a single color or as an array of colors.Copy the code

Sets the indicator color array

app:indicatorColor="@array/cat_custom_progress_colors"
Copy the code

colors.xml

 <integer-array name="cat_custom_progress_colors">
    <item>@color/yellow_500</item>
    <item>@color/blue_700</item>
    <item>@color/red_500</item>
  </integer-array>
Copy the code

6), the Slider

Enhanced SeekBar

<com.google.android.material.slider.Slider
      android:id="@+id/slider"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:value="8.09"
      android:valueFrom="0.0"
      android:valueTo="11.0" />
Copy the code

RangeSlider

<com.google.android.material.slider.RangeSlider
    android:id="@+id/range_slider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:values="@array/initial_slider_values"
    android:valueFrom="0.0"
    android:valueTo="11.0" />
Copy the code

arrays.xml

<resources>
  <array name="initial_slider_values">
    <item>2.0</item>
    <item>7.0</item>
  </array>
</resources>
Copy the code

There are many other features

7), the Toolbar

Collates the more common properties of the Toolbarapp:navigationIcon Sets navigation buttonapp:logo Sets the logo iconapp:title Sets the titleapp:titleTextColor sets the titleTextColorapp:subtitle Sets the subtitleapp:subtitleTextColor sets the subtitleTextColorapp:titleTextAppearance Sets title-text-related properties, such as font, color, size, and so onapp:subtitleTextAppearance Sets subtitle text-related properties, such as font, color, size, and so onapp: logoDescription logoapp: the menu Settings menuandroidBackground: background of the ToolbarandroidTheme: the themeCopy the code

The title centered

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/purple_500"
        app:navigationIcon="@drawable/abc_vector_test"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Title"
            android:textColor="@color/white"
            android:textSize="22sp" />
    </androidx.appcompat.widget.Toolbar>
Copy the code

The end:

This note is for personal study only. References and quotations from other authors are appreciated here.

1, author: e Electric pony E

Article link: blog.csdn.net/weixin_4204…

2. Author: Chenxi _LLW

The article links: cloud.tencent.com/developer/a…

Other fragmentary articles are no longer available