hossain-khan · hossain-khan · Apr 6, 2019 · Apr 6, 2019
diff --git a/README.md b/README.md
@@ -43,10 +43,10 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
   * [x] Chain Style
   * [x] Weighted chains
   * [ ] Margins and chains _(Added in 1.1)_
-- [ ] Virtual Helpers objects
+- [x] Virtual Helpers objects 🥇
   * [x] Guideline
-  * [ ] Barrier
-  * [ ] Group
+  * [x] Barrier
+  * [x] Group
 - [ ] Optimizer _(Added in 1.1)_
 
 ## Objective

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -31,6 +31,9 @@
         <activity
             android:name=".layoutpreview.LayoutGuidelineBarrierActivity"
             android:parentActivityName=".browse.LayoutBrowseActivity" />
+        <activity
+            android:name=".layoutpreview.LayoutGuidelineGroupActivity"
+            android:parentActivityName=".browse.LayoutBrowseActivity" />
     </application>
 
 </manifest>
diff --git a/app/src/main/java/com/hossainkhan/android/demo/browse/LayoutBrowseActivity.kt b/app/src/main/java/com/hossainkhan/android/demo/browse/LayoutBrowseActivity.kt
@@ -16,14 +16,15 @@
 
 package com.hossainkhan.android.demo.browse
 
-import androidx.lifecycle.ViewModelProviders
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
+import androidx.lifecycle.ViewModelProviders
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.hossainkhan.android.demo.R
 import com.hossainkhan.android.demo.layoutpreview.LayoutChainStyleActivity
 import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineBarrierActivity
+import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineGroupActivity
 import com.hossainkhan.android.demo.layoutpreview.LayoutPreviewBaseActivity
 import com.hossainkhan.android.demo.layoutpreview.LayoutVisibilityGoneActivity
 import com.hossainkhan.android.demo.viewmodel.LayoutPreviewViewModelFactory
@@ -78,6 +79,9 @@ class LayoutBrowseActivity : AppCompatActivity() {
     private fun onLayoutItemSelected(layoutResId: Int) {
         Timber.i("Selected layout id: %s", layoutResId)
 
+        /*
+         * Where applicable, loads specific activity with interactive feature for user to try out feature.
+         */
         when (layoutResId) {
             R.layout.preview_visibility_gone -> {
                 startActivity(LayoutPreviewBaseActivity.createStartIntent(this,
@@ -91,7 +95,12 @@ class LayoutBrowseActivity : AppCompatActivity() {
                 startActivity(LayoutPreviewBaseActivity.createStartIntent(this,
                         LayoutGuidelineBarrierActivity::class.java, R.layout.preview_virtual_helper_barrier))
             }
+            R.layout.preview_virtual_helper_group -> {
+                startActivity(LayoutPreviewBaseActivity.createStartIntent(this,
+                        LayoutGuidelineGroupActivity::class.java, R.layout.preview_virtual_helper_group))
+            }
             else -> {
+                // By default it loads the preview activity with the layout requested.
                 startActivity(LayoutPreviewBaseActivity.createStartIntent(this, layoutResId))
             }
         }

diff --git a/app/src/main/java/com/hossainkhan/android/demo/dagger/ActivityBindingModule.kt b/app/src/main/java/com/hossainkhan/android/demo/dagger/ActivityBindingModule.kt
@@ -18,6 +18,7 @@ package com.hossainkhan.android.demo.dagger
 
 import com.hossainkhan.android.demo.layoutpreview.LayoutChainStyleActivity
 import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineBarrierActivity
+import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineGroupActivity
 import com.hossainkhan.android.demo.layoutpreview.LayoutPreviewBaseActivity
 import com.hossainkhan.android.demo.layoutpreview.LayoutVisibilityGoneActivity
 import dagger.Module
@@ -62,4 +63,8 @@ abstract class ActivityBindingModule {
     @ActivityScope
     @ContributesAndroidInjector
     abstract fun layoutGuidelineBarrierActivity(): LayoutGuidelineBarrierActivity
+
+    @ActivityScope
+    @ContributesAndroidInjector
+    abstract fun layoutGuidelineGroupActivity(): LayoutGuidelineGroupActivity
 }
diff --git a/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt b/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
@@ -135,7 +135,18 @@ class LayoutDataStore @Inject constructor(
                     thumbnailResourceId = R.drawable.thumb_virtual_helper_barrier,
                     title = "Virtual Helper: Barrier",
                     description = "A Barrier references multiple widgets as input, and creates a virtual guideline " +
-                            "based on the most extreme widget on the specified side.")
+                            "based on the most extreme widget on the specified side."),
+
+            /*
+             * https://developer.android.com/reference/android/support/constraint/Group.html
+             */
+            LayoutInformation(
+                    layoutResourceId = R.layout.preview_virtual_helper_group,
+                    thumbnailResourceId = R.drawable.thumb_virtual_helper_group,
+                    title = "Virtual Helper: Group",
+                    description = "This class controls the visibility of a set of referenced widgets. " +
+                            "Widgets are referenced by being added to a comma separated list of ids.\n\n" +
+                            "For example you can link multiple views: `app:constraint_referenced_ids=\"viewId1,viewId2,viewId3\"` and control their visibility at once.")
 
 
             /*

diff --git a/app/src/main/java/com/hossainkhan/android/demo/layoutpreview/LayoutGuidelineGroupActivity.kt b/app/src/main/java/com/hossainkhan/android/demo/layoutpreview/LayoutGuidelineGroupActivity.kt
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2019 Hossain Khan
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.hossainkhan.android.demo.layoutpreview
+
+import android.os.Bundle
+import android.view.View
+import android.widget.Button
+import androidx.constraintlayout.widget.Group
+import com.hossainkhan.android.demo.R
+
+/**
+ * Activity showcasing how virtual guideline group containing multiple views and how it can be changed.
+ *
+ * See https://developer.android.com/reference/android/support/constraint/Barrier
+ */
+class LayoutGuidelineGroupActivity : LayoutPreviewBaseActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        // Setup additional view that is only available in this screen.
+        val toggleButton = findViewById<Button>(R.id.toggle_label_text_size)
+        val groupOfViews = findViewById<Group>(R.id.visual_group)
+
+        toggleButton.setOnClickListener {
+            when (groupOfViews.visibility) {
+                View.VISIBLE -> groupOfViews.visibility = View.GONE
+                else -> groupOfViews.visibility = View.VISIBLE
+            }
+        }
+    }
+}
diff --git a/app/src/main/res/drawable/thumb_virtual_helper_group.xml b/app/src/main/res/drawable/thumb_virtual_helper_group.xml
@@ -0,0 +1,47 @@
+<!--
+  ~ Copyright (c) 2019 Hossain Khan
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector android:alpha="0.9" android:height="640dp"
+    android:viewportHeight="640" android:viewportWidth="640"
+    android:width="640dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillAlpha="0" android:fillColor="#000000" android:pathData="M2.46,637.84L637.54,637.84L637.54,2.16L2.46,2.16L2.46,637.84Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M2.46,637.84L637.54,637.84L637.54,2.16L2.46,2.16L2.46,637.84Z"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="1" android:fillColor="#df7ee6" android:pathData="M202.68,160C206.72,160 210,163.28 210,167.32C210,195.86 210,274.14 210,302.68C210,306.72 206.72,310 202.68,310C174.14,310 95.86,310 67.32,310C63.28,310 60,306.72 60,302.68C60,274.14 60,195.86 60,167.32C60,163.28 63.28,160 67.32,160C95.86,160 174.14,160 202.68,160Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M202.68,160C206.72,160 210,163.28 210,167.32C210,195.86 210,274.14 210,302.68C210,306.72 206.72,310 202.68,310C174.14,310 95.86,310 67.32,310C63.28,310 60,306.72 60,302.68C60,274.14 60,195.86 60,167.32C60,163.28 63.28,160 67.32,160C95.86,160 174.14,160 202.68,160Z"
+        android:strokeAlpha="1" android:strokeWidth="0"/>
+    <path android:fillAlpha="1" android:fillColor="#7ee698" android:pathData="M382.68,160C386.72,160 390,163.28 390,167.32C390,195.86 390,274.14 390,302.68C390,306.72 386.72,310 382.68,310C354.14,310 275.86,310 247.32,310C243.28,310 240,306.72 240,302.68C240,274.14 240,195.86 240,167.32C240,163.28 243.28,160 247.32,160C275.86,160 354.14,160 382.68,160Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M382.68,160C386.72,160 390,163.28 390,167.32C390,195.86 390,274.14 390,302.68C390,306.72 386.72,310 382.68,310C354.14,310 275.86,310 247.32,310C243.28,310 240,306.72 240,302.68C240,274.14 240,195.86 240,167.32C240,163.28 243.28,160 247.32,160C275.86,160 354.14,160 382.68,160Z"
+        android:strokeAlpha="1" android:strokeWidth="0"/>
+    <path android:fillAlpha="1" android:fillColor="#7eb4e6" android:pathData="M562.68,160C566.72,160 570,163.28 570,167.32C570,195.86 570,274.14 570,302.68C570,306.72 566.72,310 562.68,310C534.14,310 455.86,310 427.32,310C423.28,310 420,306.72 420,302.68C420,274.14 420,195.86 420,167.32C420,163.28 423.28,160 427.32,160C455.86,160 534.14,160 562.68,160Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M562.68,160C566.72,160 570,163.28 570,167.32C570,195.86 570,274.14 570,302.68C570,306.72 566.72,310 562.68,310C534.14,310 455.86,310 427.32,310C423.28,310 420,306.72 420,302.68C420,274.14 420,195.86 420,167.32C420,163.28 423.28,160 427.32,160C455.86,160 534.14,160 562.68,160Z"
+        android:strokeAlpha="1" android:strokeWidth="0"/>
+    <path android:fillAlpha="0" android:fillColor="#ffffff" android:pathData="M592.15,135.5C596.87,135.5 600.7,139.32 600.7,144.04C600.7,182.25 600.7,288.34 600.7,326.55C600.7,331.27 596.87,335.1 592.15,335.1C481.58,335.1 158.42,335.1 47.85,335.1C43.13,335.1 39.3,331.27 39.3,326.55C39.3,288.34 39.3,182.25 39.3,144.04C39.3,139.32 43.13,135.5 47.85,135.5C158.42,135.5 481.58,135.5 592.15,135.5Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M592.15,135.5C596.87,135.5 600.7,139.32 600.7,144.04C600.7,182.25 600.7,288.34 600.7,326.55C600.7,331.27 596.87,335.1 592.15,335.1C481.58,335.1 158.42,335.1 47.85,335.1C43.13,335.1 39.3,331.27 39.3,326.55C39.3,288.34 39.3,182.25 39.3,144.04C39.3,139.32 43.13,135.5 47.85,135.5C158.42,135.5 481.58,135.5 592.15,135.5Z"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="8"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M270,460L356.78,370" android:strokeAlpha="1"
+        android:strokeColor="#ff0000" android:strokeWidth="16"/>
+    <path android:fillAlpha="1" android:fillColor="#fc0000" android:pathData="M270,370L356.78,460"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M270,370L356.78,460" android:strokeAlpha="1"
+        android:strokeColor="#fc0000" android:strokeWidth="16"/>
+</vector>
diff --git a/app/src/main/res/layout/preview_virtual_helper_barrier.xml b/app/src/main/res/layout/preview_virtual_helper_barrier.xml
@@ -21,7 +21,8 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:layout_margin="16dp">
+    android:layout_margin="16dp"
+    android:animateLayoutChanges="true">
 
     <androidx.constraintlayout.widget.Barrier
         android:id="@+id/barrier"

diff --git a/app/src/main/res/layout/preview_virtual_helper_group.xml b/app/src/main/res/layout/preview_virtual_helper_group.xml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright (c) 2019 Hossain Khan
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<androidx.constraintlayout.widget.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:layout_margin="16dp"
+    android:animateLayoutChanges="true">
+
+    <!-- This virtual helper has `constraint_referenced_ids` to multiple views to apply visibility to all of them  -->
+    <androidx.constraintlayout.widget.Group
+        android:id="@+id/visual_group"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="visible"
+        app:constraint_referenced_ids="view1,view2,view3" />
+
+
+    <View
+        android:id="@+id/view1"
+        style="@style/MediumBox"
+        app:layout_constraintEnd_toStartOf="@+id/view2"
+        app:layout_constraintHorizontal_chainStyle="spread_inside"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <View
+        android:id="@+id/view2"
+        style="@style/MediumBox.Purple"
+        app:layout_constraintEnd_toStartOf="@+id/view3"
+        app:layout_constraintStart_toEndOf="@+id/view1"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <View
+        android:id="@+id/view3"
+        style="@style/MediumBox.Pink"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@+id/view2"
+        app:layout_constraintTop_toTopOf="parent" />
+
+
+    <!-- _________________ IGNORE VIEWS BELOW THIS LINE _________________ -->
+
+    <!--
+        A button to dynamically set label text to showcase the barrier in effect.
+    -->
+    <Button
+        android:id="@+id/toggle_label_text_size"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Toggle View Group Visibility"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:ignore="HardcodedText" />
+
+    <TextView
+        style="@style/TextAppearance.AppCompat.Body1"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="8dp"
+        android:layout_marginTop="36dp"
+        android:layout_marginEnd="8dp"
+        android:gravity="center"
+        android:text="Three separate views grouped by virtual guideline group which can be hidden by just hiding the group without touching each individual views."
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/view2"
+        tools:ignore="HardcodedText" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -33,11 +33,14 @@
     </style>
 
     <style name="MediumBox.Purple">
-        <item name="android:layout_width">@dimen/box_size_medium</item>
-        <item name="android:layout_height">@dimen/box_size_medium</item>
         <item name="android:background">@color/md_deep_purple_700</item>
     </style>
 
+    <style name="MediumBox.Pink">
+        <item name="android:background">@color/md_pink_700</item>
+    </style>
+
+
     <style name="SimpleInfoTextView">
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>

diff --git a/resources/vector/ic_virtual_helper_group.svg b/resources/vector/ic_virtual_helper_group.svg