Background on view groups when using constraint layout

Question

I'm using ConstraintLayout to create my views for a while now, but it seems I always having it hard to create a layout that has several background colours in it just like the attached image.

Let's say we want to create the screens on the right without using any RecyclerView. Ignore everything except the cards and we are not using CardView, we are using ConstraintLayout.

Do you guys have a tips or tricks for creating such layout without using any nested views? Any kinds of answers are accepted, thank you!

Please note the image is not mine and I just copied it from the google images.

Answer 1

A child view of constraint layout can only have 1 anchor on each side (start, end, top and bottom). In case you want to make something like that with just constraint layout, this will messed up on icon + title side incase you want more than one line on title.

Sample Case :

a. If you put the anchor to icon it will messed up when title have more than one line

b. If you put the anchor to title then the icon will overlap with bottom zone

For those cases we can use barrier

<?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"
    android:background="#123"
    android:padding="16dp"
    tools:context=".MainActivity">

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#fff"
        app:layout_constraintBottom_toBottomOf="@id/barrier1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:padding="16dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/background"
        app:layout_constraintStart_toStartOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:gravity="center_vertical"
        android:text="Hello World!\n\n\n\nMultiple Line"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/icon"
        app:layout_constraintStart_toEndOf="@id/icon"
        app:layout_constraintTop_toTopOf="@id/icon" />


    <android.support.constraint.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="icon,title" />

    <View
        android:id="@+id/background2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#aeaeae"
        app:layout_constraintBottom_toBottomOf="@id/content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/background" />

    <TextView
        android:id="@+id/sub"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="This Is the Subs"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="@id/background2"
        app:layout_constraintStart_toStartOf="@id/background2"
        app:layout_constraintTop_toTopOf="@id/background2" />

    <TextView
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:paddingBottom="16dp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="@id/background2"
        app:layout_constraintStart_toStartOf="@id/background2"
        app:layout_constraintTop_toBottomOf="@id/sub" />

</android.support.constraint.ConstraintLayout>

this is the result