Software developers are always on the lookout for ways to streamline their jobs. When we can’t find the tools we need to make the development process run smoother, many of us end up creating them ourselves. I’ve developed a repository of various utility classes that has helped me tackle several projects. This short-and-sweet blog post series will introduce you to the ins and outs of my HELU utilities aimed at making Android development easier.
Today I will show you how to use the HELUVideoView library to easily create and control videos in your app. First of all, I would like to point out that HELUVideoView has only basic control options, like Play/Pause, Mute and SeekBar. It can only display one simple video to the user. It’s not meant to be a complex media player.
If you ask what HELUVideoView can offer to you that VideoView cannot, the answer is simple: HELUVideoView offers more convenient methods that can be used and is simpler to set up and use, without losing direct access to MediaPlayer. Some of those helpful methods are: seekToBeginning()
, playFromBeginning()
, setOnStateChangeListener()
, etc.. You also have better control over video looping, and autoplay/pause when attaching and detaching view. This can be super helpful when your activity/fragment lose focus for some reason. In my opinion, the main advantage of this library is that you have complete control over what the player looks like. You can create your own buttons and place them anywhere you like, inside or outside the player view.
Let’s get down to examples. Start by adding the HELUVideoView library to your Gradle file:
implementation "cz.helu.android:heluvideoview:2.0.0"
Now you have two options. They are pretty similar as they both use the Builder
class provided by the HELUVideoView library. The first one is creating the view manually in your java/kotlin source using the Builder
class. The second one is creating the view inside you XML layout file and then just initializing it from the Builder class using the initFromBuilder()
method.
Here’s an example of what it could look like in both cases:
var builder = HeluVideoView.Builder(context)
.withScalingMode(HeluVideoView.ScaleType.SCALE_TO_FIT_VIDEO)
.withVideoUrl("Some Video URL")
.withPlayView(playButtonView)
.withPauseView(pauseButtonView)
// In first case we would just build the view
var videoView = builder.build()
// In second case we would init already existing view from builder
findViewById<HeluVideoView>(R.id.video_view).initFromBuilder(builder)
As you can see, we set ScaleType.SCALE_TO_FIT_VIDEO
, which will resize the HELUVideoView Height to fit the video size. We also set play and pause buttons views. HELUVideoView will now use them and automatically set their visibility and OnClickListeners based on the MediaPlayer state.
The next cool thing is that we can simply set any SeekBar view to HELUVideoView, and it will automatically update its progress and also set all necessary listeners, so the video view can be controlled by it.
Another interesting part is the withPauseOnVisibilityChange()
builder method, which will make sure the video is automatically paused when the view visibility changes. This is set to true by default. You can see how this works in the video below:
Setting withAttachViewPolicy()
can also come in handy. We have three options here: continue, pause and start over. They will tell HELUVideoView what should happen when the player view is attached to any Layout. This can happen for example in RecyclerView.
I hope you like my HELUVideoView library. You can see all methods and examples here. If you have any feature requests or issues do not hesitate to contact me.