title: video & image viewPager
body: <p>I have a problem in my code can anyone help me?</p>
  
  <p>I need to make app play  story like Messenger app<br>
  I want to display a list of images and videos in viewpager automatically or manually</p>
  
  <p>I do it but I faced some problem</p>
  
  <p>First:</p>
  
  <p>when page of image is view and the next page play video the sound of video  is playing when view the image because the pager load the next fragment i used 
  mViewPager.setOffscreenPageLimit(0); but i didn't do any thing</p>
  
  <p>Second one:</p>
  
  <p>when I move manually from video to image the video not stop playing when I search for  a solution I found this:</p>
  
  <pre><code> public void setUserVisibleHint(boolean isVisibleToUser) {       
  super.setUserVisibleHint(isVisibleToUser);                         
   if (this.isVisible())
   {     
   if (!isVisibleToUser)   // If we are becoming invisible, then...
      {  
        //player.release();}}}}
  </code></pre>
  
  <p>it's stop the player but if there is a video in next page it doesn't  play
  How can I solve this problem?</p>
  
  <p>My code:</p>
  
  <pre><code>    public class PostsViews extends Activity {
  ArrayList&lt;Post&gt; postsList;
  Post postView;
  Debate debate;
  int position;
  private ViewPager mViewPager;
  private DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
  private Timer t = new Timer();
  private int mCurrentPagerIndex = 0;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      requestWindowFeature(Window.FEATURE_NO_TITLE);
      getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
      setContentView(R.layout.activity_posts_views);
      position = 0;
  
      ArrayList postList = new ArrayList&lt;&gt;();
      postList.add(new Post("debate_112254", "post_123", 1, "https://firebasestorage.googleapis.com/v0/b/satol-19f92.appspot.com/o/UsersPost%2FImages%2FPhoto_96uMAYBw8b.jpg?alt=media&amp;token=71a5fb9d-7a71-465b-b4e3-4ad2c7513bc5"));
      postList.add(new Post("debate_112254", "post_111", 2, "https://firebasestorage.googleapis.com/v0/b/satol-19f92.appspot.com/o/UsersPost%2FVideo%2FVideo_ZVZFgP5JGT.mp4?alt=media&amp;token=07ecb08f-950b-46e3-86aa-ea72e6ccf8d5"));
      postList.add(new Post("debate_112254", "post_1563", 2, "https://firebasestorage.googleapis.com/v0/b/satol-19f92.appspot.com/o/UsersPost%2FImages%2FPhoto_mWB8XRF7m5.jpg?alt=media&amp;token=85ca502a-09df-46ab-9b0f-218e28487513"));
      postList.add(new Post("debate_112254", "post_189", 1, "https://firebasestorage.googleapis.com/v0/b/satol-19f92.appspot.com/o/UsersPost%2FImages%2FPhoto_qVxVgeqUmR.jpg?alt=media&amp;token=8c079e15-4579-41ee-b373-f34dc23ad045"));
      postList.add(new Post("debate_112254", "post_561", 1, "https://firebasestorage.googleapis.com/v0/b/satol-19f92.appspot.com/o/UsersPost%2FImages%2FPhoto_L4wKupgboV.jpg?alt=media&amp;token=3f523167-426c-43bd-91df-b146ee8633db"));
      postList.add(new Post("debate_112254", "post_56221", 2, "https://firebasestorage.googleapis.com/v0/b/satol-19f92.appspot.com/o/UsersPost%2FVideo%2FVideo_qS6dMVjMv0.mp4?alt=media&amp;token=fca08c17-b4bb-46eb-a698-eef1f3df3980"));
      debate = new Debate("debate_112254", postList, "2017-07-12 12:30");
      postsList = debate.getPost();
      Log.i("-----", debate.getKey());
      mDemoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getFragmentManager(), debate);
      mViewPager = (ViewPager) findViewById(R.id.pager);
      mViewPager.setAdapter(mDemoCollectionPagerAdapter);
      mViewPager.setCurrentItem(position);
      mViewPager.setOffscreenPageLimit(0);
      mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
          @Override
          public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  
          }
  
          @Override
          public void onPageSelected(int position) {
              t.cancel();
              t = new Timer();
              snapImage();
          }
  
          @Override
          public void onPageScrollStateChanged(int state) {
  
          }
      });
      snapImage();
  }
  
  public void snapImage() {
      final int pos;
      pos = mViewPager.getCurrentItem();
      t.scheduleAtFixedRate(new TimerTask() {
          @Override
          public void run() {
              if (debate.getPost().get(mViewPager.getCurrentItem()).getPostType() == 1) {
                  if (pos == debate.getPost().size() - 1) {
                      try {
                          t.cancel();
                          finish();
                      } catch (Exception e) {
                      }
                  } else {
                      runOnUiThread(new Runnable() {
                          @Override
                          public void run() {
                              mViewPager.setCurrentItem(pos + 1);
                          }
                      });
                  }
              }
          }
      }, 10000, 10000);
  
  
  }
  
  @Override
  public void onPause() {
      super.onPause();
      try {
          if (t != null)
              t.cancel();
      } catch (Exception e) {
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>    public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
  Depate depate;
  public DemoCollectionPagerAdapter(FragmentManager fm, Depate depate) {
      super(fm);
      this.depate=depate;
  
  }
  
  @Override
  public Fragment getItem(int i) {
      Fragment fragment = new DemoObjectFragment();
      Bundle args = new Bundle();
      // Our object is just an integer :-P
      args.putInt(DemoObjectFragment.ARG_OBJECT, i );
      args.putSerializable("depate",depate);
      fragment.setArguments(args);
      return fragment;
  }
  
  @Override
  public int getCount() {
      return depate.getPost().size();
  }
  
  @Override
  public CharSequence getPageTitle(int position) {
      return "OBJECT " + (position + 1);
  }
  }
  
  
  DemoObjectFragment.class
        public class DemoObjectFragment extends Fragment implements SurfaceHolder.Callback,
      MediaPlayer.OnPreparedListener, View.OnClickListener, MediaPlayer.OnCompletionListener {
  
  public static final String ARG_OBJECT = "object";
  private Depate depate;
  private int position;
  
  SurfaceView videoSurface;
  MediaPlayer player;
  VideoControllerView controller;
  private ImageView postImage;
  
  private Post postView;
  private String filePath;
  private String type;
  
  private FrameLayout frameLayout;
  private RelativeLayout rl_video;
  private RelativeLayout activity_view_post;
  private int mVideoWidth, mVideoHeight;
  
  private Activity activity;
  
  private String fileName;
  private ProgressBar loading;
  
  private LinearLayout ll_data;
  private ImageView thumb;
  
  private long POST_VIEW_COUNT = 1;
  private String depateID;
  private String postID;
  long time;
  private ProgressDialog pd;
  private ArrayList&lt;String&gt; debateList = new ArrayList&lt;&gt;();
  
  @Override
  public View onCreateView(LayoutInflater inflater,
                           ViewGroup container, Bundle savedInstanceState) {
  
      View viewLayout = inflater.inflate(R.layout.fragment_demo_object, container, false);
      Bundle args = getArguments();
      depate = (Depate) (args.getSerializable("depate"));
      position = args.getInt(ARG_OBJECT);
      postView = depate.getPost().get(position);
      activity = getActivity();
  
  
      frameLayout = (FrameLayout) viewLayout.findViewById(R.id.videoSurfaceContainer);
  
      rl_video = (RelativeLayout) viewLayout.findViewById(R.id.rl_video);
      postImage = (ImageView) viewLayout.findViewById(R.id.postImage);
      thumb = (ImageView) viewLayout.findViewById(R.id.thumb);
  
  
      ll_data = (LinearLayout) viewLayout.findViewById(R.id.ll_data);
      loading = (ProgressBar) viewLayout.findViewById(R.id.loading);
      loading.getIndeterminateDrawable().setColorFilter(Color.parseColor("#6782fa"), android.graphics.PorterDuff.Mode.MULTIPLY);
      loading.setVisibility(View.VISIBLE);
      videoSurface = (SurfaceView) viewLayout.findViewById(R.id.videoSurface);
  
  
      fillData(postView, depate);
  
      return viewLayout;
  }
  
  
  private void fillData(final Post postView, Depate depate) {
      filePath = postView.getFilePath();
      type = (postView.getPostType() == 1 ? "image/jpeg" : "video/mp4");
  
      if (type.equalsIgnoreCase("video/mp4")) {
          SurfaceHolder videoHolder = videoSurface.getHolder();
          videoHolder.addCallback(this);
          player = new MediaPlayer();
          try {
              player.setAudioStreamType(AudioManager.STREAM_MUSIC);
              player.setDataSource(activity, Uri.parse(filePath));
              player.setOnPreparedListener(this);
              player.setOnCompletionListener(this);
              thumb.setVisibility(View.VISIBLE);
              loading.setVisibility(View.VISIBLE);
          } catch (IllegalArgumentException e) {
              e.printStackTrace();
          } catch (SecurityException e) {
              e.printStackTrace();
          } catch (IllegalStateException e) {
              e.printStackTrace();
          } catch (IOException e) {
              e.printStackTrace();
          }
          rl_video.setVisibility(View.VISIBLE);
          postImage.setVisibility(View.GONE);
      } else {
          thumb.setVisibility(View.GONE);
          postImage.setVisibility(View.VISIBLE);
          rl_video.setVisibility(View.GONE);
          loading.setVisibility(View.VISIBLE);
          Glide.with(activity)
                  .load(filePath).centerCrop().listener(new RequestListener&lt;String, GlideDrawable&gt;() {
              @Override
              public boolean onException(Exception e, String model, Target&lt;GlideDrawable&gt; target, boolean isFirstResource) {
                  postImage.setScaleType(ImageView.ScaleType.CENTER);
                  postImage.setImageResource(R.drawable.ic_avatar);
                  loading.setVisibility(View.GONE);
                  return false;
              }
  
              @Override
              public boolean onResourceReady(GlideDrawable resource, String model, Target&lt;GlideDrawable&gt; target, boolean isFromMemoryCache, boolean isFirstResource) {
                  loading.setVisibility(View.GONE);
                  return false;
              }
          }).into(postImage);
      }
  }
  
  @Override
  public void onPrepared(MediaPlayer mp) {
      player.start();
      loading.setVisibility(View.GONE);
      thumb.setVisibility(View.GONE);
  }
  @Override
  public void onCompletion(MediaPlayer mp) {
      mp.release();
      try {
          final ViewPager viewPager = (ViewPager) getActivity().findViewById(R.id.pager);
          final int pos;
          position = viewPager.getCurrentItem();
          if (position == depate.getPost().size() - 1) {
              try {
                  getActivity().finish();
              } catch (Exception e) {
              }
          } else {
              pos = position;
               viewPager.setCurrentItem(pos + 1);
  
          }
      } catch (Exception e) {
      }
  }
  
  @Override
  public void setUserVisibleHint(boolean isVisibleToUser) {
      super.setUserVisibleHint(isVisibleToUser);
      if (this.isVisible()) {
          if (!isVisibleToUser) {
              if (player != null) {
                  player.release();
              }
          }else player.start();
      }
  }
  
  @Override
  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
  
  }
  
  @Override
  public void surfaceCreated(SurfaceHolder holder) {
      try {
          player.setDisplay(holder);
          player.prepareAsync();
      } catch (Exception e) {
      }
  }
  
  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p>activity_posts_views.xml</p>
  
  <pre><code>       &lt;android.support.v4.view.ViewPager
          android:id="@+id/pager"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#000000" /&gt;
  </code></pre>
  
  <p>fragment_demo_object.xml</p>
  
  <pre><code>    &lt;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:id="@+id/activity_view_post"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#ff000000"
  android:fitsSystemWindows="true"
  android:orientation="vertical"&gt;
  
  
          &lt;RelativeLayout
              android:id="@+id/rl_media"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#000"&gt;
  
              &lt;RelativeLayout
                  android:id="@+id/rl_video"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:visibility="visible"&gt;
  
                  &lt;FrameLayout
                      android:id="@+id/videoSurfaceContainer"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"&gt;
  
                      &lt;SurfaceView
                          android:id="@+id/videoSurface"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content" /&gt;
                  &lt;/FrameLayout&gt;
  
                  &lt;ImageView
                      android:id="@+id/thumb"
                      android:layout_width="30dp"
                      android:layout_height="30dp"
                      android:layout_centerInParent="true"
                      android:background="@drawable/white_circle_opacity"
                      android:padding="5dp"
                      android:src="@drawable/evp_action_play" /&gt;
              &lt;/RelativeLayout&gt;
  
              &lt;ImageView
                  android:id="@+id/postImage"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_centerInParent="true"
                  android:background="#000"
                  android:visibility="visible" /&gt;
  
              &lt;ProgressBar
                  android:id="@+id/loading"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_centerInParent="true"
                  android:visibility="gone" /&gt;
          &lt;/RelativeLayout&gt;
     &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>Debate.class</p>
  
  <pre><code>      public class Debate implements Serializable {
  
  String CreatedAt;
  String key;
  ArrayList&lt;Post&gt; Post;
  public Debate(String key, ArrayList&lt;Post&gt; posts, String createdAt) {
      this.key = key;
      this.Post = posts;
      this.CreatedAt = createdAt;
  }
  public ArrayList&lt;Post&gt; getPost() {
      return Post;
  }
  
  public void setPost(ArrayList&lt;Post&gt; Post) {
      this.Post = Post;
  }
  
  public String getCreatedAt() {
      return CreatedAt;
  }
  
  public void setCreatedAt(String CreatedAt) {
     this. CreatedAt = CreatedAt;
  }
  
  public String getKey() {
      return key;
  }
  
  public void setKey(String key) {
      this.key = key;
  }
  }
  </code></pre>
  
  <p>Post.class</p>
  
  <pre><code> public class Post implements Serializable {
  String DebateId;
  String PostId;
  int PostType;
  String FilePath;
  
  public Post(String debateId, String postId, int postType, String filePath) {
      DebateId = debateId;
      PostId = postId;
      PostType = postType;
      FilePath = filePath;
  }
  
  public String getPostId() {
      return PostId;
  }
  
  public void setPostId(String postId) {
      PostId = postId;
  }
  
  public String getDebateId() {
      return DebateId;
  }
  
  public void setDebateId(String DebateId) {
      this.DebateId = DebateId;
  }
  
  public int getPostType() {
      return PostType;
  }
  
  public void setPostType(int PostType) {
      this.PostType = PostType;
  }
  
  public String getFilePath() {
      return FilePath;
  }
  
  public void setFilePath(String FilePath) {
      this.FilePath = FilePath;
  }
  </code></pre>
  
  <p>}</p>