How to group multiple views in a ConstraintLayout

dev90 picture dev90 · Feb 8, 2017 · Viewed 23.1k times · Source

I have added 3 buttons in a ConstraintLayout. I have added a button to disable or enable these buttons.

If I was using normal LinearLayout. I could have put all the buttons in a Linear Layout and enable or disable that particular layout.

But I am using ConstraintLayout. So I need to disable or enable all of these buttons, I believe that there must be a way in ConstraintLayout to group different views.

Kindly guide me how to group views in ConstriantLayout

enter image description here

  <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toRightOf="@+id/button"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="@+id/button" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/button2"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toRightOf="@+id/button2"
        android:layout_marginLeft="8dp" />

Answer

Pavan picture Pavan · Jun 6, 2017

Yes, as I know you can handle visibility using linear layout but not Enable/Disable views I think, correct me if I am wrong. So now in ConstraintLayout also we can handle visibility of particular group of views using the Group

<android.support.constraint.Group/>

This is new feature introduced in ConstraintLayout which is currently in Beta version.

How to add beta ConstraintLayout to project follow steps below

add maven support in project gradle file as below

allprojects {
    repositories {
        maven { url 'https://maven.google.com' }
        jcenter()
    }
}

then in app gardle dependencies add ConstarintLayout library dependency

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'

now you have to add group in your ConstraintLayout as follow

<android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="button7,button3,button2"
        android:id="@+id/group" />  

where in Group reference id

app:constraint_referenced_ids="button7,button3,button2"

contains the comma separated view id's you want to handle run time, so in activity you just bind Group as below and handle visibility

import android.support.constraint.Group; //import statement in activity

Group group=(Group)findViewById(R.id.group);//bind view from xml
group.setVisibility(View.VISIBLE);//this will visible all views
group.setVisibility(View.GONE);//this will set Gone to all views
group.setVisibility(View.INVISIBLE);//this will set INVISIBLE to all view

EDIT ConrtsaintLayout 1.1.0 stable version released on 12 April 2018 https://androidstudio.googleblog.com/2018/04/constraintlayout-110.html

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

Edit Android X If anyone using android x package you can find package info here

https://developer.android.com/jetpack/androidx/migrate

and use:

<androidx.constraintlayout.widget.Group />