Android: multiple vlc videolayouts in a constraint view

Question

I've got 8 security cams that I'd like to place side by side in 2x4 form in a fragment in android. I decided first to place the first VLCVideoLayout element and adjust it's size to take 50% of the width and 25% of the height:

<?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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".FragmentCams">

        <org.videolan.libvlc.util.VLCVideoLayout
            android:id="@+id/lineChart"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintHeight_percent="0.25"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.5" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

and thought, I'd try to copy/paste it 7 times and arrange them as I like. But even before I started copy-pasting and re-arranging it, I noticed that I unable to set the size of the vlcvideolayout element to 50%/25% of the size of the screen (it just fills up the entire screen).

I also tried to put them under <view></view>. This help setting the size, but the application keeps crashing once I navigate to the fragment.

Anyone succeeded placing multiple vlc's on a single fragment?

Answer 1

The reason that VLCVideoLayout's appear to ignore the height and width constraints you set for them turns out to be because they actually do ignore the values you set - see the code extract below from the VLCVideoLayout class:

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        setBackgroundColor(getResources().getColor(android.R.color.black));
        final ViewGroup.LayoutParams lp = getLayoutParams();
        lp.height = ViewGroup.LayoutParams.MATCH_PARENT;
        lp.width = ViewGroup.LayoutParams.MATCH_PARENT;
        setLayoutParams(lp);
    }

(Source: https://github.com/SteinerOk/libvlc-sdk-android/blob/master/libvlc-android/src/main/java/org/videolan/libvlc/util/VLCVideoLayout.java)

It can be seen from this that the VLCVideoLayout will always simply match its parents height and width.

Knowing this, you can put the layout inside a layout element that has the dominions you want - see below an example layout that is tested and successfully plays 3 RTSP streams in 3 separate VLCVideoLayout's sized as shown:

<?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"
    tools:context=".MainActivity">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linear1"
        android:layout_width="300dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/linear2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:orientation="vertical" >

        <org.videolan.libvlc.util.VLCVideoLayout
            android:id="@+id/videoLayout3"
            android:layout_width="300dp"
            android:layout_height="200dp"
            android:background="@color/design_default_color_error"
            android:visibility="visible" />

    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linear2"
        android:layout_width="300dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toBottomOf="@id/linear1"
        app:layout_constraintBottom_toTopOf="@id/linear3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:orientation="vertical" >

        <org.videolan.libvlc.util.VLCVideoLayout
            android:id="@+id/videoLayout4"
            android:layout_width="300dp"
            android:layout_height="200dp"
            android:background="@color/design_default_color_error"
            android:visibility="visible" />

    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linear3"
        android:layout_width="300dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toBottomOf="@id/linear2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:orientation="vertical" >

        <org.videolan.libvlc.util.VLCVideoLayout
            android:id="@+id/videoLayout5"
            android:layout_width="300dp"
            android:layout_height="200dp"
            android:background="@color/design_default_color_error"
            android:visibility="visible" />

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

Note, that while this definitely works and plays back video successfully I can't comment on the efficiency of putting linear layouts inside constrained layouts, given that the current advice it to use Contrained layouts over Linear for efficiency. You could experiment with nesting constrained layouts instead, although again nesting layouts may not be efficient. It does work, however...

Note also that using an overall linear layout, rather than the constrained layout, works also - again I can't comment on which is more efficient from performance and memory etc point of view as I have not explored further and compared.