How to use Compound drawables in your android app design


A Small Design tip: Compound Drawables.

A question by our reader
I designed a layout which worked perfectly well, but I updated to ADT 16 and the new Lint tool gave me a warning 
"This tag and its children can be replaced by one and a compound drawable."

In this article we’ll have a look at what they are and see how we can use them to simplify some of our layouts.


custom drawable androidgreeve


A quick dig through the documentation for TextView lead me to the setCompoundDrawableWithIntrinsicBounds() method which is a method of attaching drawables to a TextView. We can replace the LinearLayout and its two children with a single TextView:

How to use it:
<TextView

        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text" 
        android:gravity="center"/>




Then in the onCreate() method of our activity we can assign a drawable to appear above the the text.

@Override
public void onCreate( Bundle savedInstanceState )
{
    super.onCreate( savedInstanceState );
    setContentView( R.layout.main );
    TextView tv = (TextView) findViewById( R.id.textView );
    tv.setCompoundDrawablesWithIntrinsicBounds( 0,
        R.drawable.ic_launcher, 0, 0 );
}

Our TextView has four properties that let us specify images to be set around it. These ones are: drawableLeft, drawableRight, drawableTop and drawableBottom. We also can use another one which defines the padding among the text and the images: drawablePadding.
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"              
              android:gravity="center"
              android:layout_gravity="center_horizontal"
              android:text="@string/my_contacts"
              android:drawableRight="@drawable/ic_action_add_group"
              android:drawablePadding="8dp"
        />


Cool! We removed a level of complexity and made our XML much simpler. It’s almost as easy to set these drawables from code:
textView.setCompoundDrawablesWithIntrinsicBounds
(0, 0, R.drawable.ic_action_add_group, 0);

textView.setCompoundDrawablePadding(...);
There are plenty of other use cases where compound drawables can simplify your layouts. If you use the Lint tool in ADT 16+ you will be alerted to instances where you can make this optimisation. It my only sound like a small improvement to create one Widget instead of three, but if we expand this to the layout that we created in Intelligent Layouts.
What Next ?
We would like to Demonstrate this by designing a small Login page for our app.

Creativity is just connecting things! Join Us to connect the dots!

Comments

Popular posts from this blog

Android Navigation Drawer sliding menu with fragments

Design a Beautiful Login Screen for your Android App

Android Actionbar Navigating with Swipeable Tabs