VideoView Custom Controls Video player App in Android Studio Part 10

In this blog, I am going to add custom controls in Video Player Activity 
So let's start.

You can download All icons Here

1. create a layout name it like custom_controls and after that add this code in custom_controls.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">


    <LinearLayout
        android:id="@+id/videoView_one_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@+id/videoView_go_back"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_weight="0"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_baseline_keyboard_backspace_24" />

        <TextView
            android:id="@+id/videoView_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:maxLines="2"
            android:text="@string/long_text"
            android:textColor="@color/white" />

        <ImageButton
            android:id="@+id/videoView_more"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_weight="0"
            android:background="@android:color/transparent"
            android:src="@drawable/menu_more" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/videoView_two_layout"
        android:layout_width="wrap_content"
        android:layout_height="180dp"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="30dp"
        android:orientation="vertical"
        android:visibility="visible"
        app:layout_constraintBottom_toTopOf="@id/videoView_four_layout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/videoView_one_layout">


        <ImageView
            android:id="@+id/videoView_brightness_image"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginStart="2dp"
            android:layout_marginLeft="2dp"
            android:layout_marginBottom="7dp"
            android:layout_weight="0"
            android:src="@drawable/netflix_brightness_four" />

        <SeekBar
            android:id="@+id/videoView_brightness"
            android:layout_width="130dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="-50dp"
            android:layout_marginLeft="-50dp"
            android:layout_weight="1"
            android:max="255"
            android:progress="150"
            android:progressBackgroundTint="@color/white"
            android:progressTint="@color/red"
            android:rotation="270"
            android:scaleY="3"
            android:thumb="@null"
            tools:targetApi="lollipop" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/videoView_three_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.3" />

        <ImageButton
            android:id="@+id/videoView_rewind"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_rewind" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />


        <ImageButton
            android:id="@+id/videoView_play_pause_btn"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@android:color/transparent"
            android:src="@drawable/netflix_pause_button" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />


        <ImageButton
            android:id="@+id/videoView_forward"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_forward" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.3" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/videoView_four_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent">


        <LinearLayout
            android:id="@+id/videoView_four_one_child_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="8dp">

            <SeekBar
                android:id="@+id/videoView_seekbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:progress="50"
                android:progressBackgroundTint="@color/white"
                android:progressTint="@color/red"
                android:thumb="@drawable/custom_thumb"
                tools:targetApi="lollipop" />

            <TextView
                android:id="@+id/videoView_endtime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="@string/_00_00_00"
                android:textColor="@color/white"
                android:textSize="17sp" />

        </LinearLayout>


        <LinearLayout
            android:id="@+id/videoView_four_two_child_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="8dp">

            <LinearLayout
                android:id="@+id/videoView_lock_screen"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="horizontal"
                android:padding="10dp"
                android:theme="@style/MyRipple">


                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginRight="5dp"
                    android:background="@android:color/transparent"
                    android:src="@drawable/netflix_unlock" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@android:color/transparent"
                    android:text="@string/lock"
                    android:textColor="@color/white"
                    android:textSize="12sp" />

            </LinearLayout>


            <LinearLayout
                android:id="@+id/videoView_track"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="horizontal"
                android:padding="10dp"
                android:theme="@style/MyRipple">


                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginRight="5dp"
                    android:background="@android:color/transparent"
                    android:src="@drawable/netflix_audio_subtitles" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@android:color/transparent"
                    android:text="@string/audio_sub"
                    android:textColor="@color/white"
                    android:textSize="12sp" />

            </LinearLayout>


            <LinearLayout
                android:id="@+id/videoView_rotation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="horizontal"
                android:padding="10dp"
                android:theme="@style/MyRipple">


                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginRight="5dp"
                    android:background="@android:color/transparent"
                    android:src="@drawable/ic_rotation" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@android:color/transparent"
                    android:text="@string/rotate"
                    android:textColor="@color/white"
                    android:textSize="12sp" />

            </LinearLayout>


        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/video_five_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|bottom"
        android:orientation="vertical"
        android:padding="8dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent">

        <LinearLayout
            android:id="@+id/video_five_child_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/white_round"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="14dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:src="@drawable/netflix_lock_black" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/unlock_controls"
                android:textColor="@color/black"
                android:textStyle="bold" />


        </LinearLayout>

        <TextView
            android:id="@+id/videoView_lock_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="5dp"
            android:text="@string/screen_locked"
            android:textColor="@color/white"
            android:textSize="13sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/videoView_lock_text_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tap_to_unlock"
            android:textColor="@color/light_white"
            android:textSize="10sp" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

2.Create a custom_thumb in drawable and add this code

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="oval">
            <solid android:color="@color/red"/>
            <size
                android:height="22dp"
                android:width="22dp"/>
        </shape>
    </item>
    
</layer-list>

3.Create a white_round in drawable and add this code

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

    <solid android:color="@color/white"/>
    <corners android:radius="50dp"/>

</shape>

4.Create a style and name it like MyRipple in themes and add this code

<style name="MyRipple">
    <item name="colorControlHighlight">@color/ripple_color</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

5. add this to your string.xml

<string name="long_text">thor 2 full movie download in hindi 720p thor 2 full movie download in hindi 720p thor 2 full movie download in hindi 720p thor 2 full movie download in hindi 720p</string>
<string name="audio_sub">Audio &amp; Subtitle </string>
<string name="lock">Lock</string>
<string name="speed_1x">Speed(1x)</string>
<string name="rotate">Rotate</string>
<string name="tap_to_unlock">Tap to Unlock</string>
<string name="screen_locked">Screen Locked</string>
<string name="unlock_controls">Unlock Controls?</string>
<string name="folder_name">Folder Name</string>
<string name="_10_videos">10 videos</string>
<string name="_1_00gb">1.00Gb</string>
<string name="_00_00_00">00:00:00</string>
<string name="search">Search file name</string>


<string name="open">open</string>
<string name="close">close</string>
<string name="about_us">About us</string>
<string name="version">Version</string>
<string name="_1_0_1">1.0.1</string>
<string name="direct_n_app">Direct\nApp</string>
<string name="app_n_link">App\nLink</string>
<string name="share">Share</string>
<string name="rename">Rename</string>
<string name="title">Name:</string>
<string name="path">Path:</string>
<string name="size">Size:</string>
<string name="duration">Duration:</string>
<string name="resolution">Resolution:</string>

6.Open your video_player_activity.xml and add this code 

<?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"
    android:keepScreenOn="true"
    tools:context=".activity.VideoPlayer">

    <RelativeLayout
        android:id="@+id/zoom_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <VideoView
            android:id="@+id/video_view"
            android:keepScreenOn="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

    <include
        layout="@layout/custom_controls"/>


</androidx.constraintlayout.widget.ConstraintLayout>

Watch Full Video Tutorials