CODEWITHSUNDEEP
androidandroid-layoutandroid-button
user7455496
user7455496

Reputation:

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?

Upvotes: 2

Views: 2737

Answers (4)

alkathirikhalid
alkathirikhalid

Reputation: 897

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.

Upvotes: 4

Alvin SIU
Alvin SIU

Reputation: 1042

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.

Upvotes: 0

Android Geek
Android Geek

Reputation: 9225

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);

Upvotes: 0

OneCricketeer
OneCricketeer

Reputation: 191710

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".

Upvotes: 0

Related Questions