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.
Related
I have a like button in my RecyclerView,what I want is when user hit the like button for the 1st time,the button background color will change to red color,and when the same user hit the like button,the button will change back to default color which is white.
I checked for few SO question,but still havent get what I want.So far my solution is like below,doesnt produce any error but when clicked the button,nothing happen.
likeButton =(Button) view.findViewById(R.id.likeButton);
//here for user like the post
holder.likeButton.setOnClickListener(new View.OnClickListener() {
boolean clicked = true;
#Override
public void onClick(View v) {
if(!clicked){
holder.likeButton.setBackgroundColor(Color.RED);
clicked = true;
//here i will update the database
}else{
holder.likeButton.setBackgroundColor(Color.WHITE);
clicked = false;
//here i will update the database
}
}
});
I checked this SO answer too,so I modified my code as below,but still nothing happens when the button is clicked.
holder.likeButton.setBackgroundColor(Color.WHITE);
holder.likeButton.setOnClickListener(new View.OnClickListener() {
ValueAnimator buttonColorAnim = null;
#Override
public void onClick(View v) {
if(buttonColorAnim != null){
buttonColorAnim.reverse();
buttonColorAnim = null;
//here i will update the database
}else{
final Button button = (Button) v;//here is the line I dont undestand
buttonColorAnim = ValueAnimator.ofObject(new ArgbEvaluator(), Color.RED, Color.WHITE);
buttonColorAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animator) {
// set the background color
button.setBackgroundColor((Integer) animator.getAnimatedValue());
}
//here i will update the database
});
buttonColorAnim.start();
}
}
});
Somebody please point out what I'm missing,what I want is change button color programmatically when being click for 1st time,and change back to default for next click(which avoid multiple like from a same user).
You should create a selector file. Create a file in drawable folder like color_change.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/button_pressed"/> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#color/button_focused"/> <!-- focused -->
<item android:drawable="#color/button_default"/> <!-- default -->
</selector>
and declare it in the button like this
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/color_change"
android:text="Click Me" />
Hi try to this hope this can help you...
In XML
<Button
android:id="#+id/btnClick"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:text="click"/>
In Adapter Class
boolean click = true;
holder.btnClick.setTag(position);
holder.btnClick.setId(position);
holder.btnClick.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (click) {
holder.btnClick.setBackgroundColor(Color.RED);
click = false;
} else {
holder.btnClick.setBackgroundColor(Color.WHITE);
click = true;
}
notifyDataSetChanged();
}
});
Instead of clicked or not condition, make and use condition from you update database for like and dislike operation. So, In click-listener get data previously user like or not then change background and update database as per new click.
Try adding this line to your row.xml file in the main layout :
android:descendantFocusability="blocksDescendants"
Have a look at this. Here, I changed the button text color on click. First time, all buttons appear white and after click it toggles between red and white as you expected. --
//LikeAdapter.java
public class LikeAdapter extends RecyclerView.Adapter<LikeAdapter.LikeHolder> {
public LikeAdapter() {
}
#Override
public LikeAdapter.LikeHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.like_item,parent,false);
return new LikeHolder(view);
}
#Override
public void onBindViewHolder(final LikeAdapter.LikeHolder holder, int position) {
holder.red_btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (holder.red_btn.getVisibility() == View.VISIBLE) {
holder.red_btn.setVisibility(View.GONE);
holder.white_btn.setVisibility(View.VISIBLE);
} else {
holder.red_btn.setVisibility(View.VISIBLE);
holder.white_btn.setVisibility(View.GONE);
}
}
});
holder.white_btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (holder.white_btn.getVisibility() == View.VISIBLE) {
holder.red_btn.setVisibility(View.VISIBLE);
holder.white_btn.setVisibility(View.GONE);
} else {
holder.red_btn.setVisibility(View.GONE);
holder.white_btn.setVisibility(View.VISIBLE);
}
}
});
}
#Override
public int getItemCount() {
return 5;
}
public class LikeHolder extends RecyclerView.ViewHolder {
private Button red_btn, white_btn;
public LikeHolder(View itemView) {
super(itemView);
red_btn = (Button) itemView.findViewById(R.id.red_btn);
white_btn = (Button) itemView.findViewById(R.id.white_btn);
red_btn.setBackgroundColor(Color.RED);
white_btn.setBackgroundColor(Color.WHITE);
}
}
}
//like_item.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="wrap_content"
android:layout_margin="5dp">
<Button
android:id="#+id/red_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Red"/>
<Button
android:id="#+id/white_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="White"/>
</RelativeLayout>
I'm wrinting an application for andorid and I have difficulties with change buttons background. I have a simple button and when the users click on the button change the background. I'd like to make the button to turn back into the original form when the user click on it again.
I have no idea how to do that, if anyone has one please response!
use the android.R.drawable.btn_default in order to change the button to default color
#Howlett Logan : You can try this way,
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextButton"
/>
Then
public boolean flag=true; // Global
Button buttonTest;
#Override
protected void onCreate(Bundle savedInstanceState)
{
buttonTest=(Button)findViewById (R.id.button);
buttonTest.setBackgroundResource(R.drawable.your_drawble);
buttonTest.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
if (flag)
{
buttonTest.setBackgroundResource(R.drawable.your_image_1);
}else
{
buttonTest.setBackgroundResource(R.drawable.your_image_2);
}
flag=!flag;
}
});
}
On Android, a Button changes its background color when pressed.
How can we tell a button that it is pressed (without firing the onClick-action), so that it changes color, without the user pressing it? (for example triggered by a swipe action)
It should change color briefly, and then change back.
There a quite a few questions concerning keeping the pressed state. This question asks, how to set the button_pressed state briefly, as if clicked, but without a real click.
Button.setPressed(true) has not given a color change, neither has Button.performClick().
First, create the effect when button is hovered, clicked etc in XML. Put this style in your drawable.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed button -->
<item android:drawable="#color/dark_green"
android:state_focused="true"
android:state_pressed="false"
/>
<item android:drawable="#color/dark_green"
android:state_focused="true"
android:state_pressed="true"
/>
<item android:drawable="#color/dark_green"
android:state_focused="false"
android:state_pressed="true"/>
<!-- Normal button -->
<item android:drawable="#color/green"
android:state_focused="false"
android:state_pressed="false"/>
</selector>
Then in your XML, initiates the style by using:
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/the_style_in_drawable"
android:text="click"/>
By putting the style in your XML, you don't have to initiate the style when button on click. Android will detect the button state and do the work for you. Just remember to put the state in selector.
To change a button state without anything else is done via
btn1.getBackground().setState(new int[]{android.R.attr.state_pressed});
To reset to ordinary, you use
btn1.getBackground().setState(new int[]{android.R.attr.state_enabled});
A Button's states can be found out via
btn1.getBackground().getState();
which resturns an int[]. You can compare its values to android.R.attr to find out which states are set.
Example Code
private void simulateClick(final ImageButton button,
final long clickDuration) {
button.getBackground().setState(new int[]{android.R.attr.state_pressed});
new Thread(new Runnable() {
public void run() {
try {
Thread.sleep(clickDuration);
} catch ( InterruptedException e ) {
// not bad if interrupted: sleeps a bit faster (can happen?)
}
Count.this.runOnUiThread(new Runnable() {
public void run() {
button.getBackground().setState(new int[]{android.R.attr.state_enabled});
}
});
}}).start();
}
Explanation
Each View has a Drawable as background image. A Drawable can be of different subtypes, here it is a StateListDrawable, as defined per XML. (See #Lynx's answer as an example of a XML defined drawable).
This Drawable can be told which state it is to assume (via setState) and does the layout itself.
AsyncTask for button color change illusion:
private class ChangeButtonColorMomentarily extends AsyncTask<String, Void, String> {
#Override
protected void onPreExecute() {
btn1.setBackgroundDrawable(new ColorDrawable(Color.rgb(50, 50, 50)));//pressed state
}
#Override
protected String doInBackground(String... params) {
try {
Thread.sleep(1000);
} catch (Exception e) {
}
return "";
}
#Override
protected void onPostExecute(String result) {
btn1.setBackgroundDrawable(new ColorDrawable(Color.rgb(200, 200, 200)));//normal state
}
}
Also take note that if your API 16 above use setBackground() instead.
For changing the color of button at that time, you can use setOnTouchListener as:
button.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN){
//Button Pressed
}
if(event.getAction() == MotionEvent.ACTION_UP){
//finger was lifted
}
return false;
}
});
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
I created a button in the layout . In the Drawable folder I created a XML file named btn01_state. The btn01_state.xml is assigned to the button i created through "android:background=#drawable/btn01_state"
Now, the button has a default image img1.when i click on the button, the image1 changes to img2, and once i release the clicked mouse button, the image2 again changed to img1 again.
what i want to do is,to change the image of the button with evey click.
for an example, initially
btn01 has img01
if btn01 is pressed==> set img of btn01 to img02 and keep img02 till the btn01 is pressed again. Now, btn01 has img02 on it.
When btn01 is pressed, set img01 to btn01.
I hope this clarified more what i want to do.
btn_selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/android_blue"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_launcher"
android:state_focused="true" />
<item android:drawable="#drawable/ic_launcher" />
main.xml
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/btn01"
android:background="#drawable/btn01_state"/>
You can do it easily within the code.
boolean isPressed = false;
button.setOnClickListener(buttonListener);
OnClickListener buttonListener = new OnClickListener() {
#Override
public void onClick(View v) {
if(isPressed)
button.setBackgroundResource(R.drawable.icon1);
else
button.setBackgroundResource(R.drawable.icon2);
isPressed = !isPressed;
}
};
Simple way
btn.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
btn.setBackgroundDrawable(getResources().getDrawable(R.drawable.locationbutton_on));
}
});
Make it in code perhaps. Put a listener on the button and when the button is clicked the background is changed.