How to give background color to Group in Constraintlayout

Question

I have grouped 3 textview in a constraint layout. I have background to the group, but its not working.

<android.support.constraint.Group
                    android:id="@+id/group"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/text_color_3"
                    app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv" />

Is there anyway other round to do it.

Answer 1

Though the group is only for visibility purpose but you can easily put a background to group.

Group view doesn't have any width and height, so wrap content wouldn't be visible on actual screen. Provide constraints to Group view and set background attributes. Eg:

<android.support.constraint.Group
    android:id="@+id/group"
    android:layout_width="0dp" //match constraint
    android:layout_height="0dp" //match constraint
    android:background="@color/text_color_3"
    app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv"
    app:layout_constraintBottom_toBottomOf="@+id/frequency_tv"
    app:layout_constraintEnd_toEndOf="@+id/price_tv"
    app:layout_constraintStart_toStartOf="@+id/price_tv"
    app:layout_constraintTop_toTopOf="@+id/price_tv" />

//below are your TextViews aligned vertically
<TextView android:id="@+id/price_tv"/>
<TextView android:id="@+id/currency_unit_tv" .../>
<TextView android:id="@+id/frequency_tv" .../>

Hope it helps :)

Answer 2

According to the documentation, Group is only used for controlling the visibility of a set of widgets.

You can set the background to a View and constrain the view to how you desire the background to appear.

In the code sample below, after setting the background to the View with ID background, I constrained the top, left and right sides of the view to the parent and the bottom of the view to the last TextView in the group, which in this case is the TextView with ID textView3. I also added a 16dp bottom padding to textView3 so the background doesn't look weird. You could also use a Guideline for this.

Also note that the view background needs to be added before the group of views that need the background. If it's placed after the group of views, the background would be drawn over the group (and that's not what you 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#444444">

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="TextView 1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="TextView 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:paddingBottom="16dp"
        android:text="TextView 3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"/>

</android.support.constraint.ConstraintLayout>

I hope this helps.

Answer 3

Group is useful for the visibility purpose in ConstraintLayout. ConstraintLayout is introduced to remove the hierarchy of the multiple ViewGroups(Layouts).

We can simply use for the background purpose. If you simply have 3 TextView and want to apply the background color to the TextView don't add it to any ViewGroup(Layout), just check this:

<?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="#AAA">

  <View
    android:id="@+id/background"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#FFF"
    app:layout_constraintBottom_toBottomOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="@+id/textView1"
    app:layout_constraintStart_toStartOf="@+id/textView1"
    app:layout_constraintTop_toTopOf="@+id/textView1" />

  <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:padding="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="8dp"
    app:layout_constraintEnd_toEndOf="@+id/textView1"
    app:layout_constraintStart_toStartOf="@+id/textView1"
    app:layout_constraintTop_toBottomOf="@+id/textView1"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="8dp"
    app:layout_constraintEnd_toEndOf="@+id/textView1"
    app:layout_constraintStart_toStartOf="@+id/textView1"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    tools:text="TextView" />
</android.support.constraint.ConstraintLayout>

Result:

You can find the source here