To change pause icon to play icon when the sound finish playing in two ImageButtons

Question

I am trying to change the pause icon to play icon when the sound finish playing. Here, there are two ImageButtons, the second ImageButton works fine changing the pause icon to play when the sound finish playing but the first button wouldn't change back to play icon when the sound finish playing.

public class MainActivity extends AppCompatActivity {


    ImageButton playBtn, playbutton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        playBtn = (ImageButton) findViewById(R.id.button1);
        playbutton= (ImageButton) findViewById(R.id.button2);

        final MediaPlayer sound = MediaPlayer.create(this,R.raw.evumm);

        playBtn.setBackgroundResource(R.drawable.playicon);
        playBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (sound.isPlaying()) {
                    sound.pause();
                    playBtn.setBackgroundResource(R.drawable.playicon);
                } else {

                    sound.start();
                    playBtn.setBackgroundResource(R.drawable.pauseicon);
                }
            }

        });

        sound.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                playBtn.setBackgroundResource(R.drawable.playicon);
            }
        });


        playbutton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if (sound.isPlaying()) {
                    sound.pause();
                    playbutton.setBackgroundResource(R.drawable.playicon);
                } else {

                    sound.start();
                    playbutton.setBackgroundResource(R.drawable.pauseicon);
                }

            }
        });

        sound.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                playbutton.setBackgroundResource(R.drawable.playicon);
            }
        });


    }
}

Here is the XML side

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="develop.kokoson.playorstopapp.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Play or Pause !"
        android:textSize="25dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="46dp"
        android:id="@+id/textView" />

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/playicon"
        android:layout_marginTop="81dp"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true" />

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/playicon"
        android:layout_centerVertical="true"
        android:layout_alignLeft="@+id/button1"
        android:layout_alignStart="@+id/button1" />

   </RelativeLayout>

Answer 1

Because one instance of MediaPlayer class only have one OnCompletionListener listener, so when you call

sound.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
    @Override
    public void onCompletion(MediaPlayer mp) {
        playBtn.setBackgroundResource(R.drawable.playicon);
    }
});

it will register a new listener which set icon of the playBtn button. After that you call

sound.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
    @Override
    public void onCompletion(MediaPlayer mp) {
        playbutton.setBackgroundResource(R.drawable.playicon);
    }
});

it will set a new listener which set icon of the playbutton button and override the first listener. That why the code in first listener do not executed and the icon of the playBtn do not changed as well.

You should use one listener and put all code you want to execute inside.

playBtn = (ImageButton) findViewById(R.id.button1);
playbutton= (ImageButton) findViewById(R.id.button2);

final MediaPlayer sound = MediaPlayer.create(this,R.raw.evumm);

playBtn.setBackgroundResource(R.drawable.playicon);

playBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        if (sound.isPlaying()) {
            sound.pause();
            playBtn.setBackgroundResource(R.drawable.playicon);
        } else {

            sound.start();
            playBtn.setBackgroundResource(R.drawable.pauseicon);
        }
    }

});

playbutton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        if (sound.isPlaying()) {
            sound.pause();
            playbutton.setBackgroundResource(R.drawable.playicon);
        } else {

            sound.start();
            playbutton.setBackgroundResource(R.drawable.pauseicon);
        }

    }
});

sound.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
    @Override
    public void onCompletion(MediaPlayer mp) {
        playBtn.setBackgroundResource(R.drawable.playicon);
        playbutton.setBackgroundResource(R.drawable.playicon);
    }
});