Android: Change button color when clicked

Question

Basically, I'm trying to create a button that when clicked (note: NOT pressed) will change color from color1 to color2. When clicked again, it will change back from color2 to color1.

I have searched like crazy and the only information I managed to extract was how to change color when the button is pressed, that is, when the user holds down the button (this code will be written below). However, I want the color to change when the user clicks (presses and releases) the button, and then change back once the user clicks again.

This file is in res/drawable

<!-- Changes color when user hols down button -->
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true">
    <shape>
        <!-- change to color2 -->
    </shape>
</item>

<item>
    <shape>
        <!-- change to color1 -->
    </shape>
</item>
</selector>

Answer 1

boolean tmp = false;
button.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
         tmp = !tmp;
         v.setBackgroundColor(tmp ? Color.RED : Color.BLUE);
    }
});

EDIT: apparently you want to have a more complex example

First create a drawable XML in and name it pink_button.xml and place the following code inside

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

    <solid android:color="#FF5EF1"/>
    <corners android:radius="15dp"/>
    <stroke
        android:width="1dp"
        android:color="#303030"/>

</shape>

Now make a blue_button.xml

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

    <solid android:color="#008DFF"/>
    <corners android:radius="15dp"/>
    <stroke
        android:width="1dp"
        android:color="#303030"/>

</shape>

Now make some demo activity layout, I used button_demo_activity.xml

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

    <Button
        android:id="@+id/btnDemo"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:layout_centerInParent="true"
        android:layout_marginTop="100dp"
        android:background="@drawable/pink_button"
        android:gravity="center"
        android:text="PINK"
        android:textColor="@android:color/white"
        android:textSize="15sp"/>

</RelativeLayout>

And finally the activity, name it whatever you want I used ButtonDemoActivity

public class ButtonDemoActivity extends Activity {


    private Button btnDemo;
    private boolean isPink = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.button_demo_activity);

        btnDemo = (Button) findViewById(R.id.btnDemo);
        btnDemo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                isPink = !isPink;
                int resId = isPink ? R.drawable.pink_button : R.drawable.blue_button;
                btnDemo.setBackgroundResource(resId);
                btnDemo.setText(isPink ? "PINK" : "BLUE");
            }
        });
    }
}

And this is what the final look of the buttons will be in each state

Answer 2

You are on the right track. Add other states like:

<item android:state_selected="true">
  <shape>
    <!-- change to color2 -->
  </shape>
</item>

then in your onClick method add some toggling:

v.setSelected( !v.isSelected() );