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>
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>
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
}
};
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));
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With