"Go" Android use XML shape to draw a circular button with a shadow effect

As we all know, in Android development, in order to optimize the display on various resolution devices, the same image material is often to provide mdpi, hdpi, xhdpi three kinds (formerly there is ldpi),

In particular, the material of the Button class, considering that normal, pressed, focused need at least 3x3=9 picture. While Ninepatch technology solves some of the size flexibility issues,

But most of the modification and adaptation is 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 drawing, easy to zoom;
* Fewer bytes (in general);
* Based on XML text, attribute values are easy to adjust;
* Drawable can be nested between components, reusable;
* XML is together with other source code of the project for easy version control.

Of course there are drawbacks:
* No visual editor, the editor is not intuitive;
* Subject to basic graphics and filling methods;
* Artists are difficult to get started.

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:
* Outer Circle
* Inner Shadow of Outer circle
* GAP
* Outer Shadow of Center circle
* 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" > <sol    ID 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"/> </shap E> </item> <Item Android:bottom= "3DP"Android:left= "3DP"Android:right= "3DP"Android:top= "3DP" > <shape android:shape= "oval" > <solid android:color= "#FFc3cfd9"/> </shap E> </item> <Item Android:bottom= "4DP"Android:left= "4DP"Android:right= "4DP"Android:top= "4DP" > <shape android:shape= "oval" > <solid android:color= "#FFcbd6df"/> </shap E> </item> <Item Android:bottom= "5DP"Android:left= "5DP"Android:right= "5DP"Android:top= "5DP" > <shape android:shape= "oval" > <solid android:color= "#FFd4dee5"/> </shap E> </item> <!--Gap---<Item Android:bottom= "6DP"Android:left= "6DP"Android:right= "6DP"Android:top= "6DP" > <shape android:shape= "oval" > <solid android:color= "#FFdae2e8"/> </sha pe> </item> <!--outer shadow of center circle---<Item Android:bottom= "10DP"Android:left= "10DP"Android:right= "10DP"Android:top= "10DP" > <shape android:shape= "oval" > <solid android:color= "#FFced5dc"/> </sha Pe> </item> <Item Android:bottom= "12DP"Android:left= "12DP"Android:right= "12DP"Android:top= "12DP" > <shape android:shape= "oval" > <solid android:color= "#FFbcc4c9"/> </sha Pe> </item> <Item Android:bottom= "13DP"Android:left= "13DP"Android:right= "13DP"Android:top= "13DP" > <shape android:shape= "oval" > <solid android:color= "#FFb4bbc0"/> </sha Pe> </item> <Item Android:bottom= "14DP"Android:left= "14DP"Android:right= "14DP"Android:top= "14DP" > <shape android:shape= "oval" > <solid android:color= "#FFacb3b8"/> </sha Pe> </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= "270"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:stat            E_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= "android:endcolor=" #FF91c0e8 "android:startcolor=" #FFa7d3fa "/> </shape> </item> </layer-list> </item> <!--pressed--<it Em android:state_enabled= "true" android:state_pressed= "true" > <layer-list> <item Android:dra wable= "@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= "android:endcolor=" #FF91c0e8 "android:startcolor=" #FFa7d3fa "/> </shape> </item> </layer-list> </item> <!--selected---& Lt;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                    oid: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> <!--......--></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.

The final note is that deciding whether a button should be rendered with drawable XML should take into account the following factors:
* Whether the app should support multi-resolution;
* Whether the app has the need of slimming;
* The pattern is simple enough;
* Patterns need to be freely scaled;
* Whether the design and development workflow allows developers to cross-border;
* Development manpower is more abundant than design manpower.

Otherwise, you should consider rendering as a picture.

Published in: http://evis.me/2013/05/android-dev-render-button-with-shadow-using-drawable-xml/Android Development: with Drawable XML Draw circular button with shadow effect

"Go" Android use XML shape to draw a circular button with a shadow effect