How to create Swipeable Videos Like TikTok Using ViewPager2 in andriod studio

Hello friends today we will learn about How to create Swipeable Videos Like TikTok Using ViewPager2 in andriod studio.

Today video is swiped in many apps whether it is video status or video player or video editor.We can implement it in our project by following some steps.

Step 1: First of all we will do a project and implement this method in it or use it wherever you need it.As soon as we create the project, we will see two files activity_main and MainActivity.java.

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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/viewPager"/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.swipablevideoexample;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ViewPager2 viewPager2=findViewById(R.id.viewPager);
        List<Model>listData=new ArrayList<>();

        Model model =new Model();
        model.videoUrl="https://www.infinityandroid.com/videos/video1.mp4";
        model.videoTitle="First";
        model.videoDescription="This is a first Video";
        listData.add(model);

        Model model2 =new Model();
        model2.videoUrl="https://setmystatus.com/video/tujh-mein-rab-dikhta-hein-sad-version";
        model2.videoTitle="First";
        model2.videoDescription="This is a first Video";
        listData.add(model2);

        Model model3 =new Model();
        model3.videoUrl="https://setmystatus.com/video/hum-to-deewane-status-video/";
        model3.videoTitle="First";
        model3.videoDescription="This is a first Video";
        listData.add(model3);

        Model model4 =new Model();
        model4.videoUrl="https://setmystatus.com/video/hum-to-deewane-status-video/";
        model4.videoTitle="First";
        model4.videoDescription="This is a first Video";
        listData.add(model4);


        Model model6 =new Model();
        model6.videoUrl="https://setmystatus.com/video/hum-to-deewane-status-video/";
        model6.videoTitle="First";
        model6.videoDescription="This is a first Video";
        listData.add(model6);


        Model model7 =new Model();
        model7.videoUrl="https://setmystatus.com/video/hum-to-deewane-status-video/";
        model7.videoTitle="First";
        model7.videoDescription="This is a first Video";
        listData.add(model7);

        Model model8 =new Model();
        model8.videoUrl="https://setmystatus.com/video/hum-to-deewane-status-video/";
        model8.videoTitle="First";
        model8.videoDescription="This is a first Video";
        listData.add(model8);
        viewPager2.setAdapter(new VideoAdapter(listData));
    }
}

Here we have used a list in which we have used model class as parameter.We will add all title description and url inside Model class.And we will set the viewPager in the video adapter whose code is given below.

Model.java

package com.example.swipablevideoexample;

public class Model {
    public String videoUrl,videoTitle,videoDescription;
}

VideoAdapter

package com.example.swipablevideoexample;

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 java.util.List;

public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.VideoViewHolder> {

     List<Model> data;

    public VideoAdapter(List<Model> data) {
        this.data = data;
    }

    @NonNull
    @Override
    public VideoViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new VideoViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.video_player, parent, false));

    }

    @Override
    public void onBindViewHolder(@NonNull VideoViewHolder holder, int position) {
        holder.setVideoData(data.get(position));
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    static class VideoViewHolder extends RecyclerView.ViewHolder {
        VideoView videoView;
        TextView title, Description;
        ProgressBar progressBar;

        public VideoViewHolder(@NonNull View itemView) {
            super(itemView);

            videoView = itemView.findViewById(R.id.videoView);
            title = itemView.findViewById(R.id.title);
            Description = itemView.findViewById(R.id.description);
            progressBar = itemView.findViewById(R.id.progressBar);
        }

        void setVideoData(Model model) {
            title.setText(model.videoTitle);
            Description.setText(model.videoDescription);
            videoView.setVideoPath(model.videoUrl);
            videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                @Override
                public void onPrepared(MediaPlayer mediaPlayer) {
                    progressBar.setVisibility(View.GONE);
                    mediaPlayer.start();
                    float videoRatio = mediaPlayer.getVideoWidth() / (float) mediaPlayer.getVideoHeight();
                    float screenRatio = videoView.getWidth() / (float) videoView.getHeight();
                    float scale = videoRatio / screenRatio;
                    if (scale >= 1f) {
                        videoView.setScaleX(scale);
                    } else {
                        videoView.setScaleY(1f / scale);
                    }
                }
            });

            videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
                @Override
                public void onCompletion(MediaPlayer mediaPlayer) {
                    mediaPlayer.start();
                }
            });
        }

    }


}

video_player

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/black">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="30dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="30dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="5dp"
            android:paddingEnd="5dp"
            android:paddingTop="5dp"
            android:shadowColor="@android:color/black"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="15"
            android:textColor="@android:color/white"
            android:textSize="25sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="5dp"
            android:paddingEnd="5dp"
            android:paddingTop="5dp"
            android:shadowColor="@android:color/black"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="15"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

And in the last we will give internet permission in manifest
Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.swipablevideoexample">
<uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SwipableVideoExample">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Thank You