Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android change button icon when clicked

I want to know if there is a way of changing a button image when it is clicked. Initially the button has a pause icon. When it is clicked I want the play icon to be displayed. Each time the button is clicked the icon should vary between play and pause.

Is there any way of doing this?

XML Layout file:

<ImageButton
    android:id="@+id/play"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="109dp"
    android:src="@drawable/play_btn"
    android:background="@null" />

play_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pause" android:state_selected="true" />
    <item android:drawable="@drawable/play" />
</selector>
like image 737
user1909680 Avatar asked Feb 24 '13 14:02

user1909680


4 Answers

Android's Toggle Button with a custom selector sounds like what you want.

You might use something like this for your button's selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/play_icon" android:state_checked="true" />
    <item android:drawable="@drawable/pause_icon" android:state_checked="false" />
</selector>
like image 69
Justin Avatar answered Nov 09 '22 11:11

Justin


Button mPlayButton;

boolean isPlay = false;
@Override
public void onCreate(){
    mPlayButton = (Button) findViewById(R.id.play);
    // Default button, if need set it in xml via background="@drawable/default"
    mPlayButton.setBackgroundResource(R.drawable.default);
    mPlayButton.setOnClickListener(mTogglePlayButton);
}

View.OnClickListener mTogglePlayButton = new View.OnClickListener(){

    @Override
    public void onClick(View v){
        // change your button background

        if(isPlay){ 
            v.setBackgroundResource(R.drawable.default);
        }else{
            v.setBackgroundResource(R.drawable.playing);
        }

        isPlay = !isPlay; // reverse
    }

};
like image 22
Ozik Abdullaev Avatar answered Nov 09 '22 09:11

Ozik Abdullaev


Let's add an onClick field to your button's xml in your layout (requires API level 4 and onwards)

<ImageButton
    android:id="@+id/play"
    ...
    android:onClick="buttonPressed" />

Your icons are drawables pause and play.

Keep track of which icon your button has.

private boolean paused = true;

public void buttonPressed(View view) {

    ImageButton button = (ImageButton) view;
    int icon;

    if (paused) {
        paused = false;
        icon = R.drawable.pause;
    else {
        paused = true;
        icon = R.drawable.play;
    }

    button.setImageDrawable(
        ContextCompat.getDrawable(getApplicationContext(), icon));


}
like image 7
Anti Earth Avatar answered Nov 09 '22 10:11

Anti Earth


Checkout this documentation http://developer.android.com/reference/android/widget/ImageButton.html specifically the inherited methods from android.widget.imageview. You'll want to use either setImageBitmap or setImageDrawable. Update it as part of your on click code.

like image 1
Mike Avatar answered Nov 09 '22 09:11

Mike