Android – Button with complex layout and selection behavior

Let’s conclude our series on customizing widgets with some tricks for complex views. We’ll do a clickable view with states all over it.

This is the way it should look:
Resulting button with states

And this is the xml code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/main_layout"
        android:layout_width="260dp"
        android:layout_height="60dp"
        android:background="@drawable/selector_btn_main" >

        <ImageView
            android:id="@+id/right_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="6dp"
            android:background="@drawable/selector_action_main"
            android:duplicateParentState="true" />

        <ImageView
            android:id="@+id/left_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="6dp"
            android:background="@drawable/ic_launcher"
            android:duplicateParentState="true" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/left_image"
            android:layout_toLeftOf="@id/right_image"
            android:text="Some great words"
            android:textStyle="bold"
            android:textColor="@color/selector_text_color"
            android:duplicateParentState="true" />
    </RelativeLayout>

</LinearLayout>

The main tricks you should learn:
- for bigger views with many other views inside you should put the click listener on the top view and use android:duplicateParentState=”true” on all the children needing state changes
- for backgrounds to change use selectors placed in the drawable folder like this one:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/decline_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/decline"/>
</selector>

- for text colors changing use color selectors placed in the color folder like this one:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#5577AA"
          android:state_pressed="true"/>
    <item android:color="#AA7755"/>
</selector>

- always take care of the relative placement of all the objects inside! make sure left, right, top and bottom boundaries are well under your control and won’t run amok when text changes! Order the elements in xml by starting with the extremities!

Leave a Reply

You must be logged in to post a comment.