Change toggle button image onclick - android

I know it has already been asked and answered here and here. I have tried both, but none of them is working right for me.
I have a favorite button, If it is pressed I set the item to favorite in database and replace the image of the toggle button, and vice versa. Here is how I am doing it:
<ToggleButton
android:id="#+id/btnFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn=""
android:textOff=""
android:layout_marginRight="5dp"
android:background="#drawable/favorite_btn_style" />
Here is my favorite_btn_style.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/favourit_blue_btn" android:state_checked="true"/>
<!-- pressed -->
<item android:drawable="#drawable/favourit_dark_btn"/>
<!-- default/unchecked -->
</selector>
In oncreate I check if the item is already set to favorite, then setchecked to true:
if (movieObj.getIsFav().intValue() == 1) {
btnFav.setChecked(true);
}
Here is my onclicklistener on the button:
btnFav.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
if (!btnFav.isChecked()) {
btnFav.setChecked(true);
// set favorite
dbHelper.updateMovieFavorite(movieObj.getId().intValue(), 1);
} else {
btnFav.setChecked(false);
// set favorite
dbHelper.updateMovieFavorite(movieObj.getId().intValue(), 0);
}
}
});
Function gets called, and executed fine, but no change in image.. What I am doing wrong?

Delete both btnFav.setChecked(true) and btnFav.setChecked(false) in your OnClick method. It is a togglebutton which toggles the setChecked on its own by every click and you reset it to the old value. So in your case it always has the same value(the start value).
I would suggest you rather use setOnCheckedChangeListener instead of onClickListener.

Create a file button_toggle.xml in your res/drawable folder
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="false"
android:drawable="#drawable/ic_slide_switch_off" />
<item
android:state_checked="true"
android:drawable="#drawable/ic_slide_switch_on" />
</selector>

Try to use android:button="#drawable/favorite_btn_style" and android:background="#android:color/transparent" combination. To customize the checkbox, radio and toggle button you should use android:button instead of android:background.

Related

Change toggle button drawable at activity start in Android Xamarin

I made two toggle buttons and i edited the toggle button style to change the toggle image on state change like the above code
this my toggle button
<ToggleButton
android:id="#+id/speaker"
android:layout_width="25dip"
android:layout_height="25dip"
android:layout_margin="10dp"
android:textOn=""
android:textOff=""
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_centerVertical="true"
android:background="#drawable/speaker_btn" />
and this drawable/speeker_btn.xml
<?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/speaker_on"
android:state_checked="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/speaker_off"
android:state_checked="false"/>
</selector>
And im using static boolean variable to store the toggle status global to use it again in another activity
so what i want is to change the button drawable on activity created without clicking the toggle
i tried this code
speakerToggle = view.FindViewById<ToggleButton>(Resource.Id.speaker);
if(speaker_btn_checked == true ){
speakerToggle.checked = true;
}
But its look like recheck the toggle button again i just need to change the drawable
I solve this problem by replacing ToggleButton by Button, and change the button image programmatically from the activity class, and created static variable for the button status so my code became like this
Button speakerToggle = view.FindViewById<Button>(Resource.Id.speaker);
speakerToggle.Click += delegate{
if (am.SpeakerphoneOn == false)
{
speakerToggle.SetBackgroundResource(Resource.Drawable.speaker_on);
}else{
speakerToggle.SetBackgroundResource(Resource.Drawable.speaker_off);
}
};
And inside the onCreate method i created this
if (am.SpeakerphoneOn == true){
speakerToggle.SetBackgroundResource(Resource.Drawable.speaker_on);
}else{
speakerToggle.SetBackgroundResource(Resource.Drawable.speaker_off);
}
And it works very well !!

Button states not working as expected when pressed

I have a "Like" button that the user can click to "like" something (similar to Facebook).
I need to make it so that after the user has liked something, the text color of the button changes to red.
Here's is my code now:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/red" />
<item
android:color="#color/normal" />
</selector>
The button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Like"
android:textColor="#drawable/like_button" />
The problem is that the text color doesn't stay red when I lift my finger, it only changes to red when I hold my finger over the button.
What should I change?
According to your code you are specifically using:
android:state_pressed="true"
This basically means it is only red when pressed hence the results you are getting
Source: https://developer.android.com/guide/topics/resources/color-list-resource.html
You need to include in your Activity (Java)
Button likeButton = (Button) findViewById(R.id.like_button);
likeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if(likeButton.isSelected())
likeButton.setSelected(false);
else
likeButton.setSelected(true);
}
});
You need to include in your Layout (XML)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/red" android:state_selected="true"/>
<item android:color="#color/red" android:state_pressed="true"/>
<item android:color="#color/normal" android:state_pressed="false"/>
<item android:color="#color/normal"/>
</selector>
<Button
android:id="#+id/like_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/like"
android:layout_gravity="center"
android:text="#string/like" />
Cheers.
In order to "save" the "state" of a "like", you have to update the data model / database behind the button with some boolean indicator that says "yes, this is now liked/unliked".
Your XML selector only says "change color when this is pressed, otherwise revert", it has no logic to say "this is now liked".
You are just stating one state for button that is state pressed.That's why,It is getting red only when you pressed on it.If you want to make the text in Red after pressing the button,Then you should add selector in drawable something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color=""#color/red" android:state_selected="true"/>
<item android:color=""#color/red" android:state_pressed="true"/>
<item android:color="#color/normal" android:state_pressed="false"/>
<item android:color="#color/normal"/>
</selector>
In your activity,put this code:
final Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if(button.isSelected())
button.setSelected(false);
else
button.setSelected(true);
}
});
This will select the button and will change the text color to red and if the button is already selected,It will change it to normal.If you just want to keep button selected on click,You can simply add this line in OnClickListener.
button.setSelected(true);
The state_pressed is a mechanism to let you know whether the button is really pressed or not. This is similar to the case of giving a little sound when you really click a key in the virtual keyboard.
Since I do not know the whole story of your situation, I guess that maybe a MVC pattern is suitable for your case.
For example, in the back end, there is a data storing liked= true or false.
In the view, there are two buttons : likeButton and unlikeButton. When liked==false, likeButton is visible and unlikeButton is invisible. When liked==true, likebutton is invisible and unlikeButton is visible.
The OnClick listener for the likeButton and unlikeButton is to set the data liked= true or false.
Both likeButton and unlikeButton can have state_pressed to change the button color to red to let user know that the button is already pressed and being pressed. But, anyway, once the button is released after pressed, the onClick listener should start doing the jobs and finally the already pressed button should become invisible.
Hope that this example can clarify.

Recording button states

I'm creating recording button and I need these states, but I don't know how to implement them with the xml. I've tried activated, selected, and pressed states but these are not getting the job done. I have all the drawables created already but the states are screwing me up.
States I need the recording button to do:
State 1. default Image of button (initial state)
State 2. Set drawable of button when the button is in the process of being pressed down
State 3. Set drawable of button after it has been pressed (after pressed down) and we are now in recording mode
State 4. After the button is clicked again return back to initial state
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/record_button_default_state" />
<item
android:state_selected="true"
android:drawable="#drawable/record_button_recording" />
<item
android:state_selected="false"
android:drawable="#drawable/record_button_default_state" />
<item
android:state_pressed="true"
android:drawable="#drawable/record_button_pressed_state" />
OnClickListener()
case R.id.record_button:
if (mr.getState() == ExtAudioRecorder.State.READY){
mr.start();
record_button.setSelected(true);
}
else if(mr.getState() == ExtAudioRecorder.State.RECORDING){
mr.stop();
mr.release();
record_button.setSelected(false);
setMediaPlayerPathAndPrepare();
}
break;
You need to be using the ToggleButton control.
Here's the selector code you'll need to call up:
(I've labelled the drawables to the states they correspond to, as per your post).
*tb_selector.xml*
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/state4"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/state2"
android:state_pressed="true" />
<item
android:drawable="#drawable/state3"
android:state_checked="true" />
<item
android:drawable="#drawable/state1" />
</selector>
Reason for the default drawable being declared last: Android applies the first item in the state list that matches the current state of the object. So, if the first item in the list contains none of the state attributes above, then it is applied every time, which is why your default value should always be last (as demonstrated in the following example).
Sample ToggleButton XML:
<ToggleButton
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Vibrate on"
android:textOff="Vibrate off"
android:onClick="onToggleClicked"
android:background="#drawable/tb_selector" />
Sample ToggleButton click event:
public void onToggleClicked(View view) {
// Is the toggle on?
boolean on = ((ToggleButton) view).isChecked();
if (on) {
// Enable vibrate
} else {
// Disable vibrate
}
}
The OS handles the selected state of a button based on whether it is being pressed/clicked or not. You can't set that in code. If you want to change the button while something is happening, you must do it in code:
case R.id.record_button:
if (mr.getState() == ExtAudioRecorder.State.READY){
mr.start();
record_button.setImageResource(R.drawable.record_button_recording);
}
else if(mr.getState() == ExtAudioRecorder.State.RECORDING){
mr.stop();
mr.release();
record_button.setImageResource(R.drawable.record_button_default_state);
setMediaPlayerPathAndPrepare();
}

Set button background image change onClick without edit xml, cause button background always clicked issue in some circumstances

I have tried to change the onClick image of a button using this code in the listener
public void onClick(View v) {
if(v==ButtonName)
ButtonName.setImageResource(R.drawable.clicked_button_image);
//action code
}
The image of the button in this way changes correctly, however if someone uses the Back button of Android device, the button appears with clicked image (because clearly is showed the last instance of the previous activity)
if I try to use the code:
public void onClick(View v) {
if(v==ButtonName)
ButtonName.setImageResource(R.drawable.clicked_button_image);
ButtonName.setImageResource(R.drawable.unclicked_button_image);
//action code
}
The images of the button doesn't changes.
How could I solve this problem? (without edit the xml).
What about changing back when you click on the back button?
#Override
public boolean onRestore()
{
if(unclickedImageDisplayed)
{
ButtonName.setImageResource(R.drawable.unclicked_button_image);
}
}
If you look at the documentation, and the activity lifecycle, you can see that the method on Restore is called when you are coming back to an activity.
Maybe by having a private variable that you change when you change the background of your button, and by checking this boolean value for example, you can change the background of your button to give it his initial state, programmatically.
To achieve this effect try this:
you must create a new xml in your drawable folder: (I called button_action)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/clicked_button_image" android:state_pressed="true"/>
<item android:drawable="#drawable/unclicked_button_image"/>
</selector>
in your layout:
<Button
android:id="#+id/infobtncontact"
style="#style/ButtonNormal"
android:layout_marginTop="10dp"
android:background="#drawable/button_action"
android:src="#drawable/unclicked_button_image" />
maybe have to restart eclipse to recognize the changes.
Excuse me for my horrible english!
Unless you explain why you want to use this method, you should really use a custom Button like this
<?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/clicked_button_image" /> <!-- pressed -->
<item android:state_focused="true" android:drawable="#drawable/focus_button_image" /> <!-- focused -->
<item android:drawable="#drawable/unclicked_button_image"/> <!-- default -->
</selector>

Android...Change Button Colour when Clicked, but I have many buttons?

I want to change the button's colour when I clicked.
But when I clicked the another second button, the first button must be coloured the with the last colour.
I mean that, when I clicked whic button, it must be coloured with blue and the other buttons must be non-colour. here is the code;
if(view == button1)
{
button1.setBackgroundColor(Color.BLUE);
}
else if(view == button2){
button2.setBackgroundColor(Color.BLUE);
}
else if(view == button3){
button3.setBackgroundColor(Color.BLUE);
}
else if(view == button4){
button4.setBackgroundColor(Color.BLUE);
}
//init all buttons background : GRAY
public void initButtons(){
button1.setBackGroundColor(Color.GRAY);
button2.setBackGroundColor(Color.GRAY);
button3.setBackGroundColor(Color.GRAY);
button4.setBackGroundColor(Color.GRAY);
}
and in the implementation of the OnClick : do this :
#Override
public void onClick(View v ) {
initButtons();
((Button)v).setBackGroundColor(Color.BLUE);
}
Hope it helps :)
you can use drawable selector to define the button states in xml then by default the clicked button will be changed to the color you want only when it is in click state.
Create a new xml file in your drawable folder for example blue_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/yourColor"
android:state_pressed="true" android:state_enabled="true" />
<item android:drawable="#color/yourOtherColor" android:state_enabled="true" />
</selector>
then use R.drawable.blue_btn as a background for your buttons
refer to: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
Keep a reference to the previously modified Button. When you have a new click, set that previously referenced Button back to un-colored, set the current button to Blue then set that reference to the current button.
When you need to change the background color of the button when it is pressed, then u have to follow these ,
//create an xml file, like layout_a.xml file in drawable
<?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/btn_pressed" /> <!--btn pressed -->
<item android:drawable="#drawable/btn_normal" /> <!-- Normal condition -->
</selector>
//Now this file should be in a drawable folder and use this single line code in button code to get all the properties of this xml file .
<Button
android:id="#+id/street_btn"
android:layout_width="wrap_content"
android:background="#drawable/layout_a" > <!-- your required code -->
</Button>
change this line:
button2.setBackgroundColor(Color.BLUE);
and try this:
button2.setBackgroundColor(Color.parseColor("#5AC8E2"));

Categories

Resources