Listview items not locked while scrolling

Question

I have a big challenge. I discovered that after coding the CustomMusicAdapter, the listview items in the music_row does not maintain its sequence while i scroll up or down. If i scroll up item in row 5 will be displaced and moved to the top. It was in ascending order and when i tried scrolling the items got scattered. Hence making the row items disorganized and boring for readers because of disarray of listview items. Please i need your help.thanks

This is the MainActivity

 public class MainActivity extends AppCompatActivity { private ArrayList<Music> arrayList; private CustomMusicAdapter adapter; private ListView songList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); songList = (ListView) findViewById(R.id.songList); arrayList = new ArrayList<>(); arrayList.add(new Music("001 Music", "Salutatio Actus paenitentialis", R.raw.adoremus_snctus)); arrayList.add(new Music("002 Music", "Collecta, Liturgia Verbi (Prima & Secunda)", R.raw.adoremusl_collecta_liturgia_verbi)); arrayList.add(new Music("003 Music", "Evangelium (Alleluia)", R.raw.evangelium_alleluia)); arrayList.add(new Music("004 Music", "Evangelium (Responses)", R.raw.evangelium_responses)); arrayList.add(new Music("005 Music", "Oratio universalis, Oratio super oblata", R.raw.oratio_universalis)); arrayList.add(new Music("006 Music", "Prex Eucharistica (two versions)", R.raw.prex_eucharistica)); arrayList.add(new Music("007 Music", "Praefatio (Sanctus)", R.raw.praefatio_sanctus)); arrayList.add(new Music("008 Music", "Acclamans (Mortem tuam)", R.raw.acclamans_mortem_tuam)); arrayList.add(new Music("009 Music", "Elevans, Ritus Communionis (Pater Noster)", R.raw.pater_noster)); arrayList.add(new Music("010 Music", "Ritus Pacis", R.raw.ritus_pacis)); arrayList.add(new Music("011 Music", "Oratio post communionem, Benedicto, Dimissio", R.raw.dimissio)); arrayList.add(new Music("012 Music", "Penitential Act, Kyrie-Christe-Kyrie", R.raw.aud_3)); arrayList.add(new Music("013 Music", "", R.raw.aud_3)); arrayList.add(new Music("014 Music", "", R.raw.aud_3)); arrayList.add(new Music("015 Music", "", R.raw.aud_3)); arrayList.add(new Music("016 Music", "", R.raw.aud_3)); adapter = new CustomMusicAdapter(this, R.layout.custom_music_row, arrayList); songList.setAdapter(adapter); } }

This is the CustomMusicAdapter

 public class CustomMusicAdapter extends BaseAdapter { private Context context; private int layout; private ArrayList<Music> myArraylist; private MediaPlayer mediaPlayer; private boolean flag=true; public CustomMusicAdapter(Context context, int layout, ArrayList<Music> myArraylist) { this.context = context; this.layout = layout; this.myArraylist = myArraylist; } @Override public int getCount() { return myArraylist.size(); } @Override public Object getItem(int i) { return myArraylist.get(i); } @Override public long getItemId(int i) { return 0; } public class ViewHolder{ TextView textView_SongName, textView_artist; ImageView imageView_play, imageView_stop; private View convertview; LayoutInflater layoutInflater=(LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE); public ViewHolder(){ convertview=layoutInflater.inflate(layout, null); textView_SongName = convertview.findViewById(R.id.textName); textView_artist = convertview.findViewById(R.id.txtSinger); imageView_play = convertview.findViewById(R.id.ivPlay); imageView_stop = convertview.findViewById(R.id.ivStop); } } @Override public View getView(int i, View convertView, ViewGroup parent) { final ViewHolder viewHolder = new ViewHolder(); if (convertView==null){ convertView = viewHolder.convertview; }else { } final Music music = myArraylist.get(i); viewHolder.textView_SongName.setText(music.getName()); viewHolder.textView_artist.setText(music.getSinger()); //Play Music Setup viewHolder.imageView_play.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (flag){ mediaPlayer=MediaPlayer.create(context,music.getSong()); flag=false; } if (mediaPlayer.isPlaying()){ mediaPlayer.pause(); mediaPlayer.start(); viewHolder.imageView_play.setImageResource(R.drawable.ic_play); }else { mediaPlayer.start(); viewHolder. imageView_play.setImageResource(R.drawable.ic_pause); } mediaPlayer.start(); } }); // stop player viewHolder.imageView_stop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (!flag){ mediaPlayer.stop(); mediaPlayer.release(); flag=true; } viewHolder.imageView_play.setImageResource(R.drawable.ic_play); } }); return convertView; } }

This is What i have been doing so far with the new direction to convert my code to ListView

This is the custom_music_row

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto" app:cardCornerRadius="7dp" app:cardElevation="4dp" app:cardUseCompatPadding="true"> <RelativeLayout android:padding="16dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/ivMusic" android:layout_width="30dp" android:layout_height="40dp" android:layout_alignParentTop="true" android:src="@drawable/ic_lmusic" /> <TextView android:id="@+id/textName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginStart="48dp" android:text="Song List" android:textColor="#16c15b" android:textSize="22sp" android:layout_marginLeft="30dp" /> <TextView android:id="@+id/txtSinger" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignStart="@+id/textName" android:layout_below="@+id/textName" android:text="Singer" android:textColor="#645506" android:textSize="18sp" android:layout_alignLeft="@+id/textName" /> <ImageView android:id="@+id/ivPlay" android:layout_width="30dp" android:layout_height="30dp" android:layout_toLeftOf="@id/ivStop" android:layout_marginRight="20dp" android:src="@drawable/ic_play"/> <ImageView android:id="@+id/ivStop" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/stop_outline" android:layout_alignParentRight="true"/> </RelativeLayout> </android.support.v7.widget.CardView>

MyViewHolder Class

 import android.support.annotation.NonNull; import android.support.v7.widget.RecyclerView; import android.view.View; import android.widget.ImageView; import android.widget.TextView; class MyViewHolder extends RecyclerView.ViewHolder { ImageView mImageaplay, mImageStop; TextView mTitle, mDes; public MyViewHolder(@NonNull View itemView) { super(itemView); this.mImageaplay = itemView.findViewById(R.id.ivPlay); this.mImageStop = itemView.findViewById(R.id.ivStop); this.mTitle = itemView.findViewById(R.id.textName); this.mDes = itemView.findViewById(R.id.txtSinger); } }

The CustomMusicAdapter i tried to effect change but failed!

 public class CustomMusicAdapter extends RecyclerView.Adapter<MyViewHolder>{ private Context context; private int layout; private ArrayList<Music> myArraylist; private MediaPlayer mediaPlayer; private boolean flag=true; public CustomMusicAdapter(Context context, int layout, ArrayList<Music> myArraylist, MediaPlayer mediaPlayer, boolean flag) { this.context = context; this.layout = layout; this.myArraylist = myArraylist; this.mediaPlayer = mediaPlayer; this.flag = flag; } @NonNull @Override public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { final View itemView = LayoutInflater.from(parent.getContext()) .inflate(R.layout.custom_music_row, parent, false); return new MyViewHolder(itemView); } @SuppressLint("RecyclerView") @Override public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) { holder.setIsRecyclable(false); final Music music = myArraylist.get(position); holder.mTitle.setText(music.getName()); holder.mDes.setText(music.getSinger()); holder.mImageaplay.setImageResource(music.getSong()); holder.mImageStop.setImageResource(music.getSong()); } @Override public int getItemCount() { return 0; } }

Answer 1

Try it

  public class MainActivity extends AppCompatActivity {
    private ArrayList<Music> arrayList;
    private CustomMusicAdapter adapter;
    private RecyclerView recyclerView;

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

    recyclerView =  findViewById(R.id.recyclerView);
    arrayList = new ArrayList<>();
    arrayList.add(new Music("001 Music", "Salutatio Actus paenitentialis", R.raw.adoremus_snctus));
   ...



   adapter = new CustomMusicAdapter(YOUR_ACTIVITY.this, arrayList);
       recyclerView.setAdapter(adapter);
       recyclerView.setHasFixedSize(false);

}
}

Adapter:

public class CustomMusicAdapter extends RecyclerView.Adapter<CustomMusicAdapter.MyViewHolder> {
private Context context;
private int layout;
private ArrayList<Music> myArraylist;
private MediaPlayer mediaPlayer;
private boolean flag=true;

public CustomMusicAdapter(Context context, ArrayList<Music> myArraylist) {
    this.context = context;
    this.myArraylist = myArraylist;
}

 @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        final View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.custom_music_row, parent, false);
        return new MyViewHolder(itemView);
    }



@SuppressLint("RecyclerView")
    @Override
    public void onBindViewHolder(@NonNull final MyViewHolder holder, final int position) {
final ViewHolder viewHolder = new ViewHolder();
            holder.setIsRecyclable(false);

        final Music music = myArraylist.get(i);
        viewHolder.textView_SongName.setText(music.getName());
        viewHolder.textView_artist.setText(music.getSinger());



      //Play Music Setup
        viewHolder.imageView_play.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if (flag){
                    mediaPlayer=MediaPlayer.create(context,music.getSong());
                    flag=false;
                }
                if (mediaPlayer.isPlaying()){
                    mediaPlayer.pause();
                    mediaPlayer.start();
                    viewHolder.imageView_play.setImageResource(R.drawable.ic_play);
                }else {
                    mediaPlayer.start();
                    viewHolder. imageView_play.setImageResource(R.drawable.ic_pause);
                }
                mediaPlayer.start();

            }
        });

        // stop player
        viewHolder.imageView_stop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!flag){
                    mediaPlayer.stop();
                    mediaPlayer.release();
                    flag=true;
                }
                viewHolder.imageView_play.setImageResource(R.drawable.ic_play);
            }
        });
}
   @Override
    public int getCount() {
        return myArraylist.size();
    }


    public class ViewHolder{
        TextView textView_SongName, textView_artist;
        ImageView imageView_play, imageView_stop;
        private View convertview;
        LayoutInflater layoutInflater=(LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
        public ViewHolder(){
            convertview=layoutInflater.inflate(layout, null);
            textView_SongName = convertview.findViewById(R.id.textName);
            textView_artist = convertview.findViewById(R.id.txtSinger);
            imageView_play = convertview.findViewById(R.id.ivPlay);
            imageView_stop = convertview.findViewById(R.id.ivStop);

        }
    }
    }