Android Development: Draw a circular button with shadow effect with drawable XML

As we all know, in the Android development, in order to optimize the display effect on various resolution devices, the same image material is often to provide mdpi, hdpi, xhdpi three kinds (formerly also ldpi), especially the button class material, considering the normal, pressed, Focused need at least 3x3=9 picture. While the Ninepatch technology solves some of the size flexibility issues, most modifications and adaptations are made to make a batch of pictures again.

Depending on the needs of the interaction design, you can consider using the drawable XML Draw button, which has the following advantages:

• Vector rendering, easy to scale;

• Fewer bytes (in general);

• Based on XML text, attribute values are easily adjusted;

• Drawable can be nested between components, reusable;

• XML is combined with other source code of the project for easy version control.

Of course there are drawbacks:

• No visual editor, the editor is not intuitive;

• Limited by the basic graphics and filling methods;

• Artists are hard to get started with.

Take the development of this site "bubble face Butler" (see here) for example.

It is the timer of the bubble face butler, the middle circle (including the Hollow Shadow effect) By default is the icon that represents the state of the timer, which is converted to a Stop timing button during the timer run:

Here, the background of icon is drawn with drawable XML. In Android, drawable XML does not support shading, referencing many examples on the web, typically using an extra gradient or border to create a shadow. This is plotted in the form of a superimposed shape.

The color block of the logo in the green box can be divided into several parts from the outside to the inside:

1. Outer Circle

2. Inner Shadow of Outer circle

3. Gap

4. Outer Shadow of Center circle

5. Center Circle

Use <layer-list/>, starting from the bottom, draw the largest circle corresponding to the outer part, and then overlay the circle by layer, edge enlargement padding edge, circle fill color to correspond to corresponding color block. The Res/drawable/timer_center_bg.xml code is as follows:

<?xml version= "1.0"  encoding= "Utf-8"? ><layer-list xmlns:android= "http// Schemas.android.com/apk/res/android " >    <!-- outer circle -- >    <item>        <shape android : shape= "Oval"  >            <solid  Android:color= "#FFACB8C3"  />        </shape>     </item>     <!-- inner shadow of outer  Circle -->    <item        android: Bottom= "2DP"         android:left= "2DP"          android:right= "2DP"         android:top= "2DP" >         <shape android:shape= "Oval" >             <solid android:color= "#FFbdcad6"  />         </shape>    </item>    <item         android:bottom= "3DP"          android:left= "3DP"         android:right= "3DP"          android:top= "3DP" >        <shape  Android:shape= "Oval" >            <solid  android:color= "#FFc3cfd9"  />        </shape>     </item>    <item         android:bottom= "4DP"         android:left= "4DP"         android: right= "4DP"         android:top= "4DP" >         <shape android:shape= "Oval" >             <solid android:color= "#FFcbd6df"  />         </shape>    </item>    <item         android:bottom= "5DP"          android:left= "5DP"         android:right= "5DP"          android:top= "5DP" >        <shape  Android:shape= "Oval" >            <solid  android:color= "#FFd4dee5" &nbsP;/>        </shape>    </item>      <!-- gap -->    <item         android:bottom= "6DP"         android:left = "6DP"         android:right= "6DP"          android:top= "6DP" >        <shape android:shape= "Oval"  >            <solid android : color= "#FFdae2e8"  />        </shape>     </item>     <!-- outer shadow of center  Circle -->    <item        android: Bottom= "10DP" &NBSP;&NBSP;&Nbsp;     android:left= "10DP"         android: right= "10DP"         android:top= "10DP" >         <shape android:shape= "Oval" >             <solid android:color= "#FFced5dc"  />         </shape>    </item>    <item         android:bottom= "12DP"          android:left= "12DP"         android:right= "12DP"          android:top= "12DP" >         <shape android:shape= "Oval" >             <solid android:color= "#FFbcC4c9 " />        </shape>    </ Item>    <item        android:bottom= "13DP"         android:left= "13DP"          android:right= "13DP"         android:top= "13DP" >         <shape android:shape= "Oval" >             <solid android:color= "#FFb4bbc0"  />         </shape>    </item>     <item        android:bottom= "14DP"          android:left= "14DP"         android:right= "14DP "        android:top= "14DP" >        <shape android: Shape= "Oval" >            <solid android : color= "#FFacb3b8"  />        </shape>     </item>     <!-- center circle -->     <item        android:bottom= "15DP"          android:left= "15DP"         android:right= "15DP "        android:top=" 15DP ">         <shape android:shape= "Oval" >             <stroke android:width= "1DP"  android:color= "#FFFCFCFC"/>             <gradient             "    android:angle="                  android:endcolor= "#FFCFD7DD"                  android:startcolor= "#FFF0F5F9"  />         </shape>    </item> </layer-list>

As can be seen from the above code, just a simple circular overlay, you can draw a three-dimensional button.

Be aware that the top is just the background of the button. It is also mentioned at the beginning of the article that one of the features of drawable XML is reusability. Continue to see the Res/drawable/stop_timer_btn.xml code:

<?xml version= "1.0"  encoding= "Utf-8"? ><selector xmlns:android= "http// Schemas.android.com/apk/res/android ">     <!-- normal -->     <item android:state_enabled= "true"  android:state_focused= "false"  android: State_pressed= "false" >        <layer-list>             <item android:drawable= "@drawable/timer_center_ BG " />            <item android: Bottom= "15DP"  android:left= "15DP"  android:right= "15DP"  android:top= "15DP" >                 <shape android:shape= " Oval ">                     <stroke aNdroid:width= "1DP"  android:color= "#FFFCFCFC"  />                     <gradient android:angle= "270"  android:endcolor= "#FF91c0e8"  android:startcolor= "#FFa7d3fa"  />                 </shape>             </item>         </layer-list>    </item>     <!-- pressed  -->    <item android:state_enabled= "true"  android:state_pressed= " True ">        <layer-list>             <item android:drawable= "@drawable/timer_center_bg"  / >            <item android:bottom= "15DP"  android:left= "15DP"   android:right= "15DP"  android:top= "15DP" >                 <shape android:shape= "Oval" >                     <stroke  Android:width= "2DP"  android:color= "#FFf8f640"  />                     <gradient android:angle= "270"  android:endcolor= "#FF91c0e8"  android:startcolor= "#FFa7d3fa"  />                 </shape>             </item>         </layer-list>    </item>     <!-- selected -->     <item android:state_enabled= "true"  android:state_focused= "true"  android:state_pressed= "False" >        <layer-list>             <item android:drawable= "@drawable/timer_center_bg"  / >            <item android:bottom= "15DP " android:left=" 15DP " android:right=" 15DP " android:top=" 15DP ">                 <shape android:shape= "Oval" >                      <stroke android:width= "2DP"  android:color= "#FFf8f640"  />                     <gradient android:angle= "270"  android:endcolor= "#FF91c0e8"  android:startcolor= "#FFa7d3fa"  />                 </shape>             </item>         </layer-list>    </item>     <!--&nbsp, .....  --></selector>

The code above shows that each <item/> in,<selector/> is a <layer-list/>, and the @drawable/timer_center_bg as the background is superimposed round the foreground to distinguish the different states.

Android Development: Draw a circular button with shadow effect with drawable XML