Android XML implements the rounded corners, shadow effects, and change effects of buttons when pressed

preface

Five XML files implement the rounded corners, shadow effects, and change effects of pressing the button

implementation

• drawable/shape.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <! - the rounded - >
    <corners
        android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"/><! -- Set fillet radius -->
    
    <! - interval -- -- >
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><! -- Interval in each direction -->
    
    <! - size - >
    <size
        android:width="50dp"
        android:height="50dp"/><! -- width and height -->
    
    <! - fill - >
    <solid
        android:color=" #FF03A9F4"/><! -- Fill color -->
</shape>
Copy the code

• drawable/shapepress.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <! - the rounded - >
    <corners
        android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"/><! -- Set fillet radius -->

    <! - interval -- -- >
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><! -- Interval in each direction -->

    <! - size - >
    <size
        android:width="50dp"
        android:height="50dp"/><! -- width and height -->

    <! - fill - >
    <solid
        android:color="#FF7AD1F8"/><! -- Fill color -->
</shape>
Copy the code

• drawable/shadow.xml

      
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <! -- first shadow -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="# 21000000" />
            <corners android:radius="8dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp" />
            <! - size - >
            <size
                android:width="50dp"
                android:height="50dp"/><! -- width and height -->
        </shape>
    </item>
    <! -- Layer 2 Foreground -->
    <item
        android:bottom="2dp"
        android:right="3dp"
        android:drawable="@drawable/shape"
        >
    </item>
</layer-list>
Copy the code

• drawable/shadowpress.xml

      
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <! -- first shadow -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#0E000000" />
            <corners android:radius="8dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp" />
            <! - size - >
            <size
                android:width="50dp"
                android:height="50dp"/><! -- width and height -->
        </shape>
    </item>
    <! -- Layer 2 Foreground -->
    <! -- Layer 2 Foreground -->
    <item
        android:bottom="2dp"
        android:right="3dp"
        android:drawable="@drawable/shapepress"
        >
    </item>
</layer-list>
Copy the code

• drawable/button_style.xml

      
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <! -- Notice the order -->
    <! -- Click shadow in Touch mode -->
    <item android:state_pressed="true"  android:drawable="@drawable/shadowpress"  />
    <! -- default background image -->
    <item android:drawable="@drawable/shadow" />
</selector>
Copy the code

• Activity_main. Introduced in XML

<Button
  android:id="@+id/button9"
  android:onClick="pushNumber"
  android:text="9"
  android:background="@drawable/button_style"
  android:textColor="@color/colorWhite"
  android:layout_margin="5dp"
  />
Copy the code

Effect dynamic diagram