CODEWITHSUNDEEP
androidimagebuttonandroid-button
user1909680
user1909680

Reputation: 95

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>

Upvotes: 5

Views: 40897

Answers (5)

amir hossein kazemi
amir hossein kazemi

Reputation: 94

You can use MaterialButton instead of Button and then just use setIcon method for your button:

import com.google.android.material.button.MaterialButton;

MaterialButton mPlayButton;

boolean isPlay = false;
@Override
public void onCreate(){
    mPlayButton = (MaterialButton) findViewById(R.id.play);
}

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

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

        if(isPlay){ 
            v.setIcon(ContextCompat.getDrawable(this, R.drawable.your_drawable_resource));
        }else{
            v.setIcon(ContextCompat.getDrawable(this, R.drawable.your_drawable_resource2));
        }

        isPlay = !isPlay; // reverse
    }

};

Upvotes: 0

Anti Earth
Anti Earth

Reputation: 4801

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


}

Upvotes: 7

Ozik Abdullaev
Ozik Abdullaev

Reputation: 1026

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
    }

};

Upvotes: 8

Justin
Justin

Reputation: 151

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>

Upvotes: 15

Mike
Mike

Reputation: 107

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.

Upvotes: 1

Related Questions