Hello Developer, In this blog I will give best video player custom control design Android Studio. If you are looking for best ui us xml design for videoview or ExoPlayer or SurfaceView then You are in The right Place.
.png)
vp_custom_control
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@android:color/transparent"
android:id="@+id/small_cl"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="@android:color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:alpha="0.5"/>
<LinearLayout
android:id="@+id/one"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@android:color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_height="wrap_content"
tools:ignore="UseCompoundDrawables">
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:padding="4dp"
android:layout_marginRight="4dp"
android:layout_marginLeft="3dp"
android:id="@+id/back_img"
android:background="@drawable/ripple"
android:src="@drawable/backbutton"
app:tint="@color/white" />
<TextView
android:id="@+id/video_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:padding="6dp"
android:layout_weight="1"
android:textColor="@color/white"
android:text="This is the title of the video"/>
<LinearLayout
android:layout_width="wrap_content"
android:gravity="right"
android:layout_height="wrap_content">
<Switch
android:id="@+id/autoplay"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="8dp"
android:paddingBottom="2dp"
android:paddingLeft="8dp"
android:paddingTop="2dp"
android:trackTint="@color/white"
tools:ignore="UseSwitchCompatOrMaterialXml" />
<ImageView
android:layout_width="33dp"
android:layout_height="33dp"
android:layout_marginRight="18dp"
android:padding="5dp"
android:layout_marginLeft="3dp"
android:id="@+id/subtitle_img"
android:background="@drawable/ripple"
android:src="@drawable/ic_baseline_subtitles_24"/>
<ImageView
android:layout_width="33dp"
android:layout_height="33dp"
android:layout_marginRight="20dp"
android:padding="5dp"
android:id="@+id/track_img"
android:background="@drawable/ripple"
android:src="@drawable/ic_audiotrack_white"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/two"
android:layout_width="match_parent"
android:layout_height="44dp"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="60dp"
android:layout_height="match_parent"
android:src="@drawable/prev_next"
android:padding="5dp"
android:layout_marginRight="10dp"
android:alpha="1"
android:background="@drawable/ripple"
android:id="@+id/play_prev"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="5dp"
android:scaleType="fitXY"
android:src="@drawable/ic_play_arrow"
android:visibility="gone"
android:id="@+id/play"/>
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="5dp"
android:scaleType="fitXY"
android:src="@drawable/ic_pause_white"
android:id="@+id/pause"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="60dp"
android:layout_height="match_parent"
android:src="@drawable/prev_next"
android:layout_marginLeft="10dp"
android:background="@drawable/ripple"
android:alpha="1"
android:rotation="180"
android:padding="5dp"
android:id="@+id/play_next"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:id="@+id/four"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginRight="15dp"
android:layout_marginBottom="70dp">
<ImageView
android:id="@+id/speed_video"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ripple"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:padding="2dp"
android:src="@drawable/ic_speed" />
<ImageView
android:id="@+id/brightness_button"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ripple"
android:layout_marginRight="15dp"
android:padding="2dp"
android:src="@drawable/ic_brightness_white" />
<ImageView
android:id="@+id/mute_unmute"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ripple"
android:layout_marginRight="15dp"
android:padding="2dp"
android:src="@drawable/ic_volume_on" />
<ImageView
android:id="@+id/rotation"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ripple"
android:layout_marginRight="15dp"
android:padding="3dp"
android:src="@drawable/ic_rotation" />
</LinearLayout>
<LinearLayout
android:id="@+id/three"
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:orientation="vertical"
android:layout_height="60dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00:00"
android:textColor="@color/white"
android:layout_marginLeft="10dp"
android:layout_marginRight="4dp"
android:layout_marginTop="5dp"
android:textSize="14sp"
android:textStyle="bold"
android:id="@+id/cv_duration"/>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center|left"
android:layout_height="match_parent"
android:layout_weight="1">
<SeekBar
android:id="@+id/video_seekbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="5dp"
android:layout_marginBottom="10dp"
android:progressDrawable="@drawable/custom_trak"
android:thumb="@drawable/custom_thumb" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:00:00"
android:textColor="@color/white"
android:layout_marginRight="8dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="5dp"
android:textSize="14sp"
android:textStyle="bold"
android:id="@+id/fv_duration"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="10dp"
android:src="@drawable/ic_crop_white"
android:layout_marginLeft="8dp"
android:id="@+id/led_mode"/>
<ImageView
android:id="@+id/full_Screen"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ripple"
android:layout_marginRight="10dp"
android:src="@drawable/ic_fullscreen"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginBottom="80dp"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="@+id/sub_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subtitle Off"
android:textColor="@color/white"
android:textStyle="bold"
android:visibility="gone"
tools:ignore="HardcodedText" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="100dp"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/locked_layout"
android:layout_width="45dp"
android:layout_height="45dp"
android:visibility="gone"
android:background="@drawable/ripple"
android:layout_marginLeft="40dp"
android:padding="2dp"
android:src="@drawable/unlock_icon"
tools:ignore="RtlHardcoded" />
<ImageView
android:id="@+id/lock_layout"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ripple"
android:layout_marginLeft="40dp"
android:layout_marginRight="15dp"
android:padding="4dp"
android:src="@drawable/lock_icon" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</RelativeLayout>Here is the uses of this custom layout. SO I have created a simple VidewView for this.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<include layout="@layout/vp_custom_control"/>
</RelativeLayout>
</LinearLayout>Here are the drawable icons xml files.
backbutton.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
custom_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:thickness="4dp"
android:useLevel="false"
android:tint="#0091EA">
<corners android:radius="8dp"/>
<solid
android:color="#0091EA" />
<size
android:width="10dp"
android:height="15dp" />
</shape>
custom_trak.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
android:gravity="center_vertical|fill_horizontal">
<shape android:shape="rectangle"
android:tint="@color/white">
<corners android:radius="8dp"/>
<size android:height="4dp" />
<solid android:color="@color/white" />
</shape>
</item>
<item android:id="@android:id/progress"
android:gravity="center_vertical|fill_horizontal">
<scale android:scaleWidth="100%">
<selector>
<item android:state_enabled="false"
android:drawable="@android:color/transparent" />
<item>
<shape android:shape="rectangle"
android:tint="#0091EA">
<corners android:radius="8dp"/>
<size android:height="4dp" />
<solid android:color="#0091EA" />
</shape>
</item>
</selector>
</scale>
</item>
</layer-list>
ic_audiotrack.white.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M12,3v9.28c-0.47,-0.17 -0.97,-0.28 -1.5,-0.28C8.01,12 6,14.01 6,16.5S8.01,21 10.5,21c2.31,0 4.2,-1.75 4.45,-4H15V6h4V3h-7z"/>
</vector>
ic_baseline_subtitle_24.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M20,4L4,4c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2zM4,12h4v2L4,14v-2zM14,18L4,18v-2h10v2zM20,18h-4v-2h4v2zM20,14L10,14v-2h10v2z"/>
</vector>
ic_brightness_white.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M20,15.31L23.31,12 20,8.69V4h-4.69L12,0.69 8.69,4H4v4.69L0.69,12 4,15.31V20h4.69L12,23.31 15.31,20H20v-4.69zM12,18V6c3.31,0 6,2.69 6,6s-2.69,6 -6,6z"/>
</vector>
ic_crop_white.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M17,15h2V7c0,-1.1 -0.9,-2 -2,-2H9v2h8v8zM7,17V1H5v4H1v2h4v10c0,1.1 0.9,2 2,2h10v4h2v-4h4v-2H7z"/>
</vector>
ic_fullscreen.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M5,16h3v3h2v-5L5,14v2zM8,8L5,8v2h5L10,5L8,5v3zM14,19h2v-3h3v-2h-5v5zM16,8L16,5h-2v5h5L19,8h-3z"/>
</vector>
ic_pause_white.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M6,19h4L10,5L6,5v14zM14,5v14h4L18,5h-4z"/>
</vector>
ic_play_arrow.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M8,5v14l11,-7z"/>
</vector>
ic_rotation.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M16.48,2.52c3.27,1.55 5.61,4.72 5.97,8.48h1.5C23.44,4.84 18.29,0 12,0l-0.66,0.03 3.81,3.81 1.33,-1.32zM10.23,1.75c-0.59,-0.59 -1.54,-0.59 -2.12,0L1.75,8.11c-0.59,0.59 -0.59,1.54 0,2.12l12.02,12.02c0.59,0.59 1.54,0.59 2.12,0l6.36,-6.36c0.59,-0.59 0.59,-1.54 0,-2.12L10.23,1.75zM14.83,21.19L2.81,9.17l6.36,-6.36 12.02,12.02 -6.36,6.36zM7.52,21.48C4.25,19.94 1.91,16.76 1.55,13L0.05,13C0.56,19.16 5.71,24 12,24l0.66,-0.03 -3.81,-3.81 -1.33,1.32z"/>
</vector>
ic_speed.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M20.38,8.57l-1.23,1.85a8,8 0,0 1,-0.22 7.58L5.07,18A8,8 0,0 1,15.58 6.85l1.85,-1.23A10,10 0,0 0,3.35 19a2,2 0,0 0,1.72 1h13.85a2,2 0,0 0,1.74 -1,10 10,0 0,0 -0.27,-10.44zM10.59,15.41a2,2 0,0 0,2.83 0l5.66,-8.49 -8.49,5.66a2,2 0,0 0,0 2.83z"/>
</vector>
ic_volume_on.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M3,9v6h4l5,5L12,4L7,9L3,9zM16.5,12c0,-1.77 -1.02,-3.29 -2.5,-4.03v8.05c1.48,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z"/>
</vector>
lock_icon.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM15.1,8L8.9,8L8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2z"/>
</vector>
prev_next.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M6,6h2v12L6,18zM9.5,12l8.5,6L18,6z"/>
</vector>
ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="@android:integer/config_shortAnimTime"
android:color="#e0e0e0">
<item android:id="@android:id/mask">
<shape android:shape="rectangle" >
<solid android:color="@android:color/holo_green_light" />
</shape>
</item>
</ripple>
unlock_icon.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M12,17c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6h1.9c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM18,20L6,20L6,10h12v10z"/>
</vector>Thank You for visiting our blog.
.png)
.png)
.png)
.png)
.png&description=Best Video Player Custom Control Layout UI UX Design Android Studio | Custom Control VideoView Exoplayer SurfaceView XML Android Studio){kind=link}
0 Comments