When I try to load audio and images from the API into ViewPager2's media player and image view, they don't load in the correct order; audio is sometimes different from their image and text when loaded in ViewPager2 (for example, if I slide down or up, music is different from their order, but image and text are in their order).
Watch this video for a better explanation. "Video Url"
So I want to create a feature similar to Resso Music App (sliding up and down to change music, similar to how we change videos on TikTok).
For this functionality, I use ViewPager2, an array list, an adapter, and Retrofit.
MusicFragment.java
public class MusicFragment extends Fragment {
View v;
List<AllMusicModel.Data> musicItems;
ViewPager2 musicsViewPager;
private MusicAdapter musicAdapter;
@RequiresApi(api = Build.VERSION_CODES.M)
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
v = inflater.inflate(R.layout.fragment_music, container, false);
musicsViewPager = v.findViewById(R.id.viewPagerVideos);
musicsViewPager.setUserInputEnabled(true);
musicItems = new ArrayList<>();
musicAdapter = new MusicAdapter(getActivity(), musicItems);
musicsViewPager.setAdapter(musicAdapter);
call_music_list_api();
return v;
}
private void call_music_list_api() {
// Api implementation
String Token = "Bearer " + Config.getToken(requireContext());
String APIChannel = "App";
String AppVersion = BuildConfig.VERSION_NAME;
Call<AllMusicModel> mCall = RetrofitClient.getAdapter().GetAllMusic(APIChannel, AppVersion, Token);
mCall.enqueue(new Callback<AllMusicModel>() {
@SuppressLint("NotifyDataSetChanged")
@Override
public void onResponse(@NonNull Call<AllMusicModel> call, @NonNull Response<AllMusicModel> response) {
if (response.isSuccessful()) {
AllMusicModel alldata = response.body();
String code;
// String message;
String status;
if (alldata != null) {
code = String.valueOf(alldata.getStatuscode());
// message = String.valueOf(alldata.getMessage());
status = String.valueOf(alldata.getStatus());
if (code.equals("200")) {
musicItems.clear();
musicItems.addAll(alldata.getData());
musicAdapter.notifyDataSetChanged();
} else if (Objects.equals(code, "401")) {
Log.e("MusicFragment", "onResponse: " + status);
}
}
} else {
Toast.makeText(getContext(), "Something went wrong", Toast.LENGTH_SHORT).show();
}
}
@Override
public void onFailure(@NonNull Call<AllMusicModel> call, @NonNull Throwable t) {
Log.e("Error", String.valueOf(t));
}
});
}
}
fragment_music.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="@style/parent.contentLayout"
android:fitsSystemWindows="false"
tools:context=".Fragments.MusicFragment">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPagerVideos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</FrameLayout>
MusicAdapter.java
public class MusicAdapter extends RecyclerView.Adapter<MusicAdapter.MusicViewHolder> {
private final Context context;
private final List<AllMusicModel.Data> mMusiclist;
private MediaPlayer mediaPlayer;
public MusicAdapter(Context context, List<AllMusicModel.Data> musicItems) {
this.context = context;
mMusiclist = musicItems;
}
@NonNull
@Override
public MusicViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new MusicViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.music_layout, parent, false));
}
@Override
public void onBindViewHolder(@NonNull MusicViewHolder holder, int position) {
final MusicViewHolder finalholder = holder;
finalholder.setMusicData(mMusiclist.get(position));
}
@Override
public int getItemCount() {
return mMusiclist.size();
}
class MusicViewHolder extends RecyclerView.ViewHolder {
ImageView mImageView, play_pause_image;
TextView txtTitle, txtDesc;
ProgressBar mProgressBar;
ConstraintLayout play_pause_layout, linearLayout;
public MusicViewHolder(@NonNull View itemView) {
super(itemView);
mImageView = itemView.findViewById(R.id.imageView);
txtTitle = itemView.findViewById(R.id.txtTitle);
txtDesc = itemView.findViewById(R.id.txtDesc);
mProgressBar = itemView.findViewById(R.id.progressBar);
play_pause_layout = itemView.findViewById(R.id.play_pause_layout);
play_pause_image = itemView.findViewById(R.id.play_pause_image);
linearLayout = itemView.findViewById(R.id.linearLayout);
}
void setMusicData(AllMusicModel.Data musicItem) {
txtTitle.setText(musicItem.getTitle());
// txtDesc.setText(musicItem);
if (mediaPlayer != null) {
mediaPlayer.stop();
mediaPlayer.release();
mediaPlayer = null;
}
mImageView.setOnClickListener(v -> {
if (mediaPlayer.isPlaying()) {
//stop or pause your media player mediaPlayer.stop(); or mediaPlayer.pause();
play_pause_layout.setVisibility(View.VISIBLE);
play_pause_image.setImageResource(R.drawable.ic_round_play);
mediaPlayer.pause();
} else {
mediaPlayer.start();
play_pause_layout.setVisibility(View.VISIBLE);
play_pause_image.setImageResource(R.drawable.ic_round_pause);
Handler handler = new Handler();
handler.postDelayed(() -> play_pause_layout.setVisibility(View.INVISIBLE), 4000);
}
});
String audioUrl = ApiUrls.Api_LocalHost_Url + musicItem.getAudio();
mediaPlayer = new MediaPlayer();
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
try {
mediaPlayer.setDataSource(audioUrl);
mediaPlayer.prepareAsync();
mediaPlayer.setOnPreparedListener(mediaPlayer -> {
mProgressBar.setVisibility(View.GONE);
mediaPlayer.start();
});
} catch (IOException e) {
e.printStackTrace();
}
mediaPlayer.setOnCompletionListener(MediaPlayer::start);
String imageUrl = ApiUrls.Api_LocalHost_Url + musicItem.getImage();
Glide.with(context)
.load(imageUrl)
.placeholder(R.drawable.loading)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.error(R.drawable.loading)
.into(mImageView);
}
}
}
music_layout.xml (Layout for Load Adater Data)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/contentBodyColor"
>
<ImageView
android:id="@+id/imageView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:scaleType="centerCrop"
android:layout_width="0dp"
android:layout_height="0dp"/>
<ProgressBar
android:id="@+id/progressBar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="30dp"
android:layout_height="30dp"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/play_pause_layout"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:visibility="gone"
android:background="@drawable/music_play_pause_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/play_pause_image"
android:layout_width="45dp"
android:layout_height="45dp"
android:contentDescription="@string/back_button"
android:src="@drawable/ic_round_play"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="80dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txtTitle"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingEnd="5dp"
android:shadowColor="@android:color/black"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="15"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textAlignment="center"
android:fontFamily="@font/roboto_bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/txtDesc"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingEnd="5dp"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="15"
android:textColor="@android:color/white"
android:textSize="10sp"
android:shadowColor="@android:color/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="SmallSp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
AllMusicModel.java
public class AllMusicModel {
@SerializedName("statuscode")
@Expose
private Integer statuscode;
@SerializedName("status")
@Expose
private String status;
@SerializedName("message")
@Expose
private String message;
@SerializedName("data")
@Expose
private List<Data> data = null;
public Integer getStatuscode() {
return statuscode;
}
public void setStatuscode(Integer statuscode) {
this.statuscode = statuscode;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public List<Data> getData() {
return data;
}
public void setData(List<Data> data) {
this.data = data;
}
public class Data {
@SerializedName("id")
@Expose
private Integer id;
@SerializedName("title")
@Expose
private String title;
@SerializedName("image")
@Expose
private String image;
@SerializedName("audio")
@Expose
private String audio;
@SerializedName("time")
@Expose
private String time;
@SerializedName("status")
@Expose
private String status;
@SerializedName("createdAt")
@Expose
private String createdAt;
@SerializedName("updatedAt")
@Expose
private String updatedAt;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getAudio() {
return audio;
}
public void setAudio(String audio) {
this.audio = audio;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getCreatedAt() {
return createdAt;
}
public void setCreatedAt(String createdAt) {
this.createdAt = createdAt;
}
public String getUpdatedAt() {
return updatedAt;
}
public void setUpdatedAt(String updatedAt) {
this.updatedAt = updatedAt;
}
}
}
Json Response From API
{"statuscode":200,"status":"Success","message":"Music List","data":[{"id":6,"title":"Faded","image":"1156127.jpg","audio":"waha.mp3","time":"Testing","status":"Testing","createdAt":"2022-10-05T20:36:56.000Z","updatedAt":"2022-10-05T20:36:56.000Z"},{"id":7,"title":"Drive Forever","image":"driveforever.jpg","audio":"driveforever.mp3","time":"Testing","status":"Testing","createdAt":"2022-10-05T20:46:51.000Z","updatedAt":"2022-10-05T20:46:51.000Z"}]}
