How to Create Swipeable Videos Like Instagram Reels in Android?

As we know Swipeable Videos are being used in many social media platforms apps Like Youtube Shorts, Instagram Reels, etc. In this article, we are going to implement that only in an easy and informative way, we can add as many videos. It can be done in several different ways but today we are going to use ViewPager for that. ViewPager allows us to swipe up/down or left-right to see a new screen without using extra activity for that. So we can implement the swipeable videos by ViewPager2 and VideoAdapter you can add as many videos as you want. You can add VideoTitle, VideoDescription, and VideoURL also. A sample video is given below to get an idea about what we are going to do in this article.

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:

Add An implementation in the Gradle file for material design in the build.gradle file and sync project

implementation 'com.google.android.material:material:1.8.0'

Step 3:

Add one Style in res > values > themes > themes.xml 

XML

<!--  You can style name as Anything but Theme
      should be of your application only   -->
<style name="Screen_Full" parent="Theme.GfgApplication2">
        <item name="android:windowFullscreen">true</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="windowActionBar">false</item>
</style>

Step 4:

Add this style in the AndroidMainfest.xml file such that whenever the user opens the app it automatically redirects to that style. Also, add Internet permission for using video URLs.

XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:usesCleartextTraffic="true"
        android:theme="@style/Theme.GfgApplication2"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:theme="@style/Screen_Full"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Step 5:

Create One Lyout Resouce File For Video View By right-clicking on res > layout 

In this case, the file name is video.xml. You can choose any of your choices

XML

<?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_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <ProgressBar
        android:id="@+id/ProgreesVideo"
        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/VideoTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="5dp"
            android:paddingEnd="5dp"
            android:paddingTop="5dp"
            android:shadowColor="@color/black"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="15"
            android:textColor="@color/white"
            android:textSize="25sp"
            android:textStyle="bold"/>

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

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 6:

In the activity_main.xml file add one implementation of ViewPager2.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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:id="@+id/MainViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 7:

Create One java class and add videoURL, videoTitle, and VideoDescription to it 

Java

package com.android.gfgapplication2;

// IN THIS CASE NAME OF THE JAVA CLASS IS VideoAct
public class VideoAct {
    public String videoURL, videoTitle, VideoDescription;
}

Step 8:

Create Another Java Class For VideoAdapter and extends to extend to RecyclerView.Adapter class with the type parameter VideoAdapter.VideoViewHolder. After that right click and click on implement methods and add all the three implementations like that.

The Java Class Name is VideoAdapter.java

Java

package com.android.gfgapplication2;

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> {

    private List<VideoAct> videoActList;

    // creating consturctor
    public VideoAdapter(List<VideoAct> videoActList)
    {
        this.videoActList = videoActList;
    }

    @NonNull
    @Override
    public VideoViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
    {
        return new VideoViewHolder(
            LayoutInflater.from(parent.getContext()).inflate(
                // the layout that
                // we created above
                R.layout.video, parent, false));
    }

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

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

    static class VideoViewHolder extends RecyclerView.ViewHolder {

        VideoView videoView;
        TextView VideoTitle, videoDescp;
        ProgressBar ProgreesVideo;

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

            // getting all this from the
            // java file we created in above steps
            videoView = itemView.findViewById(R.id.videoView);
            VideoTitle = itemView.findViewById(R.id.VideoTitle);
            videoDescp = itemView.findViewById(R.id.videoDescp);
            ProgreesVideo = itemView.findViewById(R.id.ProgreesVideo);
        }

        void setDataVideo(VideoAct videoAct)
        {
            VideoTitle.setText(videoAct.videoTitle);
            videoDescp.setText(videoAct.VideoDescription);
            videoView.setVideoPath(videoAct.videoURL);
            videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                @Override
                public void onPrepared(MediaPlayer mediaPlayer)
                {
                    ProgreesVideo.setVisibility(View.GONE);
                    mediaPlayer.start();

                    // getting video ratio/screen ratio so that it can fix in screen
                    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();
                }
            });
        }
    }
}

Step 9:

Now go to MainActivity.java and create one array list to store the title, description, url and after that set adapter after you have done adding all the videos.

Java

package com.android.gfgapplication2;

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 videosViewPager = findViewById(R.id.MainViewPager);

        // creating array list
        List<VideoAct> videoActList = new ArrayList<>();

        VideoAct videoItems1 = new VideoAct();
        videoItems1.videoURL = "https:// cdn.discordapp.com/attachments/1011618287328698508/1094297434907230328/The_BEST_Advice_For_Learning_Data_Structures_and_Algorithms_Ft._Sandeep_Jain_Founder_of_GFG.mp4";
        videoItems1.videoTitle = "GFG KARLO HO JAAYEGA";
        videoItems1.VideoDescription = "Test1";
        videoActList.add(videoItems1);

        VideoAct videoItems2 = new VideoAct();
        videoItems2.videoURL = "https:// cdn.discordapp.com/attachments/1011618287328698508/1094292482734432436/GFG_Karlo_Ho_Jayega___GeeksforGeeks_Shorts.mp4";
        videoItems2.videoTitle = "Playing 2nd video";
        videoItems2.VideoDescription = "Test2";
        videoActList.add(videoItems2);

        VideoAct videoItems3 = new VideoAct();
        videoItems3.videoURL = "https:// cdn.discordapp.com/attachments/1011618287328698508/1094293553187926026/How_was_GFG_Built____GeeksforGeeks_shorts.mp4";
        videoItems3.videoTitle = "Playing 3rd video";
        videoItems3.VideoDescription = "Test3";
        videoActList.add(videoItems3);

        VideoAct videoItems5 = new VideoAct();
        videoItems5.videoURL = "https:// cdn.discordapp.com/attachments/1011618287328698508/1094293553187926026/How_was_GFG_Built____GeeksforGeeks_shorts.mp4";
        videoItems5.videoTitle = "Playing 4th video";
        videoItems5.VideoDescription = "Test4";
        videoActList.add(videoItems5);

        VideoAct videoItems4 = new VideoAct();
        videoItems4.videoURL = "https:// cdn.discordapp.com/attachments/1011618287328698508/1094292482734432436/GFG_Karlo_Ho_Jayega___GeeksforGeeks_Shorts.mp4";
        videoItems4.videoTitle = "Playing 5th video";
        videoItems4.VideoDescription = "Test5";
        videoActList.add(videoItems4);

        // here you can add more videos of your choice

        // adapter
        videosViewPager.setAdapter(new VideoAdapter(videoActList));
    }
}

Output: