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

This website has clear guidelines to achieve the same...

https://constraintlayout.com/cookbook/background.html

Hope this might help someone!

Answer 2

I think you can do this without barrier and special magic from constraint layout. There is something called CompoundDrawable(Google doc).

Basically it adds ImageView next to your TextView to place where you want it(start, top, end, bottom).

This will create a TextView to which you can set background color which will also set background color for "ImageView" next to it and it will be unified View.

So will have title, to which you set one background and content that can have different one.

<?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"
    android:paddingEnd="16dp"
    android:paddingStart="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#888888"
        android:drawablePadding="16dp"
        android:drawableStart="@drawable/ic_home"
        android:gravity="center_vertical"
        android:padding="16dp"
        android:text="Vocabulary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/headline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="@color/colorAccent"
        android:padding="8dp"
        android:text="Semper Vocabulary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title" />

    <TextView
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="@color/colorPrimary"
        android:padding="8dp"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/headline" />

</android.support.constraint.ConstraintLayout>

Answer 3

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