solid: filling
android:color specifies the fill color
gradient: gradient
android:startColor and android:endColor are start and end colors, respectively.
android:angle is a gradient angle and must be an integral multiple of 45.
In addition, the default mode of gradient is android:type="linear", which means linear gradient.
You can specify gradient to radial gradient, android:type="radial", and radial gradient needs to specify radius android:gradientRadius="50".
The angle value corresponds to the position shown in the figure:
Stroke: stroke
android:width="2dp" edge width, android:color edge color.
We can also make the edge of the drawing into a dotted line in the form of:
android:dashWidth="5dp"
android:dashGap="3dp"
Where android:dashWidth denotes the width of a horizontal line like'-', android:dashGap denotes the distance between them.
Corners: rounded corners
android:radius is the radian of the angle, the bigger the value, the rounder the angle.
We can also set four corners at different angles.
If you set five attributes at the same time, the Radius attribute is invalid
android:Radius="20dp". Set the radius of four corners
android:topLeftRadius="20dp". Set the radius of the upper left corner
android:topRightRadius="20dp". Set the radius of the upper right corner.
android:bottomLeftRadius="20dp". Set the radius of the lower right corner.
android:bottomRightRadius="20dp". Set the radius of the lower left corner
padding: interval
You can set the interval between the top and bottom, left and right directions.
Here's a simple example, ShapDemo, which defines two xml files under the drawable folder:
button_bg.xml is as follows:
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- Fill --> <solid android:color="#Ff9d77 "/> <! -- Defines the fill color value - >" <!-- Stroke --> <stroke android:width="2dp" android:color="#Fad3cf "/> <! -- Defines the width of the edge and the color value of the edge - >" <!-- fillet --> <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" /> <!-- Set the radius of four corners --> <!-- interval --> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> <!-- Set intervals in all directions --> </shape>
The contents of button_pressed_bg.xml are as follows:
Here we show that dash parameter is set in the edge of the drawing, which makes the edge of the drawing become dotted line.<shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- Gradual change --> <gradient android:endColor="#FFFFFF" android:gradientRadius="50" android:startColor="#ff8c00" android:type="radial" /> <!-- Stroke --> <stroke android:dashGap="3dp" android:dashWidth="5dp" android:width="2dp" android:color="#dcdcdc" /> <!-- fillet --> <corners android:radius="5dp" /> <!-- interval --> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape>
Add a button.xml file under the drawable folder as follows:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_pressed_bg" android:state_pressed="true"></item> <item android:drawable="@drawable/button_bg"></item> </selector>
As mentioned before, button_bg is displayed under normal (normal) conditions and button_pressed_bg is displayed under press (press).
Let's take a look at activity_main.xml in the layout directory:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button" android:text="TestShapeButton" /> </RelativeLayout>
Specify BackgroundAs button.xml directly under the drawable folder.