VideoView Full Screen Android Studio Portrait Mode

In this tutorial we will learn how to create full screen video in android studio using VideoView. We will create a full screen VideoView in portrait mode.

We will create a full screen VideoView in portrait mode. You also know about full screen portrait videos like TIK TOK or short videos on YouTube.

Full Screen Portrait VideoView In Android Studio

I captured a screenshot of this project which is full screen VideoView. See which is as below.

In the above screenshot you can see that I tried to create the same full screen VideoView as in other short video android apps. You will also learn how to create like, share, views, subscribe, comment and other layouts on the VideoView. So I think you are excited to learn this tutorial.

You know the famous TIK Tok app started short videos on their platform. After being banned in India there are many apps like that which plays short videos in full screen in android application as well as ios applications. All these play videos in full screen mode using portrait scale.

Complete Example of Full Screen VideoView Mode in Android Studio

Follow my steps as below. Follow my steps as below. For this we needed to create some classes and layout files which we are going to create further.

Add following dependencies

Following dependency is used to create a circular imageView. If you want to create the same layout as shown in above image then you can add this in your build.gradle file otherwise skip this.

implementation 'de.hdodenhof:circleimageview:3.1.0'

VideoView Layout same as in Above Screen

Following code has the layout as you see in the above example. Copy and paste in your videoView layout xml file.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:orientation="vertical">


        <VideoView
            android:id="@+id/videoView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_centerInParent="true"
            android:layout_gravity="center" />

        <ProgressBar
            android:id="@+id/progress_circular"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:visibility="visible" />

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:orientation="vertical"
            android:paddingLeft="5dp"
            android:paddingTop="5dp"
            android:paddingRight="15dp"
            android:paddingBottom="5dp">

            <ImageView
                android:id="@+id/img_likes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="5dp"
                android:src="@drawable/heart"
                android:textColor="@color/white"
                app:tint="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="5dp"
                android:text="12k"
                android:textColor="@color/white"
                android:textSize="14dp" />

            <ImageView
                android:id="@+id/img_views"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:padding="5dp"
                android:src="@drawable/ic_outline_eye"
                android:textColor="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="0dp"
                android:text="12M"
                android:textColor="@color/white"
                android:textSize="14dp" />

            <ImageView
                android:id="@+id/img_dislike"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:padding="5dp"
                android:src="@drawable/ic_outline_thumb_down"
                android:textColor="@color/white" />

            <ImageView
                android:id="@+id/img_comment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:padding="5dp"
                android:src="@drawable/ic_outline_comment"
                android:textColor="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="5dp"
                android:text="12k"
                android:textColor="@color/white"
                android:textSize="14dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="5dp"
                android:text="1k"
                android:textColor="@color/white"
                android:textSize="14dp"
                android:visibility="gone" />

            <ImageView
                android:id="@+id/img_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:padding="5dp"
                android:src="@drawable/ic_share"
                android:textColor="@color/white" />

        </androidx.appcompat.widget.LinearLayoutCompat>

        <TextView
            android:id="@+id/text_video_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/layout_subscribe"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="10dp"
            android:ellipsize="marquee"
            android:focusable="true"
            android:marqueeRepeatLimit="marquee_forever"
            android:scrollHorizontally="true"
            android:singleLine="true"
            android:text="This is the name if my name"
            android:textColor="@color/white"
            android:textSize="12dp" />

        <RelativeLayout
            android:id="@+id/layout_subscribe"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/image_single_video_user"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:src="@drawable/rakesh" />

            <TextView
                android:id="@+id/text_subscribe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:background="@drawable/subscribe_button_background_drawable"
                android:paddingLeft="20dp"
                android:paddingTop="6dp"
                android:paddingRight="20dp"
                android:paddingBottom="6dp"
                android:text="Subscribe"
                android:textAllCaps="false"
                android:textColor="@color/white"
                android:textSize="15dp"
                />

        </RelativeLayout>

    </RelativeLayout>
</layout>

Use VideoView as you can see in the xml code. This is used to load the video from the url or from the local database.

Please change the circle image with your drawable image that I used in this layout file. If there is any other icon or image that does not exist please change by your own by placing it in the desired location as shown in the layout file.

How to Set Video in VideoView

To play a video in VideoView from the URL in android full screen in portrait mode, use the following code and place it in your project class.

VideoView Methods

setVideoPath(videoURL) -> Set Video PATH or URL

setOnPreparedListener () – > is used to prepare the video.

mp.start() – > Used to start the Media Player

mp.setLooping(false) – > Video will play again and again after finish.

setOnCompletionListener() – > Execute after complete the video.

You can see more method or features. No need to create MediaPlayer seperately.

        binding.textVideoTitle.setText(model.getVideo_url());
                binding.videoView.setVideoPath(videoURL);
                binding.videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                    @Override
                    public void onPrepared(MediaPlayer mp) {
                        mp.start();
                        binding.progressCircular.setVisibility(View.GONE);
                        mp.setLooping(false);
                    }
                });
    
                //when video completed
                binding.videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
                    @Override
                    public void onCompletion(MediaPlayer mp) {
                        binding.videoView.stopPlayback();
                        binding.videoView.setVideoPath(videoURL);
                        binding.videoView.start();
    
                    }
                });

How we created Full Screen VideoView In this Android Tutorial

The Full screen VideoView is created using the layout file only. The java code is the only way to set the video path in the VideoView component. You can manage it according to your use.

Note : Please note that I used DataBinding in this project for better understanding. Hope you know about dataBinding in android if you don’t know you must learn it because this feature is the best feature in android studio which reduces the code length and provides better development.

It is not hard as you are thinking you have to put only one line in your gradle file after that all will be ok. So i recommend you please learn DataBinding first it will take only 10 minutes hardly.

Please comment if this tutorial is helpful to you even if there is any issue in this code.

Please learn more android and flutter tutorials which will improve your skills for better development.