眾所周知，在Android開發里，為了優化在各種分辨率設備上的顯示效果，同一份圖片素材往往要提供mdpi、hdpi、xhdpi三種（以前還有ldpi），
尤其是按鈕類的素材，考慮到normal、pressed、focused更是需要至少3×3=9張圖片。NinePatch技術雖然可以解決一部分尺寸靈活性的問題，
但大部分修改和適配還是要再次制作一批圖片的。
根據交互設計的需要，可以考慮用Drawable的XML繪制按鈕，好處有：
* 矢量繪制，易於縮放；
* 字節數更少（一般而言）；
* 基於XML文本，屬性值易於調整；
* Drawable組件間可嵌套，可重用；
* XML與項目其他源代碼在一起，便於版本控制。
當然也有缺點：
* 沒有可視化的編輯器，編輯不夠直觀；
* 受限於基本的圖形和填充方式；
* 美工人員很難上手。
以本站開發的習作《泡面管家》（參見這里）為例。
下圖是泡面管家的計時器，中間的圓形（包含鏤空陰影效果）默認是表示計時器狀態的icon，在計時器運行期間會變換為停止計時的按鈕：
這里icon的背景是用Drawable XML繪制的。在Android中，Drawable XML並不支持陰影，參考了網上諸多例子，一般都是以額外繪制的漸變或者邊框來實現陰影。
這里是用疊加shape的方式來繪制的。
上圖中綠色方框中的標識的色塊，從外到內可以划分成幾個部分：
* Outer circle
* Inner shadow of outer circle
* Gap
* Outer shadow of center circle
* Center circle
使用<layer-list/>，從最底層開始，畫對應最外部分的、最大的圓形，然后逐層的、邊擴大padding邊疊加圓形，圓形的填充顏色要對應到相應的色塊。
res/drawable/timer_center_bg.xml代碼如下：
<?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" />
</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"
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="270"
android:endColor="#FFCFD7DD"
android:startColor="#FFF0F5F9" />
</shape>
</item>
</layer-list>
從以上代碼中可以看出，只是簡單的圓形的疊加，就可以繪制出具有立體感的按鈕。要注意上邊只是按鈕的背景。文章開頭也講過，Drawable XML的特征之一就是可復用。
繼續看res/drawable/stop_timer_btn.xml的代碼：
<?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>
<!-- ...... -->
</selector>
上述代碼以看出，<selector/>中每個<item/>都是一個<layer-list/>，將@drawable/timer_center_bg作為背景在前景疊加圓形以區分不同狀態。
最后要說明的是，決定一個按鈕應該是否用Drawable XML渲染，應考慮以下幾個因素：
* App是否要支持多分辨率；
* App是否有瘦身的需要；
* 圖案是否足夠簡單；
* 圖案需要自由縮放；
* 設計開發工作流程是否容許開發人員跨界；
* 開發人力相對於設計人力更充足。
否則，應該考慮以圖片方式渲染。