Search code examples
androidperformanceandroid-layoutandroid-linearlayoutandroid-constraintlayout

How to group multiple views in a ConstraintLayout


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" />

Solution

  • 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: ConstraintLayout 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 />