CODEWITHSUNDEEP
androidxmlbuttonandroid-xmlandroid-drawable
theGuy05
theGuy05

Reputation: 437

Change colour of buttons when one is selected; Android development

So I am making an app with 3 buttons. Currently I have the following .xml file that makes them have rounded off edges and be the colour red. Now I want to to make them so if one is selected then that button turns green while the other two remain, or turn back to red. How could I go about doing this? Do I have to make another .xml file? Here is my drawable .xml file for the buttons:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!--red colour.-->
    <solid android:color="#FF0000"/> 
    <corners
         android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
    <stroke android:width="2px" android:color="#000000"/>
 </shape>

Upvotes: 0

Views: 6186

Answers (1)

Blo
Blo

Reputation: 11978

Use a selector as follows: 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- green state -->
    <item 
        android:drawable="@drawable/button_selected" 
        android:state_selected="true"></item>
    <!-- green state -->
    <item 
        android:drawable="@drawable/button_pressed" 
        android:state_pressed="true"></item>
    <!-- red state -->
    <item 
        android:drawable="@drawable/button_disabled"></item>

</selector>

Then, you should call this selector like: 

<Button
     ...
     android:background="@drawable/my_selector" />

And create each drawable.xml (as your example for the red button) for every state: button_selected, button_pressed and button_disabled.

You can also remain the state by using onTouchListener like: 

button.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // change the color
                return true;
            case MotionEvent.ACTION_UP:
                // intitial color
                return true;
            default:
                return false;
        }
    }
});

However, it's better to use a Selector and a background, this use less resource.

UPDATE:

You can use a setBackgroundResource method to remain and change the background state of clicked button as follows: 

// 1st clicklistener method
button.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        v.setBackgroundResource(R.drawable.green_drawable);
        button2.setBackgroundResource(R.drawable.selector_drawable);
    }
}

// 2nd clicklistener method
button2.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        v.setBackgroundResource(R.drawable.green_drawable);
        button1.setBackgroundResource(R.drawable.selector_drawable);
    }
}

Not tested but it should work.

Upvotes: 4

Related Questions