ViewPager showing Mediacontrols on Imageview ahead of VideoView

Question

Gallery feature:

I am developing a feature similar to Gallery, where users can swipe to see image or video uploaded by them.

Problem :

Whenever there is video after imageview, Mediacontrols for videoview is getting displayed on imageview for about 2 seconds

Code :

item_pager.xml :

<?xml version="1.0" encoding="utf-8"?>
  <layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_gravity="center"
  android:background="@color/black_overlay"
  android:gravity="center"
  android:orientation="vertical">

  <ImageView
   android:id="@+id/images_pager"
   android:layout_width="match_parent"
   android:layout_height="250dp"
   android:adjustViewBounds="true"
   android:scaleType="fitXY"
   android:visibility="visible"
   app:srcCompat="@drawable/cctv_icon" />

  <VideoView
   android:id="@+id/videoview"
   android:layout_width="match_parent"
   android:layout_height="250dp"
   android:adjustViewBounds="true"
   android:visibility="gone" />
 </LinearLayout>

</layout>

PagerAdapter code :

public class ItemViewpager extends PagerAdapter implements MediaPlayer.OnPreparedListener, 
   View.OnClickListener, MediaPlayer.OnCompletionListener, View.OnFocusChangeListener {
 private List<MediaInfo> mediaInfos;
 private LayoutInflater layoutInflater;
 private MediaController mediaController;
 private HashMap<Integer, MediaController> mediaMap;
 private VideoView videoView;
 private ImageView imageView;
 private int currPos = 0;

 public ItemViewpager(List<MediaInfo> mediaInfos) {
  this.mediaInfos = mediaInfos;
  mediaMap = new HashMap<>(mediaInfos.size());
 }

@Override
public int getCount() {
return mediaInfos.size();
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
 return view == ((LinearLayout) object);
}

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
 layoutInflater= 
  (LayoutInflater)container.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  View itemView = layoutInflater.inflate(R.layout.item_pager, container, false);

   imageView = itemView.findViewById(R.id.images_pager);
   videoView = itemView.findViewById(R.id.videoview);
   videoView.setOnPreparedListener(this);
   videoView.setOnCompletionListener(this);
   videoView.setOnFocusChangeListener(this);

   boolean video = mediaInfos.get(position).video;
   String uri = mediaInfos.get(position).uri;

   mediaController = new MediaController(container.getContext());
   mediaMap.put(position, mediaController);
  if (video) {
     imageView.setVisibility(View.GONE);
     videoView.setVisibility(View.VISIBLE);
     videoView.setVideoURI(Uri.parse(uri));
     mediaController.setAnchorView(videoView);
     videoView.setMediaController(mediaController);
     videoView.requestFocus();
     videoView.seekTo(1);
   } else {
    imageView.setVisibility(View.VISIBLE);
    videoView.setVisibility(View.GONE);
    Picasso.get().load(uri).fit().placeholder(R.mipmap.ic_launcher).into(imageView);
   }
  if (mediaMap.size() > 0)
   mediaMap.get(position).hide();

container.addView(itemView);

return itemView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
 container.removeView((LinearLayout) object);
}

@Override
public void onPrepared(MediaPlayer mediaPlayer) {

}

public void onPageSelectionListener(int pos) {
  currPos = pos;
  boolean video = mediaInfos.get(currPos).video;

  /*if (mediaMap.size() > 0) {
   if (video)
    mediaMap.get(currPos).show(0);
   else
    mediaMap.get(currPos).hide();
  }*/
  }


  @Override
  public void onClick(View view) {
  }

  @Override
  public void onCompletion(MediaPlayer mediaPlayer) {
  boolean video = mediaInfos.get(currPos).video;

   /*if (!video)
    videoView.stopPlayback();
   else
    mediaMap.get(currPos).show();*/
    }

   @Override
   public void onFocusChange(View view, boolean focus) {
   }

  }

Thanks in advance :

Masoud Mokhtari · Answer 1 · 2019-10-26T11:14:47.477

Try this:

if (video) {
     imageView.setVisibility(View.GONE);
     videoView.setVisibility(View.VISIBLE);
     videoView.setVideoURI(Uri.parse(uri));
     mediaController.setAnchorView(videoView);
     videoView.setMediaController(mediaController);
     videoView.requestFocus();
     videoView.seekTo(1);
   } else {
    imageView.setVisibility(View.VISIBLE);
    videoView.setVisibility(View.GONE);
    //add below line, hide mediaController
    videoView.setMediaController(null);
    Picasso.get().load(uri).fit().placeholder(R.mipmap.ic_launcher).into(imageView);
   }

This code hide mediaController:

videoView.setMediaController(null);

score 0 · Answer 2 · answered Oct 31 '19 at 09:51

0

Try by below way

    boolean video = mediaInfos.get(currPos).video;
    if(video){
        mediaController.setVisibility(View.GONE);
// You need the object of mediaController which is of currently visible videoView on the screen
    }else{
        mediaController.setVisibility(View.VISIBLE); 
    }

answered Oct 31 '19 at 09:51

Mohit Dholakia

252
2
16

Still the same result – Ashish Shukla Nov 02 '19 at 12:19

score 0 · Answer 3 · answered Nov 02 '19 at 03:55

0

First create obj of mediacontroller. Then need to show it, call view.VISIBLE, when need to hide ,call view.gone.

 MediaController ctrl = new MediaController(context);

if(video){
     ctrl.setVisibility(View.VISIBLE);
videoView.setMediaController(ctrl);

    }else{
       ctrl.setVisibility(View.GONE);
    }

answered Nov 02 '19 at 03:55

Mukta Ghosh

360
1
9

Still getting the same problem – Ashish Shukla Nov 02 '19 at 12:23

score 0 · Answer 4 · answered Nov 02 '19 at 09:56

Better option is to change your ViewPager adapter from PagerAdapter to FragmentStatePagerAdapter. Meaning you will have to deal with fragments and lifecycle. You will have to put your VideoView/ImageView inside Fragment and instantiate video playing only when user sees VideoView. That's how you will get rid of MediaController showing on images. Method in which you should load video playing inside fragment is this one:

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
    super.setUserVisibleHint(isVisibleToUser);
}

When flag isVisibleToUser is true, you start playing video. You can check for more help here: Video is not pausing in fragment ViewPager

Google for more details, there are tons of examples how can you achieve what you want. I'm also suggesting for video playing, that you should get rid of VideoView and learn how to play videos with ExoPlayer, it's more complex to play videos but in the end it's much better optimised and performant solution to go with.

Also try to avoid using ViewPager for future, there is already new component, ViewPager2 based on RecyclerView.

Thanks for suggestion, but I dont want to use fragments because I think my problem can be resolved without creating lot of fragment instances. — Ashish Shukla, Nov 02 '19 at 12:29

score 0 · Accepted Answer · answered Nov 02 '19 at 12:49

0

Finally my issue got resolved by answer given by Ronak Thakkar

The CustomViewpager used had tried to load only single page by various ways.

You can always see the source code in the class.

answered Nov 02 '19 at 12:49

Ashish Shukla

1,027
16
36

ViewPager showing Mediacontrols on Imageview ahead of VideoView

5 Answers5