SoFunction
Updated on 2025-03-11

Android UI effects drawing chapter (I)

Recently, I have been preparing to organize a set of articles on UI effects, which is a summary of this period, mainly talking about UI effect design modules in Android development. It is initially divided into several sections:

  • Android XML drawing (Shape, Layer, Selector)
  • Android Canvas drawing (canvas, point, porterDuffXfermode, shader)
  • Android animation details
  • Android custom controls

Today I will be an appetizer. Let’s talk about the simplest XML drawing. I believe everyone is familiar with this. Here I will make a small document for you. When you forget the parameter configuration, it will be easy to check.
1. Shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:andro 
// Here you can set the shape of the shape without setting the default to rectangleandroid:shape=["rectangle"|"oval"|"line"|"ring"|]

>

  <!-- Round corners shape="rectangle"Yes to use Default is1dp -->
  <corners
    android:radius="xdp"
    android:topLeftRadius="xdp"
    android:topRightRadius="xdp"
    android:bottomLeftRadius="xdp"
    android:bottomRightRadius="xdp"/>

  <!-- Gradient -->
  <gradient
    android:startColor="color"
    android:centerColor="color"
    android:endColor="color"
    android:useLevel="boolean"
    android:angle="integer"//The value of angle must be a multiple of 45 (including 0), only valid in type="linear"    android:type=["linear"|"radial"|"sweep"]
    android:centerX="integer"
    android:centerY="integer"
    android:gradientRadius="integer"/>

  <!-- interval -->
  <padding
    android:left="xdp"
    android:top="xdp"
    android:right="xdp"
    android:bottom="xdp"/>

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

  <!-- filling -->
  <solid
    android:color="color"/><!-- filling的颜色 -->

  <!-- Stroke -->
  <stroke
    android:width="dp"
    android:color="color"
    android:dashWidth="dp" //Dashed line width    android:dashGap="dp"/> //Dashed line interval width
</shape>

2. Layer
This friend who has used photoshop should be very easy to understand and is used to achieve layer effects

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:andro> 
  <!-- item1 -->
  <item> 
   <bitmap android:src="drawable" 
    android:gravity="center" /> 
  </item> 
  <!-- item2 -->
  <item> 
   <bitmap android:src="drawable" 
    android:gravity="center" /> 
  </item> 
  <!-- item3 -->
  <item 
   <bitmap android:src="drawable" 
    android:gravity="center" /> 
  </item> 
</layer-list>

3. Selector
In this commonly used word Button, CheckBox, Radio and other controls, the control effect is switched through different events

&lt;?xml version="1.0" encoding="utf-8" ?&gt;   
&lt;selector xmlns:Andro&gt;  
&lt;!-- Background image at default--&gt;  
&lt;item Android:drawable="drawable" /&gt;   
&lt;!-- Background picture without focus --&gt;  
&lt;item 
  Android:state_window_focused="false"   
  android:drawable="drawable" 
  /&gt;   
&lt;!-- Background image when you get focus and click in non-touch mode --&gt;  
&lt;item 
  Android:state_focused="true" 
  android:state_pressed="true"  
  android:drawable= "drawable" 
  /&gt;  
&lt;!-- Background image when clicking in touch mode--&gt;  
&lt;item 
  Android:state_focused="false" 
  Android:state_pressed="true"  
  Android:drawable="drawable" 
  /&gt;  
&lt;!--The picture background when selected--&gt;  
&lt;item 
  Android:state_selected="true" 
  android:drawable="drawable" 
  /&gt;   
&lt;!--Image background when gaining focus--&gt;  
&lt;item 
  Android:state_focused="true" 
  Android:drawable="drawable" 
  /&gt;   
&lt;/selector&gt;

The above is part of the UI effect design module in Android development, and will continue to be updated later. I hope it will be helpful to everyone's learning.