Sunday, November 17, 2024
Google search engine
HomeLanguagesJavaHow to Build a Simple TikTok Clone Android App using Firebase?

How to Build a Simple TikTok Clone Android App using Firebase?

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 
    xmlns:tools="http://schemas.android.com/tools"
    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();
    }
}


Output:

RELATED ARTICLES

Most Popular

Recent Comments