How to change the color of the color button when pressed in Android?

Question

I have some buttons which I set its background color as red, green and blue separately. When I press the button, click event is generated, but there is no change in gui for the user to know the button is pressed. Android button’s default background grayish color changes to orange and come back to grayish color after releasing the pressed state. How to implement this on colored button?

Answer 1

That is implemented via a StateListDrawable, represented by selector in XML. Reference: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList

Here is an example of a drawable that will be white by default, black when pressed:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@android:color/black" /> <!-- pressed -->
    <item android:drawable="@android:color/white" /> <!-- default -->
</selector>

Answer 2

As mentioned by K-Ballo you can use StateListDrawable to implement a view with various different graphics depending on state. In your case Button is the view where two states are Button pressed and button not pressed.

We need to create a buttonselector.xml file in the drawable folder

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

    <item android:drawable="@drawable/button_not_pressed" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/button_pressed" android:state_pressed="true"/>

</selector>

Create two separate xml files for the state of the button

button_not_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#FFFFFF"
      android:centerColor="#FFFFFF"
      android:endColor="#FFFFFF"
      android:angle="270" />
</shape>

button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#FF0000"
      android:centerColor="#FF0000"
      android:endColor="#FF0000"
      android:angle="270" />
</shape>

You will notice two html color codes #FF0000 & #FFFFFF which represent background color of the button according to the state.

In you main.xml where you set the style of your custom button

<Button
        android:id="@+id/customButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/buttonselector"
        android:text="test"
        android:textColor="#000000" />

In you activity class add the following two lines

Button customButton = (Button) findViewById(R.id.customButton);
customButton.setBackground(getResources().getDrawable(R.drawable.buttonselector));

Hope it helps

Answer 3

Try out this way:

<?xml version="1.0" encoding="utf-8"?>   
<selector xmlns:android="http://schemas.android.com/apk/res/android" >   
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#1E669B" />
            <stroke
                android:width="2dp"
                android:color="#1B5E91" />
            <corners
                android:radius="6dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />            
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#1E669B"
                android:endColor="#1E669B"
                android:angle="270" />
            <stroke
                android:width="4dp"
                android:color="#1B5E91" />
            <corners
                android:radius="7dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>