Develop Reference

Android: multiple vlc videolayouts in a constraint view

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?

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.

android listView clipping and unable to scroll

I've a fragment file with a listview in it, as my number of items increase, they are populating beyond the screen but I'm unable to scroll the listView to bring the hidden items up. Most of the tutorials are following LinearLayout etc. but I want to stay within the modern constrain layout mode.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/userList"
android:layout_width="409dp"
android:layout_height="729dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

There is a similar question HERE where the poster indicated it was working fine all along, but needed more elements to scroll.
If that is not the case, try setting this in your ListView
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
I haven't tested it, but some people reported success so give it a try.

How can I make a recyclerView to take up to half the screen(max) in android constraint layout?

I have a screen that contains 2 views, a map(top) and a recycler(bottom)
The rules are simple .
the recycler view is allowed to extend up to the middle of the screen, if more space is needed then it should scroll instead, the map will occupy the rest of the space, Of course if the recycler has less elements then it should shrink leaving more space for the map ..
I am trying to achieve this using constraint layout, also I am trying to avoid solutions that involved calculations .
Check image below for more information on what I am trying to achieve :
Here is my 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:background="#color/white"
tools:context="com.qmic.itraffic.ui.activities.crowdsourcing.CrowdSourceReportingDetailsActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/halfScreenGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/categories"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/manatee"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/categories"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/halfScreenGuideline" />
</androidx.constraintlayout.widget.ConstraintLayout>
My Question is can I achieve this behaviour using xml only (constraint layout )?or I would need to do calculation ?

Could you please try the following code in your recyclerview xml
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
Change the height to wrap content and add the second the line. This way the recyclerview should have the height same as its content but never exceeds the guideline/contraint.

The answer by Akhil Soman is correct but missing one thing
app:layout_constraintVertical_bias="1.0"
Without it the RecyclerView was floating above the bottom of the screen leaving an empty space .
for reference here is the complete answer
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:clipToPadding="false"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/halfScreenGuideline"
app:layout_constraintVertical_bias="1.0" />
Also the suggestion by the Jaymin seems interesting and can fix this problem, but I haven't applied it because I already used Akil solution .

Divide the screen into SurfaceView and xml layout

MyActivity has setContentView(MySurfaceView) that covers all the screen.
I would like to divide the screen into two parts: the first 2/3 of the screen must be occupied by MySurfaceView and the last 1/3 by my_activity_layout.xml.
How can I do that? Thanks.
EDIT
Thanks for your answers, but I don't have how to apply them in my case. To be clear, these are my objects:

Solution:
To attach an xml file in your layout, you can make use of the <include> tag.
Reusing layouts is particularly powerful as it allows you create reusable complex layouts. For example, a yes/no button panel, or custom progress bar with description text. More
You can have a functionality as shown in the question with the help of ConstraintLayout. Of course, there are solutions using the legacy <LinearLayout> with something called as weights but as the warning says Weights are bad for performance.
Why weights are bad for performance?
Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.
So let's get on to the solution using <ConstraintLayout>.
Let's say we have a layout file called my_activity_layout.xml and we use the below code to achieve what we want:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<SurfaceView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<include
android:id="#+id/news_title"
layout="#layout/my_activity_layout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>
As you can see the Guideline help us to get 2/3 i.e 66.666 ~ 67 % of the screen, and then you can constraint your SurfaceView and your layout using <include> tag on your activity.
You can also see the required result:
You can just copy-paste the solution and see if it works as expected.

You can solve this with a linear Layout and specifying a layout weight for the correction ratios.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<SurfaceView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
<include layout="my_activity_layout.xml"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>

Layout content overlap in Oreo

I've two child layouts in ConstraintLayout (One above the other). It's showing second layout above first in all Android versions except Android 8.1 (Android O),where the second layout is hidden behind the first layout.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout android:id="#+id/subscriberViewContainer"
android:layout_marginBottom="50dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/colorAccent"/>
<RelativeLayout
android:id="#+id/publisherViewContainer"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="120dp"
android:layout_height="90dp"
android:elevation="20dp"
android:background="#color/colorPrimary"/>
</android.support.constraint.ConstraintLayout>
Are there any changes that need to be done in Android O to get the same response as the rest?

I found the last layout to which i'm adding view is coming on top, which is very odd. So i put a temporary fix , if the build version > 25 then add view to second layout again .It's very weird but at the end of the day , i had to fix it.