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

<?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>

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

<?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>

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

<?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>

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.

<?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>

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.

<?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>

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search