SoFunction
Updated on 2025-04-07

Android custom videoview imitating Douyin interface

This article shares the specific code of Android custom videoview imitating Douyin interface for your reference. The specific content is as follows

1. Effect picture

The interface effect is exactly the same as Douyin, and it can be customized. Please define what page you need.

2. Custom videoview

package .myapplication20;
 
 
import ;
import ;
import ;
 
 
/**
  * Author: created by Jarchie
  * Time: 2020/12/7 15:05:57
  * Email: jarchie520@
  * Description: Custom width and height VideoView
  */
public class CusVideoView extends VideoView {
    public CusVideoView(Context context) {
        super(context);
    }
 
    public CusVideoView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    public CusVideoView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        (widthMeasureSpec, heightMeasureSpec);
        int width = getDefaultSize(getWidth(), widthMeasureSpec);
        int height = getDefaultSize(getHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }
}

interface

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:andro
    xmlns:app="/apk/res-auto"
    xmlns:tools="/tools"
    android:
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <ImageView
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="false"
        android:focusable="false"
        android:scaleType="centerCrop"
        android:visibility="visible" />
 
    <ImageView
        android:
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:alpha="0"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/play_arrow" />
 
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="60dp"
        android:orientation="vertical">
 
        <TextView
            android:
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="5dp"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            tools:text="Test test data hahahaha\nThere are a few garbage at home and two garbage" />
 
 
    </LinearLayout>
 
    <.
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="false"
        android:focusable="false" />
</RelativeLayout>

<vector android:alpha="0.61" android:height="24dp"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:andro>
    <path android:fillColor="#99ffffff" android:pathData="M8,5v14l11,-7z"/>
</vector>

5. Set the address on the main interface. Note that this demo uses local video files, and the file is stored in the.../res/raw folder. Please obtain it yourself.

package .myapplication20;
 
import ;
import ;
 
 
import ;
import ;
import ;
import ;
import ;
import ;
import ;
 
import ;
import ;
 
/**
  * Author: JArchie
  * Source code reference address: /JArchie/TiktokDemo
  */
 
public class MainActivity extends AppCompatActivity {
    CusVideoView mVideoView;
    private int[] videos = {.v1, .v2, };
    TextView mTitle;
 
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        (savedInstanceState);
        setContentView(.activity_main);
 
        mVideoView = findViewById();
        mTitle = findViewById();
 
        String url = "://" + getPackageName() + "/" + videos[1];
        ("TAG", "video_onCreate: " + url);
 
        ((url));
        ("@Wang Yan\n Let's dance together");
    }
 
 
    @Override
    protected void onStart() {
        ();
        playVideo();
    }
 
    @Override
    protected void onDestroy() {
        ();
        releaseVideo();
    }
 
    //Play    private void playVideo() {
 
        ("TAG", "play_video");
 
        // View itemView = (0);
        final CusVideoView mVideoView = findViewById();
        final ImageView mPlay = findViewById();
        final ImageView mThumb = findViewById();
        final MediaPlayer[] mMediaPlayer = new MediaPlayer[1];
        ();
 
        (new () {
            @Override
            public boolean onInfo(MediaPlayer mp, int what, int extra) {
                mMediaPlayer[0] = mp;
                (true);
                ().alpha(0).setDuration(200).start();
                return false;
            }
        });
 
        //Pause control        (new () {
            boolean isPlaying = true;
 
            @Override
            public void onClick(View v) {
                if (()) {
                    ().alpha(1f).start();
                    ();
                    isPlaying = false;
                } else {
                    ().alpha(0f).start();
                    ();
                    isPlaying = true;
                }
            }
        });
    }
 
    //release    private void releaseVideo() {
 
        ("TAG", "releaseVideo_video");
 
        //  View itemView = (index);
        final CusVideoView mVideoView = findViewById();
        final ImageView mThumb = findViewById();
        final ImageView mPlay = findViewById();
        ();
        ().alpha(1).start();
        ().alpha(0f).start();
    }
 
 
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.