Change Button Shape on selected State?

Question

I have an Android Button:

<Button
       android:layout_width="wrap_content"
       android:layout_height="44dp"
       android:background="@drawable/action_button" />

action_button.xml is:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <padding
        android:left="25dp"
        android:right="25dp"/>

    <gradient
        android:angle="0"
        android:endColor="@color/whiteColor"
        android:startColor="@color/whiteColor"/>

    <corners android:radius="@dimen/borderRadius"/>

    <stroke
        android:width="2px"
        android:color="@color/actionColor"/>
</shape>

How can I change the shape, when the button is pressed?

score 2 · Answer 1 · answered Sep 15 '15 at 09:35

Hi please use below selector and change according to your need

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
   <!-- <item android:state_enabled="false"
          android:drawable="@drawable/cyan_strip" />
    <item android:state_pressed="true"
          android:drawable="@drawable/cyan_strip" />
    <item android:state_pressed="false" android:state_focused="true"
          android:drawable="@drawable/cyan_strip" />
    <item android:drawable="@drawable/black_strip" /> -->

    <item android:state_enabled="false">
        <shape>
        <solid
            android:color="#4ec9d9" />
        <stroke
            android:width="1dp"
            android:color="#FFFFFF" />
        <padding
            android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp" />
    </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
        <solid
            android:color="#4ec9d9" />
        <stroke
            android:width="1dp"
            android:color="#FFFFFF" />
        <padding
            android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp" />
    </shape>
    </item>

    <item android:state_pressed="false" android:state_focused="true">
        <shape>
        <solid
            android:color="#4ec9d9" />
        <stroke
            android:width="1dp"
            android:color="#FFFFFF" />
        <padding
            android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp" />
    </shape>
    </item>

    <item android:state_selected="true">
        <shape>
        <solid
            android:color="#4ec9d9" />
        <stroke
            android:width="1dp"
            android:color="#FFFFFF" />
        <padding
            android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp" />
    </shape>
    </item>

    <item >
       <shape>
        <solid
            android:color="#000000" />
        <stroke
            android:width="1dp"
            android:color="#FFFFFF" />
        <padding
            android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp" />
    </shape> 
    </item>

</selector>

score 1 · Accepted Answer · answered Sep 15 '15 at 09:34

you need a selector

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

put it in a xml file, under drawable/, and use it as background for your Button . Android will take care of the rest

score 0 · Answer 3 · edited May 23 '17 at 12:14

see : Link

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#302226"
        android:endColor="#6D7B8D"
        android:angle="45"/>
    <padding android:left="6dp"
        android:top="6dp"
        android:right="6dp"
        android:bottom="6dp" />
    <corners android:radius="30dp" />

</shape>

or see :

 <ImageButton
                 android:id="@+id/imageButton1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/shape_oval" />

Shape_oval is an image which we can take from google serching or drawing ourself in paint or photoshop.

Change Button Shape on selected State?

3 Answers3