Android drawable selector and shape examples

The following are examples of using the shape and selector for creating a drawable xml file in the drawable folder to style a button view. So the button will changes its appearance when it is pressed.

A button view in a layout for an activity, activity_main.xml
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<Button
android:id="@+id/btn_open"
android:layout_width="200dp"
android:layout_height="40dp"
android:background="@drawable/btn_open_selector"
android:textColor="@drawable/btn_open_color_selector"
android:text="Open"/>
</RelativeLayout>
[/code]

drawable/btn_open.xml for the button style. This makes a round corner button with border equals to 1 dp, transparent background, and the color of the border to be #2ebadc
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#2ebadc" />
<corners android:radius= "50dp" />
</shape>
[/code]

drawable/btn_open_pressed.xml for the button style when the button is pressed. This makes a round corner button with background filled with the color #2ebadc
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="50dp" />
<stroke android:width="5px" android:color="#2ebadc" />
<solid android:color="#2ebadc"/>
</shape>
[/code]

drawable/btn_open_selector.xml, when this is set to the background for the button, the button will show the style from btn_open_pressed when the button is pressed, btn_open otherwise.
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!– When selected –>
<item android:state_pressed="true" android:drawable="@drawable/btn_open_pressed"/>
<item android:state_activated="true" android:drawable="@drawable/btn_open_pressed"/>
<item android:state_selected="true" android:drawable="@drawable/btn_open_pressed"/>
<item android:state_focused="true" android:drawable="@drawable/btn_open_pressed"/>

<!– When not selected –>
<item android:drawable="@drawable/btn_open"/>
</selector>
[/code]

drawable/btn_open_color_selector.xml, when this is set to the textColor of the button, the text will become white when pressed, #2ebadc when no interactions.
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#ffffff" />
<item android:state_activated="true" android:color="#ffffff" />
<item android:state_selected="true" android:color="#ffffff" />
<item android:state_focused="true" android:color="#ffffff" />

<item android:color="#2ebadc" />
</selector>
[/code]

Complete example in Github