This tutorial shows you how to build the full-screen paged Video player like the TikTok application using the Kohii library.

Source code

eneim/kohii-tutorial-301

Objective

We will try to replicate the UI of the TikTok application:

Each video is played in full-screen, and the user can swipe the App vertically to switch to other videos.
It starts playing the video automatically, if the user touches the video, it will pause/resume the video accordingly.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c4ec5e4c-be5b-4bc3-a17f-a4690d59b8a8/kohii_tut_301_5.webm

Requirement

You should go through some basic steps introduced in other tutorials before trying this one. Also, make sure you have the right to use the videos in your application.

Hands-on

Before we start, it's worth noting that in this tutorial, we only replicate the video playback, but not try to implement other features like user profile, following, sharing, etc.

Step 1: Create new project

This step is the same as in the previous tutorial, but in this project, we will use the Bottom Navigation Activity template of Android Studio:

This is our project after step 1:

Step 2: Adding dependencies

We will use ViewPager2 in this tutorial. It is the improved version of the ViewPager as we knew, it supports vertical orientation which the ViewPager doesn't, and it uses RecyclerView internally and it supports both Fragment (via the FragmentStateAdapter) and View (via the RecyclerView Adapter) which gives us a lot of flexibility.

app/build.gradle

 dependencies {
   implementation fileTree(dir: "libs", include: ["*.jar"])
+
+  def kohii_version = "1.1.0.2011003-RC2"
+  implementation "im.ene.kohii:kohii-core:${kohii_version}"
+  implementation "im.ene.kohii:kohii-exoplayer:${kohii_version}"
+  implementation "com.google.android.exoplayer:exoplayer:2.11.3"
+
+  implementation "androidx.viewpager2:viewpager2:1.0.0"
+
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   implementation 'androidx.core:core-ktx:1.3.0'
   implementation 'androidx.appcompat:appcompat:1.1.0'