Summary of shape usage in Android

Keywords: Android xml Programming Attribute

In Android programming, we often use Shape to define various shapes. First, we need to know what labels are under Shape and what they mean.
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:

<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> 
Here we show that dash parameter is set in the edge of the drawing, which makes the edge of the drawing become dotted line.
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.

Posted by 22Pixels on Fri, 31 May 2019 17:07:11 -0700