Search code examples
androidxmlandroid-layoutandroid-videoview

Show custom view over VideoView


I am trying to show a custom view on top of a VideoView both should be full screen, with the custom layout showing on top of the VideoView, but at the moment my custom view shows on the left of the screen and the VideoView on the right.

This is what I am trying to achieve. Show a custom layout(full screen) on top of the video(also full screen)

But at the moment, this is how it's shown: Custom view on the left and Video to the right

How can I make my custom view to show on top of the VideoView?

These are my xml layouts and Custom View:

activity_fullscreen.xml

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

    <!-- This FrameLayout insets its children based on system windows using
         android:fitsSystemWindows. -->

    <com.buffup.sdk.ui.BuffView
        android:id="@+id/buff_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <VideoView
            android:id="@+id/video"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:keepScreenOn="true"
            android:textSize="50sp"
            android:textStyle="bold" />

    </com.buffup.sdk.ui.BuffView>

</FrameLayout>

test.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

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

</FrameLayout>

buff_question.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/dark_bg"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/question_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|start"
        android:padding="18dp"
        android:textColor="@color/test_color_light"
        android:textStyle="bold"
        android:text="Where do you think Jorge \n will put this penalty? I'd\n go left here! " />

    <FrameLayout
        android:layout_width="32dp"
        android:layout_height="32dp">

        <ProgressBar
            android:id="@+id/question_time_progress"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:indeterminateDuration="1"
            android:max="100"
            android:progress="0" />

        <TextView
            android:id="@+id/question_time"
            android:layout_width="26dp"
            android:layout_height="26dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:textColor="@color/test_color_light"
            android:textStyle="bold"
            tools:text="14" />

    </FrameLayout>

</LinearLayout>

BuffView.kt

class BuffView(context: Context, attrs: AttributeSet): LinearLayout(context, attrs) {

    init {
        inflate(context, R.layout.test, this)
    }
}


Solution

  • Why don't you take VideoView out of BuffView like this and try ?

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    tools:context=".FullscreenActivity">
    
    <!-- This FrameLayout insets its children based on system windows using
         android:fitsSystemWindows. -->
    
      <VideoView
            android:id="@+id/video"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:keepScreenOn="true"
            android:textSize="50sp"
            android:textStyle="bold" />
      <com.buffup.sdk.ui.BuffView
        android:id="@+id/buff_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>