$30 off During Our Annual Pro Sale. View Details »

Android Drawable XML

Daniel Lew
October 04, 2011

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

Daniel Lew

October 04, 2011
Tweet

More Decks by Daniel Lew

Other Decks in Programming

Transcript

  1. Android  Drawable  XML  
    Daniel  Lew  
    [email protected]  
    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