Android Drawable XML

A short talk about the wonderful world of Android's XML-based Drawables, given at a local Android meetup (the now retired AUG.mn).

Transcript

1. Android  Drawable  XML  
   Daniel  Lew  
   dan@mobiata.com  
   h7p://daniel-­‐codes.blogspot.com/  
    
   

   View Slide

2. Basic  Graphic  Assets  
   •  Flat  colors  (#ARGB,  #AARRGGBB)  
   •  StaGc  images  (JPG,  PNG)  
   •  9-­‐Patches  (stretchable  images)  
   

   View Slide

3. Advantages  
   •  TransformaGon  of  drawables  (states,  
   animaGon)  
   •  Mix  mulGple  drawables  into  one  drawable  
   •  Simple  shapes  support  
   •  Fewer  asset  demands  
   •  Reduces  APK  size  
   

   View Slide

4. Short  Demo  
   

   View Slide

5.  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"  />  
    
   

   View Slide

6.  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"  />  
    
   

   View Slide

7.  with    
   •  Rounded  corners  with    
    
    xmlns:android="h5p://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
        android:color="@android:color/black"  />  
        android:radius="20dp"  />  
    
   

   View Slide

8.  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"  />  
    
   

   View Slide

9.  
   •  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"  />  
    
   

   View Slide

10.  
    •  Define  a  set  of  drawables  to  be  used  when  
    Views  are  in  different  states.  
    

    View Slide

11.  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"  />  
     
    

    View Slide

12. 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"  />  
       
     
    

    View Slide

13.  drawables  
    •   -­‐  Explicit  list  of  drawables  for  each  
    level.  
     
           stat_sys_ba5ery_0"  />  
           stat_sys_ba5ery_5"  />  
           […]  
           stat_sys_ba5ery_95"  />  
           stat_sys_ba5ery_100"  />  
     
    

    View Slide

14. AnimaGon  Drawables  
    •   -­‐  Cross-­‐fades  between  two  
    drawables.  
    •   -­‐  Frame-­‐by-­‐frame  animaGons.  
    

    View Slide

15.  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"  />    
    

    View Slide

16. Odds  and  Ends  
    •   -­‐  insets  a  drawable  
    •   -­‐  a  flat  color  
    •   -­‐  Unsupported  
    

    View Slide

17. 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  
    

    View Slide

18. 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  
    

    View Slide