How to change the style of an ImageButton programatically

Question

In this specific Activity, the user should select the destructor chosen of player 1 and player 2 in a rock paper scissors game.

I tried several approaches: the first one was to simply let the selected ImageButton clicked, but I do not found any solutions to achieve that.

The second was to set the choosen ImageButton unclickable and change its Image, like shown in the Image below. There, the "rock" was choosen for player 1 and nothing for player 2 yet. As you see, as soon I change the Images of an ImageButton, the borders disappear.

I change the status of the Buttons like this

public void onClickRock1(View v){
    choosenDestructor1 = 1;

    buttonRock1.setImageResource(R.drawable.rock_clicked);
    buttonRock1.setBackgroundColor(getResources().getColor(R.color.button_background_stay_clicked));
    buttonRock1.setClickable(false);

    buttonPaper1.setImageResource(R.drawable.paper);
    buttonPaper1.setBackgroundColor(getResources().getColor(R.color.button_background));
    buttonPaper1.setClickable(true);

    buttonScissors1.setImageResource(R.drawable.scissors);
    buttonScissors1.setBackgroundColor(getResources().getColor(R.color.button_background));
    buttonScissors1.setClickable(true);
    }

and for all other 5 Buttons the same in analogy to this method. Now, I consider that overriding the style of the ImageButton with a simple Image make the borders of my custom ImageButton style disappear, but this is only guessing.

I wrote a second custom ImageButton style with different background color and same border, but I can't figure out how to set that style on the ImageButton from code.

So my question is, which method would be the smartest to solve this (I think is the third one, but maybe there's another one) and if it is the third one, how to set the style of an ImageButton from code.

EDIT:

In analogy to rgrocha's answer, I edited my selector (which was already integrated in the custom_imagebutton.xml) like following

<?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/rock">
        <shape>
            <solid
                android:color="@color/button_background" />
            <stroke
                android:width="2dp"
                android:color="#FFF716" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />

        </shape>
    </item>
    <item android:state_selected="true" android:drawable="@drawable/rock_clicked">
        <shape>
            <solid
                android:color="@color/button_background_stay_clicked" />
            <stroke
                android:width="2dp"
                android:color="#FFF716" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/rock">        
        <shape>
            <solid
                android:color="@color/button_background" />
            <stroke
                android:width="1dp"
                android:color="#FFFFFF" />
            <corners
                android:radius="0dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>  
</selector>

and the onClickRock1 method like this

public void onClickRock1(View v){
    choosenDestructor1 = 1;
    buttonRock1.setSelected(true);
    buttonPaper1.setSelected(false);
    buttonScissors1.setSelected(false);
}

Solving it like this had the consequence to make a custom_imagebutton.xml for each ImageButton (rock, paper, scissors), and following problems are here: 1. The border is not visible (which matters, because I would like to have these borders) 2. The Image isn't scaled anymore (which doesn't matter, because I like it more like this)

So basically, it looks like the image I posted above, except the Images are a little bit bigger due to not scaling (in the layout.xml, I set scaleType="fitCenter")

Answer 1

According to selectors, here is quick working example. I hope it will help you some. Here works for buttons with specifed android:background source. This example shows how image is changing after clicking on it.

MainActivity.java :

public class MainActivity extends Activity {


@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
}

public void onClickButton1(View view) {

    //button is selected when false and vice versa
    view.setSelected(!view.isSelected());
    Log.d("xxx", view.isSelected() + "");
}

public void onClickButton2(View view) {

    //same here...
    view.setSelected(!view.isSelected());
    Log.d("xxx", view.isSelected() + "");
}

public void onClickButton3(View view) {

    //same here...
    view.setSelected(!view.isSelected());
    Log.d("xxx", view.isSelected() + "");
}
}

activity_main.xml :

<LinearLayout 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:orientation="vertical" >

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:background="@drawable/button_style"
        android:onClick="onClickButton1" />

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:background="@drawable/button_style"
        android:onClick="onClickButton2" />

    <ImageButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:background="@drawable/button_style"
        android:onClick="onClickButton3" />

</LinearLayout>

button_style.xml :

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

    <item android:drawable="@drawable/aselected" android:state_selected="true"/>
    <item android:drawable="@drawable/anone" />

</selector>

Images:

P.S To scale image you can use option:

<ImageView
android:scaleType="scaleXY" />

Answer 2

You can make a drawable selector for each state you want to apply and set it as the main mage or the background, you choose the better fits your needs.

In this selector you can make the borders, colors, images, whatever you want change.

A selector looks like:

<item android:state_pressed="true">
    <shape android:shape="rectangle" >

        <solid android:color="@color/button_highlight" />
        <corners android:radius="5dp" />

    </shape>
    </item>
<item android:state_selected="true">
    <shape android:shape="rectangle" >

        <solid android:color="@color/menu_bg_selected" />
        <corners android:radius="5dp" />

    </shape>
</item>

See http://developer.android.com/guide/topics/resources/drawable-resource.html for the full drawables doc. For your case see "State Selector".

You can even change the state of the button programatically with setSelected(), setEnabled((), etc.