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"?> <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 android:layout_width="match_parent" android:layout_height="match_parent" 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 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 VideoActpublic 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___Lazyroar_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____Lazyroar_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____Lazyroar_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___Lazyroar_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:
