Changing the layout for different states of an android button

A button in android can have one or multiple states:

  • android:state_pressed
  • android:state_focused
  • android:state_hovered
  • android:state_selected
  • android:state_checkable
  • android:state_checked
  • android:state_enabled
  • android:state_activated

The layout of a button’s state cannot be changed from within the layout file itself.
A drawable resource file needs to be used to set a layout for the different states.

This resource file should contain a selector with a collection of item elements.
Every item element can target one (or multiple) state(s) of a button by adding the state and its value as attribute. See example below.
It is not necessary to implement all states. An item element with no state attribute is used as default state. See last item element in example below.
This resource file is stored in the Drawable folder of the Resources content (F.E. /Resources/Drawable/button.xml).
Other resources can be referenced and used. In the example below, two custom defined colors are used (@color/custom_theme_button_primary and @color/custom_theme_button_secondary).
When a combination of states are defined on an item element, all states need to be active!

The following example adds three layout states to a button; pressed, disabled and a default state.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" android:color="@color/custom_theme_button_primary">
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <solid
          android:color="@color/custom_theme_button_secondary" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
  <item android:state_enabled="false" android:color="@color/custom_theme_button_primary">
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <solid
          android:color="@color/custom_theme_button_secondary" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
  <item android:color="@color/custom_theme_button_secondary">
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <solid
          android:color="@color/custom_theme_button_primary" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
</selector>

Setting the color attribute on the item element sets the text color. Setting the color attribute in the solid element within the shape element will set the background color for this shape.
Note: The margin cannot be set in a drawable resource file.

In the layout file, the button needs to contain a reference to the drawable resource file:

<Button
    style="@style/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10.0dp"
    android:layout_marginRight="10.0dp" 
/>

This example requires a drawable resource with the name “button”. Simply create a xml file with the name “button.xml” in Resources/Drawable and add your selector and items.

The following two tabs change content below.
I'm a software developer from Utrecht. Interested in DDD, continuous delivery, new technologies & frameworks.

Latest posts by Vincent Keizer (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *