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.
Related
I have a button where the selector is like
<?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/bg_circle_selected"/>
<item android:drawable="#drawable/bg_circle_disabled" />
</selector>
So when I click the button, the background will show a red colored circle.
I need to disable this button based on condition, so the highlight should not be shown.
If I so it as setEnabled false it will work
But there is one more case where the disabled button should give auditory feedback.
So when I give setEnabled as false the other requirements will not work because touch is disabled.
Is there any method to disable the button other than setEnabled ()?
You can achieve the above by custom selector where the button appears to be disabled but the fact it is still enabled and trigger click actions.
you can use
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="#drawable/bg_circle_disabled />
<item android:state_pressed="true" android:drawable="#drawable/bg_circle_disabled"/>
<item android:state_enabled="false" android:drawable="#drawable/bg_circle_disabled" />
also don't forget to keep track to the button status (enable/disabled)
You might want to consider setting the attributes of the button programmatically from the java file, not XML.
Give the button an id from your XML layout file, then reference it from the java file. In that way, you will have more control over how it behaves.
For example, android:id="#+id/my_button" in the XML.
Then Button button = findViewById(R.id.my_button); in the onCreate method.
Afterward, give it whatever attributes you want.
I have an image button (star) which is used to mark something as favorite. I envision that when the user clicks on the star, the star will turn yellow. When they click on an already yellow start, it will go back to normal.
Transition from one color to the other would make a call to the server. I am doing that part already.
To change the color on click I did this.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/ic_action_fav" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/ic_action_fav" />
<item android:drawable="#drawable/ic_action_ic_action_star" />
</selector>
However, this changes the color only for the time being when the buttons is clicked. It doesn't remain changed on the click, in other words, it doesn't toggle.
How can I toggle the color of a button on each click?
Use android:state_selected in the state list along with View.setSelected(boolean selected) in your Java code.
I want to implement a toggle button in the form of a spinner (or slot machine). Basically it will consist of a large rectangle with the text OFF on it and when the user clicks on it, the words ON are animated onto the rectangle instead of off. Is there an easy way to do this or do you know of a widget which can do this please
WHAT I'VE DONE SO FAR
I have two images, each one of them represent the state that the toggle button can be in (i.e. ON and OFF). I then created a drawable XML file:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/on" android:state_checked="true" android:state_pressed="true"/>
<item android:drawable="#drawable/on" android:state_checked="true" android:state_focused="false"/>
<item android:drawable="#drawable/off" android:state_checked="false" android:state_pressed="true"/>
<item android:drawable="#drawable/off" android:state_checked="false" android:state_focused="false"/>
</selector>
Then I set the background of the ToggleButton to the XML drawable:
<ToggleButton
android:id="#+id/toggleButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btntoggle_selector"
android:textColor="#android:color/white"
android:textOff="OFF"
android:textOn="ON " />
if you want change the state of button programmatically, you need use the method setChecked on the toggle button
// Declare button
private ToggleButton myButton;
...
// Initialise button
myButton = (ToggleButton) findViewById(R.id.myButton);
...
// Sets button text as "OFF" and "ON"
myButton.setText("OFF");
myButton.setText("ON");
myButton.setChecked(false);
...
// Set an on click listener
myButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick() {
myButton.setChecked(true);
// CALL WHATEVER METHOD IS SUPPOSED TO BE CALLED WHEN BUTTON IS PRESSED
}
});
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>
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"));