How to change ImageButton style programmatically

Question

In this particular Activity user must select the destructor selected by player 1 and player 2 in the game with stone paper scissors.

I tried several approaches: the first one was just to click on the selected ImageButton , but I did not find solutions to achieve this.

The second was to set the selected ImageButton unclickable and change its Image , as shown in the image below. There, “rock” was chosen for player 1 and nothing for player 2 yet. As you can see, as soon as I change Image in ImageButton , the borders disappear.

I am changing the status of Button as follows

 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 the other 5 Button the same thing is analogous to this method. Now I believe that overriding the ImageButton style with a simple Image will cause the borders of my custom ImageButton style ImageButton disappear, but that's just a fortune-telling.

I wrote a second ImageButton custom style with a different background color and the same border, but I cannot figure out how to set this style in ImageButton from code.

So, my question is which method will be the smartest to solve this problem (I think this is the third, but possibly another), and if this is the third, then how to set the ImageButton style from the code.

EDIT:

Similar to rgrocha's answer, I edited my selector (which was already integrated into custom_imagebutton.xml ) as shown below

 <?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 onClickRock1 method like this

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

A solution of this kind was to make custom_imagebutton.xml for each ImageButton (stone, paper, scissors), and the following problems are here: 1. The border is not visible (which is important because I would like to have these borders) 2. The Image no longer scales ( which doesn’t matter because I like it more)

Basically, it looks like the image I posted above, except that Image little bigger due to not scaling (in layout.xml , I set scaleType="fitCenter" )

Answer 1

You can make a portable selector for each state that you want to apply, and set it as the main mage or background, you choose which best suits your needs.

In this selector you can create borders, colors, images, everything that you want to change.

The selector looks like this:

 <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 dables document. For your case, see "State Selector".

You can even change the state of a button programmatically using setSelected (), setEnabled ((), etc.

Answer 2

According to the selectors, here is an example of quick work. Hope this helps you. This works for buttons with a specified source android:background . This example shows how the image changes 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:

PS To scale the image you can use the option:

 <ImageView android:scaleType="scaleXY" />