Android：如何实现 Tik Tok 滑动 ViewPager2 功能？

Question

How to implement the Tik Tok swipe top or bottom functionality of a video using the ViewPager2 Java component for Android Studio 2020.3.1.25? Thanks in advance.

Answer 1

This is how to implement the Tik Tok swipe top or bottom functionality of a video using the ViewPager2 Java component for Android Studio. Create a new project, empty activity, and the following files are to be created or modified (under Manifests folder) AndroidManifest.xml, (under the Java folder and under com.example.ultrahottvtiktokswipe2videoversion) MainActivity.java, VideoAdapter.java, VideoObject.java, (under the res and under the layout folder) activity_main.xml, and video_container.xml. Tested with an android OS 10 and Android Studio 2020.3.1.25. Happy coding!

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.ultrahottvtiktokswipe2videoversion">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <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.UltraHotTVtiktokswipe2videoVersion">
        <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>

MainActivity.java

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);

        // now we will pass video url name and description from video object to adapter

        final ViewPager2 viewPager2 = findViewById(R.id.viewPager);

        List<VideoObject> videoObjects = new ArrayList<>();

        VideoObject videoObject1 = new VideoObject("https://ultrahot.tv/videos/2020/12/15/Y64Xp6tSdDo8qmUmtwaG.mp4", "Taz the Doggy Gives Paws and Rolls Over for a Treat", "Bsenji Doggy video");
        videoObjects.add(videoObject1);

        VideoObject videoObject2 = new VideoObject("https://ultrahot.tv/videos/2020/12/16/m4PGMS6thBbirSvow6ZC.mp4", "LambChop Gets a Treat", "French Bulldog Doggy video");
        videoObjects.add(videoObject2);

        viewPager2.setAdapter(new VideoAdapter(videoObjects));
    }
}

VideoAdapter.java

import android.annotation.SuppressLint;
import android.media.MediaPlayer;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.VideoView;

import java.util.List;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

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

    private List<VideoObject> videoObjects;

    public VideoAdapter(List<VideoObject> videoObjects) {
        this.videoObjects = videoObjects;
    }

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

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

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

static class VideoViewHolder extends RecyclerView.ViewHolder
{
    VideoView videoView;
    TextView videoTitle, videoDescription;
    ProgressBar progressBar;

    public VideoViewHolder(@NonNull View itemView){
        super(itemView);
        videoView = itemView.findViewById(R.id.videoView);
        videoTitle = itemView.findViewById(R.id.videoTitle);
        videoDescription = itemView.findViewById(R.id.videoDescription);
        progressBar = itemView.findViewById(R.id.progressBar);
    }

    @SuppressLint("ClickableViewAccessibility")
    void setVideoObjects(final VideoObject videoObjects)
    {
        videoTitle.setText(videoObjects.getVideoTitle());
        videoDescription.setText(videoObjects.getVideoDescription());
        videoView.setVideoPath(videoObjects.getVideoURL());

        videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {

            @Override
            public void onPrepared(MediaPlayer mediaPlayer) {
                progressBar.setVisibility(View.GONE);
                mediaPlayer.start();
            }
        });

        // for play and pause
        videoView.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
               if(videoView.isPlaying())
               {
                   videoView.pause();
                   return false;
               }
               else {
                   videoView.start();
                   return false;
               }
            }
        });

    }
}

}

VideoObject.java

public class VideoObject {

    //here we need video url, name, and description

    public String videoURL, videoTitle, videoDescription;

    public VideoObject(String videoURL, String videoTitle, String videoDescription) {
        this.videoURL = videoURL;
        this.videoTitle = videoTitle;
        this.videoDescription = videoDescription;
    }

    public String getVideoURL() {
        return videoURL;
    }

    public String getVideoTitle() {
        return videoTitle;
    }

    public String getVideoDescription() {
        return videoDescription;
    }

}

activity_main.xml

<?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:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</androidx.viewpager2.widget.ViewPager2>

</androidx.constraintlayout.widget.ConstraintLayout>

video_container.xml

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

    <VideoView android:layout_width="fill_parent"
        android:id="@+id/videoView"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true">
    </VideoView>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />

    <TextView
        android:id="@+id/videoTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingEnd="5dp"
        android:paddingStart="5dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        android:layout_above="@+id/videoDescription"
        android:textStyle="bold"
        />

    <TextView
        android:id="@+id/videoDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingEnd="5dp"
        android:paddingStart="5dp"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:layout_alignParentBottom="true"
        android:textStyle="italic"
        />
</RelativeLayout>