​

Shape can be used to draw a variety of control styles in XML, which is much more convenient than cutting UI diagrams:

A) Can reduce the size of app;

B. The code is more flexible and extensible to control the transformation of various states;

C, it is more accurate. There may also be jagged edges in the corners of the pictures

A rounded background

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <! <stroke Android :width="1dp" Android :color="@color/blue" /> <! -- padding: padding: Button text inside the Button border spacing --> <! -- <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" /> --> <solid android:color="@color/white" /> <corners android:radius="5dip" /> </shape>Copy the code

Solid: inner background stroke: outer frame background padding: distance between text and the borderCopy the code

Shape: Rectangle (rectangle), oval (line), ring (rectangle)Copy the code

Effect:Copy the code

​

 
Copy the code
 
Copy the code
 
Copy the code
 
Copy the code

Two, two layers of rounded background

 
Copy the code
<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false" > <solid android:color="@color/white" /> <padding android:left="2dp" android:top="1dp" android:right="2dp" android:bottom="1dp" /> <stroke android:width="3dp" android:color="#33FFFFFF" /> <size android:width="15dp" android:height="15dp" /> </shape>Copy the code

Size: The margin between the outer background and the inner background, where the inner background covers the outer backgroundCopy the code

Effect:Copy the code

​

 
Copy the code
In addition, here the solid color circle is used more, paste the XML source code:Copy the code

 
Copy the code
<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false"> <padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" /> <solid android:color="@color/red" /> <stroke android:width="5dp" android:color="#00000000" /> <size android:width="15dp" android:height="15dp" /> </shape>Copy the code

Effect:

​

Three, halfCopy the code

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#CCCCCC"/> <corners android:bottomLeftRadius="0px" android:bottomRightRadius="30dp" android:topLeftRadius="0px" android:topRightRadius="30dp"/> </shape>Copy the code

rendering

​

Four, gradual change of color

 
Copy the code
<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:android="http://schemas.android.com/apk/res/android"> <! -- startColor: Set the start value of the gradient color endColor: Set the end value of the gradient color Angle: Set the gradient Angle to 90: Gradient 0 from bottom up: <gradient Android :startColor="#dedede" Android :endColor="#f0f0f0" Android: Angle ="90" /> </shape>Copy the code

Note: here the endColor is at the top

Effect:Copy the code

​

 
Copy the code

Implement color-changing for multiple states

That is, what is the background of the control originally, what is the background of the click, what is the background of the focus, what is the background of the selected, this is used moreCopy the code

 
Copy the code
<? The XML version = "1.0" encoding = "utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android"> <! --<item android:drawable="@drawable/home_slc" android:state_selected="true" />--> <! --<item android:drawable="@drawable/home_nor" />--> <item android:drawable="@drawable/buy_sec" android:state_selected="true" /> <item android:drawable="@drawable/buy_nor" /> </selector>Copy the code

The value of state_selected can be true or false, and state_pressed STATE_checked state_selected state_foucused. It is worth noting that not all controls have all of the above properties:

 
Copy the code

Another common use is to define arrays in stirng. XML, rather than clumsily getString by getString

 
Copy the code
<? xml version = "1.0"  encoding = "utf-8" ?> 
<resources> 
     <string-array name = "planets_array" > 
         <item> Mercury </item> 
         <item> Venus </item> 
         <item> Earth </item> 
         <item> Mars </item> 
     </string-array> 
</resources>
Copy the code

The acquisition method is:

 
Copy the code
Resources res = getResources () ; 
String[] planets =res.getStringArray(R.array.planets_array);
Copy the code

The list above is for common XML controls only, and more details can be found here

\

​