Listview recycles and shows duplicated images

Question

I have created a listview which consists of list of tracks and play and pause image.When clicked on play image, pause image becomes visible and clicking on pause ,play image will become visible.Issue is that when i click on play and scrolls down i see another list item showing pause image and when i scroll down more another list item showing pause image.It is because list recylces an shows duplicated images.On studying the issue i think i need to place if-else statement in the getView method but i failed to implement correct code to resolve this issue..plzz help me with code in tht..

Answer 1

Create a new boolean variable in your SoundCloud class by the name isPlaying. Create getter setters for it, like you have done for other variables.

Get the object from SoundCloudList like this:

SoundCloug soundCloud = (SoundCloud) getItem(position);

This object can be used everywhere you are using soundcloudList.get(position), so that makes it easy to because we don't have to fetch object everytime.

Then in your getView use isPlaying to show play/pause button on every position like below:

if(soundCloud.isPlaying()){
    holder.img1.setVisibility(View.VISIBLE);
    holder.img2.setVisibility(View.GONE);
}
else{
    holder.img1.setVisibility(View.GONE);
    holder.img2.setVisibility(View.VISIBLE);
}

and then in your onClickListeners, set values for isPlaying like this:

holder.img1.setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(final View v) {

        soundCloud.setPlaying(true);
        try {
            notifyDataSetChanged();
            holder.img1.setVisibility(View.INVISIBLE);
            holder.img2.setVisibility(View.VISIBLE);
            mMediaPlayer = new MediaPlayer();
            mMediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
            mMediaPlayer.setDataSource("http://api.soundcloud.com/tracks/" + soundcloudList.get(position).getId() + "/stream?client_id=e13865f9debacb5f96375fdd96b7fa1b");
            mMediaPlayer.prepareAsync();
            mMediaPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener()
            {
                @Override
                public void onPrepared(MediaPlayer mp)
                {
                    mp.start();

                }
            });
            mMediaPlayer.setOnCompletionListener(
                    new MediaPlayer.OnCompletionListener()
                    {
                        @Override
                        public void onCompletion(MediaPlayer mp)
                        {
                            mMediaPlayer.release();
                            mMediaPlayer = null;
                            holder.img1.setVisibility(View.VISIBLE);
                        }
                    });
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

});

holder.img2.setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(final View v)
    {
        soundCloud.setPlaying(false);
        notifyDataSetChanged();
        holder.img1.setVisibility(View.VISIBLE);
        holder.img2.setVisibility(View.INVISIBLE);
        if(mMediaPlayer!=null)
        {
            mMediaPlayer.release();
            mMediaPlayer = null;
        }
    }

});

This code will not show the play/pause button duplicated on multiple rows, because now, we are checking the play/pause of audio for every row in getView and only then setting the buttons visibility.