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 try: androidx.constraintlayout.widget.Group

or

You can group your Views together by assigning Constraints with respect to each others position but you won't be able to apply a background on all of the widgets as they are still the child of the parent ViewGroup. There are many other options to avoid using nested ConstraintLayout.

1. You can use another ViewGroup like LinearLayout or RelativeLayout inside ConstraintLayout.
2. You can create a seperate layout for BottomSheet and include it, for clean code

Answer 2

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.