Develop Reference

ImageButton Won't Change 'background' When Pressed and Released

I'm making an app that has buttons and when a button is clicked, it will play a sound. My problem is that I couldn't find a way to change mSoundButton's background when pressed and released. I'm using 'background' instead of 'src' so I can shrink the button without cutting from edges. I haven't added sounds yet because I want to solve this issue before starting to add sounds.
Here is my codes for the button in MainActivity.java (It works okay, but not in the way I wanted. It changes background when pressed but not released.)
final ImageButton mSoundBtn;
final boolean[] soundBtnClicked = {false};
mSoundBtn = findViewById(R.id.soundButton);
mSoundBtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if(soundBtnClicked[0])
mSoundBtn.setBackgroundResource(R.drawable.button_clicked);
else
mSoundBtn.setBackgroundResource(R.drawable.button_not_clicked);
soundBtnClicked[0] = !soundBtnClicked[0];
}
});
and here is my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/soundButton"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/button_not_clicked"
android:contentDescription="TODO" />
</LinearLayout>
UPDATE (PROBLEM SOLVED):
I wanted the mSoundBtn to change image when pressed, then change image again when it is released. I used the Handler class and the postDelayed() method to create a delay between two image changes. It doesn't actually wait for user to release the button but still solved my issue. Following is the solution I found:
public ImageButton mSoundBtn;
Handler h = new Handler();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSoundBtn = findViewById(R.id.soundButton);
mSoundBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mSoundBtn.setBackgroundResource(R.drawable.button_clicked);
h.postDelayed(new Runnable() {
public void run() {
mSoundBtn.setBackgroundResource(R.drawable.button_not_clicked);
}
}, 1000); // 1 Second
}
});
What happens is when the mSoundBtn is clicked, It changes image and waits for 1000 milliseconds (1 second), then changes back to previous image which creates some kind of animation when it is pressed so the user can understand when the button is pressed.
Thanks for anyone who have tried to help, thanks for reading. :)

You shouldn't define it as 'final'
Sample:
public class SampleActivity extends AppCompatActivity {
//Variables
public ImageButton mSoundBtn;
public boolean isSoundBtnSelected = false;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sample);
mSoundBtn = findViewById(R.id.soundButton);
mSoundBtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if(!isSoundBtnSelected)
mSoundBtn.setBackgroundResource(R.drawable.button_clicked);
else
mSoundBtn.setBackgroundResource(R.drawable.button_not_clicked);
isSoundBtnSelected = !isSoundBtnSelected;
}
});
}
}

If I understand you correctly, you want an action to be done after the user removed the finger from the button (meaning the press is done).
Try using OnTouchListener instead of OnClickListener:
imageButton.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event)
{
if(event.getAction() == MotionEvent.ACTION_UP)
{
// change background and other stuff...
return true;
}
return false;
}
});
If you only wanted to change the button's background when it pressed, you can use a selector drawable for that, like so:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/black" /> <!-- pressed -->
<item android:state_activated="true"
android:drawable="#color/colorAccent" /> <!-- focused -->
<item android:drawable="#color/colorPrimary" /> <!-- default -->
and just place it as the button's background.
Another option is to use a toggle button and OnChecked listener and change the background when the user checks (press) the button. If you want the background to be permanently changed after the first toggle you can implement this by changing the background only after the first toggle.

Change background color of the selected button basing on its state

I saw some posts with a similar question but they still differ from my problem here. I am making painting app in Android Studio and I want to indicate the option which user selected (whether it is move tool, pencil etc.) Here is the picture:
So, I want to change the background color of the button when it is selected and revert it back to default color when another button is selected.
I tried doing it with XML selector but later I saw that there is now "selected" attribute for a regular button. These are regular buttons. What is the easiest way to solve this?

Try this code (button_selector.xml, put it in your drawable folder)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/holo_blue_dark" android:state_selected="true"></item>
<item android:drawable="#android:color/holo_blue_dark" android:state_pressed="true"></item>
<item android:drawable="#android:color/darker_gray"></item>
</selector>
XML
<Button
android:background="#drawable/button_selector" />

You could use a class variable for keeping track of the currently selected button, and detect when a new button is selected. You would then perform the action of "selecting" the new button, and "deselecting" the previous one. Example:
private Button mSelectedButton;
private void setOnClickListeners() {
View.OnClickListener listener = new View.OnClickListener() {
#Override
public void onClick(View view) {
Button clickedButton = (Button) view;
//in case no button is selected, this will only "select" the clickedButton
if (mSelectedButton == null) mSelectedButton = clickedButton;
//previous selected button (should return to original state)
mSelectedButton.setBackgroundColor(R.color.original_state);
//your new selected button
clickedButton.setBackgroundColor(R.color.selected_state);
mSelectedButton = clickedButton; //save currently selected button
}
};
yourButton1.setOnClickListener(listener);
yourButton2.setOnClickListener(listener);
yourButton3.setOnClickListener(listener);
...
}

Cannot update imageButton from inside adapter

I want to change the image of the imagebutton when I click on it. This imageButton is part of layout out file which I have inflated in my custom adapter which feeds a kind of card view (Image with few buttons) to my main container layout.
I have added the imagebutton listener in my CustomAdapter.java:
cardHolder.mLikeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.i("Sushil", "clicked like button!!!!!");
updateHeartButton(true);
}
});
When I click on the button, my listener is called and from inside I call a method to update the image of button:
private void updateHeartButton(boolean animated) {
cardHolder.mLikeButton.setImageResource(R.drawable.ic_heart_red);
}
But the imagebutton does not get updated with new image. can someone help me.
Thank You

Since cardHolder changes (part of the adapter getView(), the last cardHolder will be called rather the one which was tapped.
Please change your code as follow and try again:
cardHolder.mLikeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Log.i("Sushil", "clicked like button!!!!!");
((ImageButton) view).setImageResource(R.drawable.ic_heart_red);
}
});

Try with setBackgroundResource(R.drawable.ic_heart_red);
Or in other way if you need to go back to the previous image when clicking back on it:
You can create a btn.xml file in the drawable folder :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- When selected, use grey -->
<item android:drawable="#drawable/like_selected"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/like_normal"/>
</selector>
In your xml for the button you set this xml to the background:
android:background="#drawable/btn"
In your updateHeartButton() method you can use:
cardHolder.mLikeButton.setSelected(true)

this work for me
cardHolder.mLikeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
cardHolder.mLikeButton.setImageResource(R.drawable.ic_heart_red);
}
});

Programmatically change button background drawable onClick

I am trying to toggle my button's background drawables, so that when the user clicks the button its background is changed and when the user clicks the button again its background returns to defaul. Here is my code:
public void Favorites(View V) {
Button star = (Button) findViewById(R.id.buttonStar);
if(star.getBackground().equals(R.drawable.btn_star_off)) {
star.setBackgroundResource(R.drawable.btn_star_on);
} else {
star.setBackgroundResource(R.drawable.btn_star_off);
}
}
I am pretty sure this is not how you use drawables with if statements. Can someone suggest a way to do it?

private boolean isButtonClicked = false; // You should add a boolean flag to record the button on/off state
protected void onCreate(Bundle savedInstanceState) {
......
Button star = (Button) findViewById(R.id.buttonStar);
star.setOnClickListener(new OnClickListener() { // Then you should add add click listener for your button.
#Override
public void onClick(View v) {
if (v.getId() == R.id.buttonStar) {
isButtonClicked = !isButtonClicked; // toggle the boolean flag
v.setBackgroundResource(isButtonClicked ? R.drawable.btn_star_on : R.drawable.btn_star_off);
}
}
});
}

You can create an xml in the drawable folder.
This xml (you choose the name...let's call it "bg_button_star.xml") could look just like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/btn_star_on" />
<item android:drawable="#drawable/btn_star_off" />
Then you have to assign this drawable file to the Button background property in the layout file.
android:background="#drawable/bg_button_star"
If you want to do this programmatically then you just have to do:
button.setBackgroundResource(R.drawable.bg_button_star);
When the user click the first time on the button, you set the Selected state to 'true'. The background changes accordingly. (viceversa for the 'false' Selected state).

You can do in your onClick() something like:
if(star.getTag()==R.drawable.btn_star_on){
star.setTag(R.drawable.btn_star_off);
star.setBackgroundResource(R.drawable.btn_star_off);
} else {
star.setTag(R.drawable.btn_star_on);
star.setBackgroundResource(R.drawable.btn_star_on);
}
Obviously it's better to the the tag before the if and else statement based on your informations. I don't know the rest of your code and how you check if this button has to be iniziatilized with the drawable resource btn_star_off or btn_star_on

You can try this.
public void Favorites(View V) {
Button star = (Button) findViewById(R.id.buttonStar);
if(star.getBackground().getConstantState().equals(getResources().getDrawable(R.drawable.btn_star_off).getConstantState()))
{
star.setBackground(R.drawable.btn_star_on);
} else {
star.setBackground(R.drawable.btn_star_off);
}
}
But make sure you are calling this method onClick() of the start button.
Other wise you have to do something like this.
Button star = (Button) findViewById(R.id.buttonStar);
star.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(v.getBackground().getConstantState().equals(getResources().getDrawable(R.drawable.btn_star_off).getConstantState()))
{
v.setBackground(R.drawable.btn_star_on);
} else {
v.setBackground(R.drawable.btn_star_off);
}
}
});

In this case, instead of using Button you should use ToggleButton.
There is a API Guide for it:
http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Dont do it like that. Use a selector resource instead http://www.compiletimeerror.com/2014/03/android-button-selector-tutorial-with.html

How to change the background of only one button when clicked?

I am generating my buttons programmatically.I want to change the background of the clicked button to menuitemsactivity_button_backgrnd.
The default background of the buttons is popup. I have done the following coding but the problem is that when I click the first button it changes its background, then when I click the second button the second button changes its background but the first button has the same menuitemsactivity_button_backgrnd background.
What I want to do is change the background of only the clicked button i.e at a time only one button has menuitemsactivity_button_backgrnd background.
I am posting my codes please guide me step by step:
final Button tv1 = new Button(this);
tv1.setId(i);
tv1.setText(value);
tv1.setTextSize(35);
tv1.setTextColor(Color.parseColor("#1569C7"));
tv1.setGravity(Gravity.CENTER);
tv1.setBackgroundDrawable(getResources().getDrawable(R.drawable.popup));
tv1.setLayoutParams(new LinearLayout.LayoutParams(300,90));
tv1.setOnClickListener(getOnClickDoSomething(tv1));
l1.addView(tv2);
private OnClickListener getOnClickDoSomething(final Button tv1) {
// TODO Auto-generated method stub
return new View.OnClickListener() {
public void onClick(View v) {
String text = tv1.getText().toString();
Log.e("text message", "" + text);
tv1.setBackgroundDrawable(getResources().getDrawable(R.drawable.menuitemsactivity_button_backgrnd));
Toast.makeText(MenuItemsActivity.this, "clicked"+v.getId()+","+tv1.getId(), 1000)
.show();
}
};
}
menuitemsactivity_button_backgrnd
<?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/blue_tab"
/>
</selector>

try doing something like this :
"<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/blue_tab"
/>
<item android:state_pressed="false"
android:drawable="#drawable/whatever_the_unselected_drawable_is"
/>
</selector>"