A short talk about the wonderful world of Android's XML-based Drawables, given at a local Android meetup (the now retired AUG.mn).
Android Drawable XML Daniel Lew [email protected] h7p://daniel-‐codes.blogspot.com/
View Slide
Basic Graphic Assets • Flat colors (#ARGB, #AARRGGBB) • StaGc images (JPG, PNG) • 9-‐Patches (stretchable images)
Advantages • TransformaGon of drawables (states, animaGon) • Mix mulGple drawables into one drawable • Simple shapes support • Fewer asset demands • Reduces APK size
Short Demo
basics • Allows you to draw shapes – rectangles, ovals, lines or rings. xmlns:android="h7p://schemas.android.com/apk/res/android" android:shape="rectangle"> android:color="@android:color/black" />
with • Add borders with xmlns:android="h5p://schemas.android.com/apk/res/android" android:shape="rectangle"> android:color="@android:color/transparent"/> android:width="5dp" android:color="@android:color/black" android:dashWidth="10dp" android:dashGap="5dp" />
with • Rounded corners with xmlns:android="h5p://schemas.android.com/apk/res/android" android:shape="rectangle"> android:color="@android:color/black" /> android:radius="20dp" />
gradients • Can define a solid color with or a gradient with xmlns:android="h5p://schemas.android.com/apk/res/android" android:shape="rectangle"> android:startColor="#F00" android:endColor="#00F" />
• Lets you layer drawables on top of each other. xmlns:android="h5p://schemas.android.com/apk/res/android"> android:top="10dp” android:right="10dp” android:bo7om="10dp” android:le^="10dp"> android:shape="rectangle"> android:drawable="@drawable/shape_ring" android:top="20dp” android:right="20dp” android:bo7om="20dp” android:le^="20dp" />
• Define a set of drawables to be used when Views are in different states.
bu7on android:drawable="@drawable/btn_default_normal" /> android:drawable="@drawable/btn_default_normal_disable" /> android:drawable="@drawable/btn_default_pressed" /> android:drawable="@drawable/btn_default_selected" /> android:drawable="@drawable/btn_default_normal" /> android:drawable="@drawable/btn_default_normal_disable_focused" /> android:drawable="@drawable/btn_default_normal_disable" />
Level-‐based drawable XML • Drawables have levels • , , -‐ dynamic changes based on level android:radius="5dip" /> android:startColor="#ffffd300" android:centerColor="#ffK600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270" />
drawables • -‐ Explicit list of drawables for each level. stat_sys_ba5ery_0" /> stat_sys_ba5ery_5" /> […] stat_sys_ba5ery_95" /> stat_sys_ba5ery_100" />
AnimaGon Drawables • -‐ Cross-‐fades between two drawables. • -‐ Frame-‐by-‐frame animaGons.
and • Both let you adjust how the image is rendered • -‐ gives opGons for gravity or Gling. xmlns:android="h5p://schemas.android.com/apk/res/android" android:src="@android:drawable/star_on" android:GleMode="repeat" />
Odds and Ends • -‐ insets a drawable • -‐ a flat color • -‐ Unsupported
Notable • Compound drawables can mix and match any number of other drawable XML • All drawable XML also has a code representaGon – e.g., a gradient is a GradientDrawable
Resources • Official Android Docs: h7p://developer.android.com/guide/topics/resources/drawable-‐resource.html • My Drawable XML Docs: h7p://idunnolol.com/android/drawables.html • Sample app (source for demos): h7ps://github.com/dlew/android-‐drawable-‐xml-‐demo