PreviewSeekBar
A SeekBar suited for showing a video preview. As seen in Google Play Movies
Google Play Movies
PreviewSeekBar's sample
Build
Add the following to your app's build.gradle:
dependencies {
// Base implementation with a standard SeekBar
implementation 'com.github.rubensousa:previewseekbar:3.1.1'
// Media3 extension that contains a TimeBar.
implementation 'com.github.rubensousa:previewseekbar-media3:1.1.1.0'
// (Deprecated) ExoPlayer Extension that contains a TimeBar.
implementation 'com.github.rubensousa:previewseekbar-exoplayer:2.18.1.0'
}How to use with Media3
Add a custom controller to your PlayerView
<androidx.media3.ui.PlayerView
android:id="@+id/playerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:controller_layout_id="@layout/exoplayer_controls"/>Here's the sample's exoplayer_controls: https://github.com/rubensousa/PreviewSeekBar/blob/master/sample/src/main/res/layout/exoplayer_controls.xml
Change your TimeBar to a PreviewTimeBar
<FrameLayout
android:id="@+id/previewFrameLayout"
android:layout_width="@dimen/video_preview_width"
android:layout_height="@dimen/video_preview_height"
android:background="@drawable/video_frame">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<com.github.rubensousa.previewseekbar.exoplayer.PreviewTimeBar
android:id="@+id/exo_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:previewAnimationEnabled="true"
app:previewFrameLayout="@id/previewFrameLayout"/>Place the View you want to use to display the preview in the FrameLayout above. In this example it's an ImageView but you can place any View inside. PreviewTimeBar will animate and show that FrameLayout for you automatically.
The FrameLayout must have the same parent as the PreviewTimeBar if you want the default animations to work
Create a PreviewLoader and pass it to the PreviewTimeBar
Note: A PreviewLoader is an interface that you need to implement yourself. This library isn't opinionated about how you actually show a preview. Check the sample code for an example on how it can be done using thumbnail sprites.
PreviewLoader imagePreviewLoader = ImagePreviewLoader();
previewTimeBar.setPreviewLoader(imagePreviewLoader);In this project's sample, Glide is used with a custom transformation to crop the thumbnails from a thumbnail sprite.
@Override
public void loadPreview(long currentPosition, long max) {
GlideApp.with(imageView)
.load(thumbnailsUrl)
.override(GlideThumbnailTransformation.IMAGE_WIDTH,
GlideThumbnailTransformation.IMAGE_HEIGHT)
.transform(new GlideThumbnailTransformation(currentPosition))
.into(imageView);
}Listen for scrub events to control playback state
When the user starts scrubbing the PreviewTimeBar, you should pause the video playback After the user is done selecting the new video position, you can resume it.
previewTimeBar.addOnScrubListener(new PreviewBar.OnScrubListener() {
@Override
public void onScrubStart(PreviewBar previewBar) {
player.setPlayWhenReady(false);
}
@Override
public void onScrubMove(PreviewBar previewBar, int progress, boolean fromUser) {
}
@Override
public void onScrubStop(PreviewBar previewBar) {
player.setPlayWhenReady(true);
}
});Customize the PreviewTimeBar
Available XML attributes:
<attr name="previewAnimationEnabled" format="boolean" />
<attr name="previewEnabled" format="boolean" />
<attr name="previewAutoHide" format="boolean" />// Disables auto hiding the preview.
// Default is true, which means the preview is hidden
// when the user stops scrubbing the PreviewSeekBar
previewTimeBar.setAutoHidePreview(false);
// Shows the preview
previewTimeBar.showPreview();
// Hides the preview
previewTimeBar.hidePreview();
// Disables revealing the preview
previewTimeBar.setPreviewEnabled(false);
// Disables the current animation
previewTimeBar.setPreviewAnimationEnabled(false);
// Change the default animation
previewTimeBar.setPreviewAnimator(new PreviewFadeAnimator());
// Changes the color of the thumb
previewTimeBar.setPreviewThumbTint(Color.RED);
// Listen for scrub touch changes
previewTimeBar.addOnScrubListener(new PreviewBar.OnScrubListener() {
@Override
public void onScrubStart(PreviewBar previewBar) {
}
@Override
public void onScrubMove(PreviewBar previewBar, int progress, boolean fromUser) {
}
@Override
public void onScrubStop(PreviewBar previewBar) {
}
});
// Listen for preview visibility changes
previewTimeBar.addOnPreviewVisibilityListener(new PreviewBar.OnPreviewVisibilityListener() {
@Override
public void onVisibilityChanged(PreviewBar previewBar, boolean isPreviewShowing) {
}
});How to use with a standard SeekBar
Setup your layout like the following:
<FrameLayout
android:id="@+id/previewFrameLayout"
android:layout_width="160dp"
android:layout_height="90dp">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<com.github.rubensousa.previewseekbar.PreviewSeekBar
android:id="@+id/previewSeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:max="800"
app:previewFrameLayout="@id/previewFrameLayout"/>Place the View you want to use to display the preview in the FrameLayout above. In this example it's an ImageView but you can place any View inside. PreviewSeekBar will animate and show that FrameLayout for you automatically.
The FrameLayout must have the same parent as the PreviewSeekBar if you want the default animations to work
Create a PreviewLoader and pass it to the PreviewSeekBar
PreviewSeekBar previewSeekBar = findViewById(R.id.previewSeekBar);
PreviewLoader imagePreviewLoader = ImagePreviewLoader();
previewSeekbar.setPreviewLoader(imagePreviewLoader);Customization
Available XML attributes for styling:
<attr name="previewAnimationEnabled" format="boolean" />
<attr name="previewEnabled" format="boolean" />
<attr name="previewThumbTint" format="color" />
<attr name="previewAutoHide" format="boolean" />Important note
This library is just an UI component for displaying previews. It doesn't handle generating thumbnail sprites from videos.
License
Copyright 2017 The Android Open Source Project
Copyright 2020 Rúben Sousa
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.