TikTok is a mobile application that can be downloaded on smartphones and tablets. It is available on both iOS and Android operating systems and can be downloaded for free from the respective app stores. TikTok is a social media platform where users can view short video content i.e. 15 to 60 secs. A sample video is given below to get an idea about what we are going to do in this article.
Prerequisites:
ViewPager
ViewPager is a UI component in the Android SDK that allows users to swipe left or right to navigate between different screens or pages of content. It is a part of the Android Support Library and is used to implement sliding tabs, galleries, and other types of content swiping.
The ViewPager class is a container that holds a number of child views and allows the user to swipe between them. It is typically used in conjunction with the PagerAdapter class, which provides the views to be displayed by the ViewPager.
To use ViewPager in your Android app, you need to add the ViewPager and PagerAdapter classes to your project by including the Android Support Library in your build.gradle file. Once you have these classes, you can create a layout file that includes the ViewPager and add a PagerAdapter to populate the ViewPager with content.
Step-by-Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2:
Change themes.xml by setting DarkActionBar to NoActionBar
themes.xml
Step 3:
Connect the project to Firebase. For connecting, Go to Tools > Firebase > Realtime Database > Connect to Firebase.
Step 4:
Create a new project on Firebase and it gets automatically connected to your android project. But if it doesn’t just Go to Firebase Project settings of your newly created Project and Download the google-services.json file from there and paste this file into Directory Project>[Project name]>app.
Step 5:
Add the Realtime Time Database dependency to your project.
Step 6:
Add ViewPager and Firebase UI dependency to build.gradle(:app) file and sync your project
dependencies {
implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'com.firebaseui:firebase-ui-database:8.0.2'
}
Step 7:
Go to Firebase and enable Storage and Realtime Database from Product Categories > Build
Step 8:
Go to Storage and Create a new folder for storing videos (e.g. GfgTiktokclone)
Step 9:
Open GfgTiktokclone and upload your videos here)
Step 10:
Create a key-value mapping structure in your Realtime Database. For example, you can refer to given below Mapping:
Step 11:
TITLE and DESC can be modified as per needs but in the URL key paste the URL of your video from the Firebase Storage
Step 12:
Create an XML layout file for storing the single-page design of your app (e.g. video_single.xml)
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000"> <ImageView android:layout_width="wrap_content" android:layout_height="60dp" android:layout_centerHorizontal="true" android:id="@+id/imgTikTok" android:src="@drawable/tiktok"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10dp" android:text="reels" android:textStyle="italic|bold" android:textColor="@color/white" android:layout_marginTop="45dp" android:layout_marginLeft="150dp" android:layout_toRightOf="@+id/imgTikTok"/> <VideoView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="60dp" android:id="@+id/videoView_single" /> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:id="@+id/progressBar_single"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_marginBottom="56dp" android:layout_marginLeft="11dp" android:layout_alignParentBottom="true"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="Title" android:textSize="30dp" android:textStyle="bold" android:textColor="@color/white" android:id="@+id/txtTitle_single" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Description" android:textSize="15dp" android:textStyle="italic" android:textColor="@color/white" android:layout_below="@+id/txtTitle_single" android:id="@+id/txtDesc_single" /> </LinearLayout> </RelativeLayout> |
Step 13:
Create a new Image Vector in the drawable folder for showing that on the top of your video page (e.g. tiktok.xml)
Step 14:
Create a Model Class having constructors and getter setter methods of the content to be shown in the Video (e.g. Model_Video.java)
Java
package com.anas.gfgtiktokclone; public class Model_Video { String DESC, TITLE, URL; Model_Video() {} public Model_Video(String DESC, String TITLE, String url) { this.DESC = DESC; this.TITLE = TITLE; URL = url; } public String getDESC() { return DESC; } public void setDESC(String DESC) { this.DESC = DESC; } public String getTITLE() { return TITLE; } public void setTITLE(String TITLE) { this.TITLE = TITLE; } public String getUrl() { return URL; } public void setUrl(String url) { URL = url; }} |
Step 15:
Create an Adapter Class for mapping Firebase data to every single page data (e.g. Adapter_Video.java)
Java
package com.anas.gfgtiktokclone; import android.media.MediaPlayer;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ProgressBar;import android.widget.TextView;import android.widget.VideoView;import androidx.annotation.NonNull;import androidx.recyclerview.widget.RecyclerView;import com.firebase.ui.database.FirebaseRecyclerAdapter;import com.firebase.ui.database.FirebaseRecyclerOptions; public class Adapter_Video extends FirebaseRecyclerAdapter< Model_Video, Adapter_Video.Video_ViewHolder> { public Adapter_Video( @NonNull FirebaseRecyclerOptions<Model_Video> options) { super(options); } @Override protected void onBindViewHolder(@NonNull Video_ViewHolder holder, int position, @NonNull Model_Video model) { holder.setData(model); } @NonNull @Override public Video_ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.video_single, parent, false); return new Video_ViewHolder(view); } public class Video_ViewHolder extends RecyclerView.ViewHolder { VideoView videoView_single; TextView txtTitle_single, txtDesc_single; ProgressBar progressBar_single; public Video_ViewHolder(@NonNull View itemView) { super(itemView); videoView_single = itemView.findViewById( R.id.videoView_single); txtDesc_single = itemView.findViewById( R.id.txtDesc_single); txtTitle_single = itemView.findViewById( R.id.txtTitle_single); progressBar_single = itemView.findViewById( R.id.progressBar_single); } void setData(Model_Video model_obj) { videoView_single.setVideoPath( model_obj.getUrl()); txtTitle_single.setText(model_obj.getTITLE()); txtDesc_single.setText(model_obj.getDESC()); videoView_single.setOnPreparedListener( new MediaPlayer.OnPreparedListener() { @Override public void onPrepared(MediaPlayer mp) { progressBar_single.setVisibility( View.GONE); mp.start(); } }); videoView_single.setOnCompletionListener( new MediaPlayer.OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.start(); } }); } }} |
Step 16:
Create a new XML layout file (activity_main.xml)
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.viewpager2.widget.ViewPager2 android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/viewPager2" /> </LinearLayout> |
Step 17:
Create a new Activity file which is used to set the adapter to the ViewPager (e.g. MainActivity.java)
Java
package com.anas.gfgtiktokclone; import android.os.Bundle;import android.view.WindowManager;import androidx.appcompat.app.AppCompatActivity;import androidx.viewpager2.widget.ViewPager2;import com.firebase.ui.database.FirebaseRecyclerOptions;import com.google.firebase.database.FirebaseDatabase; public class MainActivity extends AppCompatActivity { ViewPager2 viewPager2; Adapter_Video adapter_video; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getWindow().setFlags( WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); viewPager2 = findViewById(R.id.viewPager2); FirebaseRecyclerOptions<Model_Video> options = new FirebaseRecyclerOptions .Builder<Model_Video>() .setQuery(FirebaseDatabase.getInstance() .getReference() .child("GFG_Tiktokclone"), Model_Video.class) .build(); adapter_video = new Adapter_Video(options); viewPager2.setAdapter(adapter_video); } @Override protected void onStart() { super.onStart(); adapter_video.startListening(); } @Override protected void onStop() { super.onStop(); adapter_video.stopListening(); }} |
