How do i create a container in constraintlayout so i can set a background?

Question

How can i group views in a constraint layout without nesting viewgroups?

<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"
  android:orientation="vertical"
  android:background="@color/color1">

<ImageView
    android:id="@+id/mAlbumArtLarge"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="fitXY"
    android:src="@drawable/image1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="ContentDescription" />

<android.support.constraint.ConstraintLayout
    android:id="@+id/mBottomSheet"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#20000000"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

        <ImageView
         android:id="@+id/mAlbumIvBottom"
         android:layout_width="50dp"
         android:layout_height="50dp"
         android:layout_margin="5dp"
         android:scaleType="fitXY"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

This is what i'm doing now to create a container mBottomSheet where i can group views and set a background, but i'm using another viewgroup constraintlayout for this which is not recommended because the point of constraintlayout is too have a flat view hierarchy.

So how can i achieve the same thing, but without using another viewgroup as a container?

EDIT

example:

Answer 1

You can use Gudeliens to achieve something similar.

For example, you can take some view (let's call it x) and place on your layout and just put all your wanted views above x.

As for the Gudeliens, with them, you can place your x in any way that you would want to use using app:layout_constraintGuide_percent attribute.

Take this layout for example:

<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"
  android:background="@color/colorPrimary"
  android:orientation="vertical">

<ImageView
    android:id="@+id/mAlbumIvBottom"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/ic_launcher_background"
    android:scaleType="fitXY"
    android:elevation="6dp"
    android:layout_margin="6dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toStartOf="@+id/guideline7"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="I am view x"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<android.support.constraint.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".15" />

<android.support.constraint.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".3" />


</android.support.constraint.ConstraintLayout>

This layout will look like this without any nesting views: (I am adding preview image to you could better understand guidelines)

The layout above is an example of how you could achieve this without using nested view groups.

---

This solution will work for you but I also agree with user1506104. It's ok to have a very small level of nesting, if you don't overdo it your layout performance could stay the same

• You can either go with my solution or have some nesting views (again, don't overdo it) I prefer to use my solution so I can avoid nesting.

• Just remember that my solution may be a bit longer than just having some lever of nesting when creating your layout.