How to create reels like android app using Youtube and ViewPager2?

3 min readMar 12, 2022

Many of us Coders are looking for a smart way to interact with videos and create something out of it.

In this post, we will build a beginner friendly app in which you can play, pause share and interact with the youtube videos with the classic swiping up interaction of UI which will have quite exactly the functionally of Instagram reels.

PS:- 1.This application won’t allow you to show random/related video on every scroll and the number of video will be limited.

We will be using a library which uses YouTube’s own web player to play videos. Therefore it is 100% compliant with terms of service. You can see here how this is also the official way of playing YouTube videos on iOS.

Thanks to Pier Francesco.

Let’s start, by adding the dependency in build.gradle file(Module level) in the app

Note :- The minimum API level supported by this library is API 17.

Now, Coming to the UI we’ll just add ViewPager2 with orientation=”vertical”in activity_main.xml

Next Step, is to make Item for this viewpager container which will contain the video and other buttons(if required) but to keep it simpler here we will just add a TextView which will show the sequence of the videos.

Go to res folder>right click>new layout resource file.
Name it anything(here it’s item_video.xml)

Here, the library which we are using provides a YoutubePlayerView which can be 100% customised according to our usage. Also, I’m using Constraint layout so if you are not familiar with it make sure to check it out.

We will use ViewBinding to remove hassle of findViewById for every view element.So let’s add that too in build.gradle(Module:App_name.app)

buildFeatures {
    viewBinding true
}

And inflate view to MainActivity.kt implementation should look like this:-

class MainActivity : AppCompatActivity() {

    private lateinit var binding:ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
}

Now Comes the interesting part Binding view with ViewPager using Adapter but before that lets create a data class(or model class) which will contain the unique characters which is defined at the end of the link of the youtube video.

Here, videoTitle will be counter for the video and videoId will be the endpoint of the youtube video (Example:-RS6By_pE7uo).

The Adapter will contain list of such data and which will implement interface of Recycler.Adapter this is so because we want multiple item in our ViewPager.

Two Major Steps:-1.Create inner ViewHolder class where we will bind view to our data

2.Implement members of RecyclerView.Adapter.

OnCreateViewHolder has viewBinding to inflate the layout

Here setVideoData function is under ViewHolder class which adds the youtubeVideoView that we created in the item_video.xml file and we have called it in OnBindViewHolder where every list item will get the data value from the function.

Check out the GitHub page of the library here for more clarity.

Now the Last Step is to finally add our adapter with values to the viewpager in MainActivity.kt file.

Here Are the Results,