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.

This is how it should, if not working please share whole layout file. — buzzingsilently, May 04 '18 at 07:47

iRuth · Answer 1 · 2018-07-26T21:58:45.483

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.

No need of separate view to give background color if its already in viewgroup like ConstraintLayout, just bg color in Viewgroup. — Nauman Ash, Sep 11 '18 at 04:48
I understand that you can do that @nauman. But if you want to set the background of the group of `TextView`s separately from the background of the CL, this is how I currently approach it. You could also have a `LinearLayout` with the background set on it. But I think the goal of using CL was to reduce nested `ViewGroup`s. — iRuth, Sep 11 '18 at 11:17
this solution keeps the layout hierarchy flat, honouring one of the main advantages of using ConstraintLayout — S-K', Oct 08 '18 at 15:11
What if there are multiple views within the group, and they need to share the same background? — IgorGanapolsky, Jan 19 '19 at 17:20
This won't work in case you have three buttons and you want to give margin top and bottom to the first and last button respectively. View will be attached from top and bottom to the buttons. If you give padding bottom to button than it will apply to button and button becomes bigger. — Amit Bhati, Apr 23 '21 at 10:53

score 13 · Answer 2 · answered Jul 26 '19 at 14:10

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 :)

This won't work in case you have three buttons and you want to give margin top and bottom to the first and last button respectively. This group will be attached from top and bottom to the buttons. — Amit Bhati, Apr 22 '21 at 14:46

score 8 · Answer 3 · answered Jan 18 '19 at 09:07

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

score 3 · Accepted Answer · answered Sep 11 '18 at 05:08

Group is only used for controlling the visibility of Referenced Ids in app:constraint_referenced_ids. According to the documentation. Solution is just put views in a Viewgroup. I had to put all the views in ConstraintLayout to constrol the visibility + benefits of chaining views in CL.

 <android.support.constraint.ConstraintLayout
                android:id="@+id/area_range_constraint"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                visibility = "View.VISIBLE"
                >

                <TextView
                    android:id="@+id/area_title_tv"
                    style="@style/filter_heading_style"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/STR_AREA"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <EditText
                    android:id="@+id/area_range_from"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_marginTop="8dp"
                    android:hint="@string/STR_MIN_AREA"
                    android:inputType="number"
                    android:maxLength="10"
                    android:text='@{searchQueryModel.areaMin==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMin())))}'
                    android:textAlignment="center"
                    android:textDirection="anyRtl"
                    android:textSize="14sp"
                    app:layout_constraintEnd_toStartOf="@+id/textView254"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintHorizontal_chainStyle="packed"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/area_title_tv" />

                <EditText
                    android:id="@+id/area_range_to"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="8dp"
                    android:layout_marginStart="8dp"
                    android:hint="@string/STR_MAX_AREA"
                    android:inputType="number"
                    android:maxLength="10"
                    android:text='@{searchQueryModel.areaMax==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMax())))}'
                    android:textAlignment="center"
                    android:textDirection="anyRtl"
                    android:textSize="14sp"
                    app:layout_constraintBaseline_toBaselineOf="@+id/textView254"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/textView254" />

                <TextView
                    android:id="@+id/textView254"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/STR_TO"
                    android:textColor="@color/text_color_3"
                    android:textSize="@dimen/text_size_normal"
                    app:layout_constraintBaseline_toBaselineOf="@+id/area_range_from"
                    app:layout_constraintEnd_toStartOf="@+id/area_range_to"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/area_range_from" />

                <TextView
                    android:id="@+id/area_range_value_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp"
                    android:layout_marginLeft="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:text='@{`(` + areaUnit + `)`}'
                    android:textColor="@color/colorPrimary"
                    android:textSize="@dimen/text_size_normal"
                    app:layout_constraintBottom_toBottomOf="@+id/area_title_tv"
                    app:layout_constraintStart_toEndOf="@+id/area_title_tv"
                    app:layout_constraintTop_toTopOf="@+id/area_title_tv" />


            </android.support.constraint.ConstraintLayout>

score -1 · Answer 5 · answered Sep 13 '20 at 17:23

-1

Use the new Layer that was introduced in ConstraintLayout 2

answered Sep 13 '20 at 17:23

Refael

11
2

Mehul Kanzariya · Answer 6 · 2018-05-04T12:00:41.800

-5

As per the official documentation, group is only used to control the visibility and you cannot change the background of the views of a particular group.

Documentation: This class controls the visibility of a set of referenced widgets. Widgets are referenced by being added to a comma separated list of ids.

To change it dynamically, use for all the three TextViews.

textView.setBackgroundColor(Color.RED);

or

textView..setBackgroundColor(Color.parseColor("#ffffff"));

edited May 04 '18 at 12:00

answered May 04 '18 at 07:52

Mehul Kanzariya

888
3
27
58

So how to change the background then if 3 textviews are chained and within a constraintlayout. – Nauman Ash May 04 '18 at 10:19
Updated the answer. – Mehul Kanzariya May 04 '18 at 12:00
There are three textviews, not single and all are chained horizontally. – Nauman Ash May 04 '18 at 13:05

How to give background color to Group in Constraintlayout

6 Answers6