toggle visibility of chain group in constraint layout

Question

In previous xml layout, I have multiple view groups with few elements inside. Hide each view group will also hide all of its child elements. Since I wanted to have flat structure and tried ConstraintLayout. Cool I know how to chain element with spread to align properly. Since flat structure does not have wrapped LinearLayout, now i have 3 views to hide instead. I would like to know if there is alternative to achieve this.

Without constraint layout

<RelativeLayout.... .......... .......... <LinearLayout         android:visibility="gone"         tools:visibility="visible"         android:id="@+id/filter_area"         android:layout_width="match_parent"         android:layout_height="wrap_content">          <android.support.v7.widget.AppCompatTextView             android:id="@+id/lblTerminal"             android:background="@color/lightGray"             style="@style/PurpleSubtitle"             android:drawableRight="@drawable/i_down_yellow"             android:drawableEnd="@drawable/i_down_yellow"             android:padding="10dp"             android:text="@string/lblTerminal"             android:layout_weight="5"             android:layout_width="0dp"             android:layout_height="wrap_content" />          <View             android:background="@android:color/black"             android:layout_width="1dp"             android:layout_height="match_parent"/>          <android.support.v7.widget.AppCompatTextView             android:id="@+id/lblCategory"             android:background="@color/lightGray"             android:padding="10dp"             android:drawableRight="@drawable/i_down_yellow"             android:drawableEnd="@drawable/i_down_yellow"             style="@style/PurpleSubtitle"             android:text="@string/lblCategory"             android:layout_weight="5"             android:layout_width="0dp"             android:layout_height="wrap_content" />       </LinearLayout>   .......   .......   </RelativeLayout> 

With constraint layout

    <android.support.constraint.ConstraintLayout     .....     .....     .....        #happy that i no longer need LinearLayout for align properly        <android.support.v7.widget.AppCompatTextView             android:id="@+id/lblTerminal"             android:background="@color/lightGray"             style="@style/PurpleSubtitle"             android:drawableRight="@drawable/i_down_yellow"             android:drawableEnd="@drawable/i_down_yellow"             android:padding="10dp"             android:text="@string/lblTerminal"             android:layout_weight="5"             android:layout_width="0dp"             android:layout_height="50dp"             app:layout_constraintTop_toBottomOf="@+id/txt_search"             app:layout_constraintRight_toLeftOf="@+id/view3"             app:layout_constraintLeft_toLeftOf="@+id/guideline2"             app:layout_constraintHorizontal_chainStyle="spread"/>          <View             android:background="@android:color/black"             android:layout_width="1dp"             android:layout_height="50dp"             android:id="@+id/view3"             app:layout_constraintTop_toBottomOf="@+id/txt_search"             app:layout_constraintRight_toLeftOf="@+id/lblCategory"             app:layout_constraintLeft_toRightOf="@+id/lblTerminal" />          <android.support.v7.widget.AppCompatTextView             android:id="@+id/lblCategory"             android:background="@color/lightGray"             android:padding="10dp"             android:drawableRight="@drawable/i_down_yellow"             android:drawableEnd="@drawable/i_down_yellow"             style="@style/PurpleSubtitle"             android:text="@string/lblCategory"             android:layout_width="0dp"             android:layout_height="50dp"             app:layout_constraintTop_toTopOf="@+id/view3"             app:layout_constraintRight_toRightOf="parent"             app:layout_constraintLeft_toRightOf="@+id/view3" />      ......   ......   ......    </android.support.constraint.ConstraintLayout> 

Answer 1

Yes, so now in ConstraintLayout also we can handle visibility of particular groups of Views using the Group

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

How to add beta ConstraintLayout to your project? Follow the steps below:

Add maven support in project gradle file as below

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

Then in app gradle dependencies add ConstraintLayout library dependency

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

Now you have to add a Group in your ConstraintLayout as follows

<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, the reference id...

app:constraint_referenced_ids="button7,button3,button2" 

... contains the comma separated view id's you want to handle run time, so, in an Activity, you just bind the Group as below and handle the 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 was 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 for Android X: If anyone is using the Android X package, you can find package info here

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

Answer 2

If you are using beta version of constraintlayout, please follow @pavan's answer

If you are using AndroidX, Please follow below steps to integrate constraintlayout and Group:

1) Add AndroidX constraint layout dependancy in your project:

implementation 'androidx.constraintlayout:constraintlayout:1.1.3' 

2) Use ConstraintLayout Group as below in your project:

<androidx.constraintlayout.widget.Group                     android:id="@+id/groupDetails"                     android:layout_width="wrap_content"                     android:visibility="gone" // Default visibility for group views                     app:constraint_referenced_ids="textViewUserName, ..." // id's which you want to include in group                     android:layout_height="wrap_content"/> 

3) Here is the coding part for toggle visibility:

private lateinit var groupDetails:Group  ... groupDetails = findViewById(R.id.groupDetails) groupDetails.visibility = View.GONE // Change visibility 

Hope it's helps while using AndroidX.