Add PreviewSeekBar in Android Video App

0
3286
How to Add PreviewSeekBar in Android
How to Add PreviewSeekBar in Android

If you use Google Play Movies, you have probably noticed this great animated SeekBar with a preview of the movie. It turned out that Rúben Sousa implemented that as an open-source library. The gif below gives a good flavor of its functionalities.

Popular article : Top 30 Android Tools Every Developer should Know

If your app is for instance a movie player, you should definitely try it!

PreviewSeekBar in Android Video App
PreviewSeekBar in Android Video App

Add PreviewSeekBar in Android Video App

1Lets start with gradle:

dependencies {
    compile 'com.github.rubensousa:previewseekbar:0.3'
}

2 android tmh tellmehow preview seek bar GIF

3Add the following XML:

<com.github.rubensousa.previewseekbar.PreviewSeekBarLayout
      android:id="@+id/previewSeekBarLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

      <FrameLayout
          android:id="@+id/previewFrameLayout"
          android:layout_width="@dimen/video_preview_width"
          android:layout_height="@dimen/video_preview_height">

          <View
              android:id="@+id/videoView"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_gravity="start"
              android:background="@color/colorPrimary" />

      </FrameLayout>

      <com.github.rubensousa.previewseekbar.PreviewSeekBar
          android:id="@+id/previewSeekBar"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_below="@id/previewFrameLayout"
          android:layout_marginTop="25dp"
          android:max="800" />
          
</com.github.rubensousa.previewseekbar.PreviewSeekBarLayout>

Note : You need to add at least one SeekBar and a FrameLayout inside PreviewSeekBarLayout, else an exception will be thrown. PreviewSeekBarLayout extends from RelativeLayout so you can add other views or layouts there.

Drawing libraryIsometric Design Android Library

Pass a standard OnSeekBarChangeListener to the PreviewSeekBar :

// setOnSeekBarChangeListener was overridden to do the same as below
seekBar.addOnSeekBarChangeListener(this);

Implement your own preview logic in:

@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    // I can't help anymore
}

4How to use this with ExoPlayer

Add a custom controller to your SimpleExoPlayerView

<com.google.android.exoplayer2.ui.SimpleExoPlayerView
    android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:controller_layout_id="@layout/exoplayer_controls"/>

The PreviewSeekBarLayout inside exoplayer_controls should be similar to this:

<com.github.rubensousa.previewseekbar.PreviewSeekBarLayout
    android:id="@+id/previewSeekBarLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/previewFrameLayout"
        android:layout_width="@dimen/video_preview_width"
        android:layout_height="@dimen/video_preview_height"
        android:background="@drawable/video_frame"
        android:padding="@dimen/video_frame_width">

        <com.google.android.exoplayer2.ui.SimpleExoPlayerView
            android:id="@+id/previewPlayerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:controller_layout_id="@layout/exo_simple_player_view"
            app:surface_type="texture_view"
            app:use_artwork="false"
            app:use_controller="false" />

    </FrameLayout>

    <com.github.rubensousa.previewseekbar.PreviewSeekBar
        android:id="@+id/exo_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/previewFrameLayout"
        android:layout_marginTop="10dp"
        android:max="800" />

</com.github.rubensousa.previewseekbar.PreviewSeekBarLayout>

Use the following SimpleExoPlayerView for the preview:

<com.google.android.exoplayer2.ui.SimpleExoPlayerView
    android:id="@+id/previewPlayerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:controller_layout_id="@layout/exo_simple_player_view"
    app:surface_type="texture_view"
    app:use_artwork="false"
    app:use_controller="false" />

We need to specify another controller layout because the default one includes a SeekBar with the same id as ours.

Must see : Cool Cards Menu Animation Android Library

Create a player with a custom TrackSelection and LoadControl

TrackSelection.Factory videoTrackSelectionFactory = new WorstVideoTrackSelection.Factory();
TrackSelector trackSelector = new DefaultTrackSelector(videoTrackSelectionFactory);
LoadControl loadControl = new PreviewLoadControl();
SimpleExoPlayer previewPlayer = ExoPlayerFactory.newSimpleInstance(previewPlayerView.getContext(),
        trackSelector, loadControl);
previewPlayer.setPlayWhenReady(false);

Seek the player in onProgressChanged

@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    if(fromUser){
        int offset = (float) progress / seekBar.getMax()
        // Round the offset before seeking. The sample uses 1% or 10% of the video per each thumbnail
        previewPlayer.seekTo((long) (offset * previewPlayer.getDuration()));
        previewPlayer.setPlayWhenReady(false);
    }
}

5Download

Share to get Download linkimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.

6What’s new in next version of this library

A few improvements would be:

  • Adding a stream with lower bitrate to load and display the images faster.
  • Using some kind of special stream just for the thumbnails. Maybe this is how the Google Play team did it, I don’t know. They load the thumbnails a lot faster than this sample.
  • Caching thumbnails in disk for offline use.

Hope you like this tutorial. Please comment us or share on social site given below.

 

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...