From fe9a5d673e5e2f060d1d8e058e516d9193d25092 Mon Sep 17 00:00:00 2001
From: Hossain Khan <amardeshbd@gmail.com>
Date: Fri, 5 Apr 2019 19:01:25 -0400
Subject: [PATCH 1/3] [ADDED] [#49] Preview for visual guidelines. Fixes #49

---
 README.md                                     |   2 +-
 .../android/demo/data/LayoutDataStore.kt      |  11 +-
 .../res/drawable/ic_dotted_line_overlay.xml   |  27 +++
 .../thumb_visual_helper_guideline.xml         | 193 ++++++++++++++++++
 app/src/main/res/layout/.README.md            |   8 +-
 .../preview_visual_helper_guideline.xml       | 145 +++++++++++++
 6 files changed, 380 insertions(+), 6 deletions(-)
 create mode 100644 app/src/main/res/drawable/ic_dotted_line_overlay.xml
 create mode 100644 app/src/main/res/drawable/thumb_visual_helper_guideline.xml
 create mode 100644 app/src/main/res/layout/preview_visual_helper_guideline.xml

diff --git a/README.md b/README.md
index 4a8f2a3..e6047bc 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
   * [x] Weighted chains
   * [ ] Margins and chains _(Added in 1.1)_
 - [ ] Virtual Helpers objects
-  * [ ] Guideline
+  * [x] Guideline
   * [ ] Barrier
   * [ ] Group
 - [ ] Optimizer _(Added in 1.1)_
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
index c47c109..904dc98 100644
--- a/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
+++ b/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
@@ -117,7 +117,16 @@ class LayoutDataStore @Inject constructor(
                     title = "Dimension: Percent dimension",
                     description = "To use percent, you need to set the following:\n\n" +
                             "* The dimension should be set to MATCH_CONSTRAINT (0dp)\n" +
-                            "* Then set the `layout_constraintWidth_percent` or `layout_constraintHeight_percent` attributes to a value between 0.0 and 1.0")
+                            "* Then set the `layout_constraintWidth_percent` or `layout_constraintHeight_percent` attributes to a value between 0.0 and 1.0"),
+            LayoutInformation(
+                    layoutResourceId = R.layout.preview_visual_helper_guideline,
+                    thumbnailResourceId = R.drawable.thumb_visual_helper_guideline,
+                    title = "Virtual Helper: Guideline",
+                    description = "The Guideline object allows you to create Horizontal and Vertical guidelines which " +
+                            "are positioned relative to the ConstraintLayout container." +
+                            "Widgets can then be positioned by constraining them to such guidelines. ")
+
+
             /*
              Next item template (easy to copy and paste)
              LayoutInformation(
diff --git a/app/src/main/res/drawable/ic_dotted_line_overlay.xml b/app/src/main/res/drawable/ic_dotted_line_overlay.xml
new file mode 100644
index 0000000..b96ad38
--- /dev/null
+++ b/app/src/main/res/drawable/ic_dotted_line_overlay.xml
@@ -0,0 +1,27 @@
+<?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.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="line">
+
+    <stroke
+        android:width="1dp"
+        android:color="@color/md_grey_400"
+        android:dashWidth="10dp"
+        android:dashGap="5dp" />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/thumb_visual_helper_guideline.xml b/app/src/main/res/drawable/thumb_visual_helper_guideline.xml
new file mode 100644
index 0000000..3515368
--- /dev/null
+++ b/app/src/main/res/drawable/thumb_visual_helper_guideline.xml
@@ -0,0 +1,193 @@
+<!--
+  ~ 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="#7ee698" android:pathData="M596.86,147.79C598.59,147.79 600,149.19 600,150.93C600,163.19 600,196.81 600,209.07C600,210.81 598.59,212.21 596.86,212.21C529.23,212.21 329.49,212.21 261.86,212.21C260.12,212.21 258.72,210.81 258.72,209.07C258.72,196.81 258.72,163.19 258.72,150.93C258.72,149.19 260.12,147.79 261.86,147.79C329.49,147.79 529.23,147.79 596.86,147.79Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M596.86,147.79C598.59,147.79 600,149.19 600,150.93C600,163.19 600,196.81 600,209.07C600,210.81 598.59,212.21 596.86,212.21C529.23,212.21 329.49,212.21 261.86,212.21C260.12,212.21 258.72,210.81 258.72,209.07C258.72,196.81 258.72,163.19 258.72,150.93C258.72,149.19 260.12,147.79 261.86,147.79C329.49,147.79 529.23,147.79 596.86,147.79Z"
+        android:strokeAlpha="1" android:strokeWidth="0"/>
+    <path android:fillAlpha="1" android:fillColor="#719fd8" android:pathData="M596.95,242.79C598.64,242.79 600,244.15 600,245.83C600,257.72 600,290.32 600,302.2C600,303.88 598.64,305.25 596.95,305.25C529.56,305.25 330.44,305.25 263.05,305.25C261.36,305.25 260,303.88 260,302.2C260,290.32 260,257.72 260,245.83C260,244.15 261.36,242.79 263.05,242.79C330.44,242.79 529.56,242.79 596.95,242.79Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M596.95,242.79C598.64,242.79 600,244.15 600,245.83C600,257.72 600,290.32 600,302.2C600,303.88 598.64,305.25 596.95,305.25C529.56,305.25 330.44,305.25 263.05,305.25C261.36,305.25 260,303.88 260,302.2C260,290.32 260,257.72 260,245.83C260,244.15 261.36,242.79 263.05,242.79C330.44,242.79 529.56,242.79 596.95,242.79Z"
+        android:strokeAlpha="1" android:strokeWidth="0"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,41.56L200,1.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,41.56L200,1.56" android:strokeAlpha="0.7"
+        android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,91.56L200,51.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,91.56L200,51.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,141.56L200,101.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,141.56L200,101.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,191.56L200,151.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,191.56L200,151.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,241.56L200,201.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,241.56L200,201.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,291.56L200,251.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,291.56L200,251.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,341.56L200,301.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,341.56L200,301.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,391.56L200,351.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,391.56L200,351.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,441.56L200,401.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,441.56L200,401.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,491.56L200,451.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,491.56L200,451.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,541.56L200,501.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,541.56L200,501.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,591.56L200,551.56" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,591.56L200,551.56"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M200,638.44L200,598.44" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M200,638.44L200,598.44"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M210,180L250,180" android:strokeAlpha="1"
+        android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M221.48,170L210,180" android:strokeAlpha="1"
+        android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M221.48,190L210,180" android:strokeAlpha="1"
+        android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M210,274.43L250,274.43"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M221.48,264.43L210,274.43"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M221.48,284.43L210,274.43"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M117.97,89L151.74,89.09L166,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M117.97,89L151.74,89.09L166,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M176,89L209.77,89.09L224.03,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M176,89L209.77,89.09L224.03,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M2.97,89L36.74,89.09L51,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M2.97,89L36.74,89.09L51,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M61,89L94.77,89.09L109.03,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M61,89L94.77,89.09L109.03,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M349.97,89L383.74,89.09L398,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M349.97,89L383.74,89.09L398,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M408,89L441.77,89.09L456.03,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M408,89L441.77,89.09L456.03,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M234.97,89L268.74,89.09L283,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M234.97,89L268.74,89.09L283,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M293,89L326.77,89.09L341.03,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M293,89L326.77,89.09L341.03,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M581.97,89L615.74,89.09L630,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M581.97,89L615.74,89.09L630,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M640,89L673.77,89.09L688.03,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M640,89L673.77,89.09L688.03,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M466.97,89L500.74,89.09L515,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M466.97,89L500.74,89.09L515,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0.7" android:fillColor="#000000"
+        android:pathData="M525,89L558.77,89.09L573.03,89.12" android:strokeAlpha="0.7"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M525,89L558.77,89.09L573.03,89.12"
+        android:strokeAlpha="0.7" android:strokeColor="#000000" android:strokeWidth="5"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M370.22,100.01L369.45,140"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M380,111.67L370.22,100.01"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M360,111.29L370.22,100.01"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M550.22,97L549.45,137" android:strokeAlpha="1"
+        android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M560,108.67L550.22,97" android:strokeAlpha="1"
+        android:strokeColor="#000000" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M540,108.28L550.22,97" android:strokeAlpha="1"
+        android:strokeColor="#000000" android:strokeWidth="3"/>
+</vector>
diff --git a/app/src/main/res/layout/.README.md b/app/src/main/res/layout/.README.md
index 68c6e4d..9c38812 100644
--- a/app/src/main/res/layout/.README.md
+++ b/app/src/main/res/layout/.README.md
@@ -28,10 +28,10 @@ Each layout must also be named based on sub features. Use following convention t
   * Prefix: **`_TBD_`** | Chain Style
   * Prefix: **`_TBD_`** | Weighted chains
   * Prefix: **`_TBD_`** | Margins and chains _(Added in 1.1)_
-- Prefix: **`_TBD_`** | Virtual Helpers objects
-  * Prefix: **`_TBD_`** | Guideline
-  * Prefix: **`_TBD_`** | Barrier
-  * Prefix: **`_TBD_`** | Group
+- Prefix: **`_visual_helper_`** | Virtual Helpers objects
+  * Prefix: **`_guideline_`** | Guideline
+  * Prefix: **`_barrier_`** | Barrier
+  * Prefix: **`_group_`** | Group
 - Prefix: **`_TBD_`** | Optimizer _(Added in 1.1)_
 
 > NOTE: The list of feature set is taken from original [readme](https://github.com/amardeshbd/android-constraint-layout-cheatsheet/blob/master/README.md).
\ No newline at end of file
diff --git a/app/src/main/res/layout/preview_visual_helper_guideline.xml b/app/src/main/res/layout/preview_visual_helper_guideline.xml
new file mode 100644
index 0000000..642c5d6
--- /dev/null
+++ b/app/src/main/res/layout/preview_visual_helper_guideline.xml
@@ -0,0 +1,145 @@
+<?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">
+
+    <!-- Vertical guideline to separate the labels and text fields. -->
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.40" />
+
+    <!-- Horizontal guideline to use it as a beginning of fields at 30% of the screen. -->
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_top"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.30" />
+
+    <!--
+        Horizontal guideline to use it as a end of fields at 500% of the screen.
+        After this line we have put the "LOGIN" button.
+     -->
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_bottom"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.5" />
+
+    <!--
+
+    ==================================================================================
+    NOTE: All the views below are the `TextView`s and `EditText`s that are constrained
+          with the `Guideline`s defined above.
+    ==================================================================================
+
+    -->
+
+    <TextView
+        android:id="@+id/username_label"
+        style="@style/TextAppearance.AppCompat.Title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginEnd="8dp"
+        android:text="Username"
+        app:layout_constraintBottom_toBottomOf="@+id/editText"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical"
+        app:layout_constraintTop_toTopOf="@+id/editText" />
+
+    <TextView
+        android:id="@+id/password_label"
+        style="@style/TextAppearance.AppCompat.Title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginEnd="8dp"
+        android:text="Password"
+        app:layout_constraintBottom_toBottomOf="@+id/editText2"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical"
+        app:layout_constraintTop_toTopOf="@+id/editText2" />
+
+    <EditText
+        android:id="@+id/editText"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:ems="10"
+        android:inputType="textPersonName"
+        android:text="my@email.com"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical"
+        app:layout_constraintTop_toTopOf="@+id/guideline_horizontal_top" />
+
+    <EditText
+        android:id="@+id/editText2"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:ems="10"
+        android:inputType="textPassword"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical"
+        app:layout_constraintTop_toBottomOf="@+id/editText" />
+
+    <Button
+        android:id="@+id/login_button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Login"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical"
+        app:layout_constraintTop_toTopOf="@+id/guideline_horizontal_bottom" />
+
+    <!--
+
+    ==================================================================================
+    NOTE: All the views below are used to show preview of the Guideline.
+    ==================================================================================
+
+    -->
+
+    <View
+        android:id="@+id/dotted_line_top"
+        android:layout_width="0dp"
+        android:layout_height="2dp"
+        android:background="@drawable/ic_dotted_line_overlay"
+        android:layerType="software"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_top"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent" />
+
+    <View
+        android:id="@+id/dotted_line_bottom"
+        android:layout_width="0dp"
+        android:layout_height="2dp"
+        android:background="@drawable/ic_dotted_line_overlay"
+        android:layerType="software"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_bottom"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent" />
+
+    <View
+        android:id="@+id/dotted_line_left"
+        android:layout_width="1dp"
+        android:layout_height="0dp"
+        android:background="@color/md_grey_300"
+        android:layerType="software"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintLeft_toRightOf="@+id/guideline_vertical"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file

From f95c0f0966d98efdae4e41d12220bf1a9fb68afe Mon Sep 17 00:00:00 2001
From: Hossain Khan <amardeshbd@gmail.com>
Date: Fri, 5 Apr 2019 19:04:02 -0400
Subject: [PATCH 2/3] [ADDED] Forgot to add the original vector image.

---
 resources/vector/ic_visual_helper_guideline.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 resources/vector/ic_visual_helper_guideline.svg

diff --git a/resources/vector/ic_visual_helper_guideline.svg b/resources/vector/ic_visual_helper_guideline.svg
new file mode 100644
index 0000000..4df213b
--- /dev/null
+++ b/resources/vector/ic_visual_helper_guideline.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M2.46 637.84L637.54 637.84L637.54 2.16L2.46 2.16L2.46 637.84Z" id="akmjOYaC4"></path><path d="M596.86 147.79C598.59 147.79 600 149.19 600 150.93C600 163.19 600 196.81 600 209.07C600 210.81 598.59 212.21 596.86 212.21C529.23 212.21 329.49 212.21 261.86 212.21C260.12 212.21 258.72 210.81 258.72 209.07C258.72 196.81 258.72 163.19 258.72 150.93C258.72 149.19 260.12 147.79 261.86 147.79C329.49 147.79 529.23 147.79 596.86 147.79Z" id="dk42qIEb"></path><path d="M596.95 242.79C598.64 242.79 600 244.15 600 245.83C600 257.72 600 290.32 600 302.2C600 303.88 598.64 305.25 596.95 305.25C529.56 305.25 330.44 305.25 263.05 305.25C261.36 305.25 260 303.88 260 302.2C260 290.32 260 257.72 260 245.83C260 244.15 261.36 242.79 263.05 242.79C330.44 242.79 529.56 242.79 596.95 242.79Z" id="i6tVJTqLp"></path><path d="M200 41.56L200 1.56" id="aT6kAJVY"></path><path d="M200 91.56L200 51.56" id="j26GUPPO5x"></path><path d="M200 141.56L200 101.56" id="dqOHH5dIC"></path><path d="M200 191.56L200 151.56" id="ah8s4EG1w"></path><path d="M200 241.56L200 201.56" id="fqXPr7EGh"></path><path d="M200 291.56L200 251.56" id="e6593tC92c"></path><path d="M200 341.56L200 301.56" id="an3jtTydS"></path><path d="M200 391.56L200 351.56" id="d3tEcKmviI"></path><path d="M200 441.56L200 401.56" id="acomeBLDo"></path><path d="M200 491.56L200 451.56" id="a2VnMx604Y"></path><path d="M200 541.56L200 501.56" id="dXC8eRIjy"></path><path d="M200 591.56L200 551.56" id="a2QkEFR5OI"></path><path d="M200 638.44L200 598.44" id="b2kSnqwbtC"></path><path d="M210 180L250 180" id="bcaZGWDm1"></path><path d="M221.48 170L210 180" id="e3AbvbbD1M"></path><path d="M221.48 190L210 180" id="biMXB4mPY"></path><path d="M210 274.43L250 274.43" id="aKY9r4bxT"></path><path d="M221.48 264.43L210 274.43" id="a4244NB9SB"></path><path d="M221.48 284.43L210 274.43" id="azu22x3pT"></path><path d="M117.97 89L151.74 89.09L166 89.12" id="b1hJuN3tRT"></path><path d="M176 89L209.77 89.09L224.03 89.12" id="aeWyK3yNt"></path><path d="M2.97 89L36.74 89.09L51 89.12" id="ahdPAUkVU"></path><path d="M61 89L94.77 89.09L109.03 89.12" id="d1hCW7QMF"></path><path d="M349.97 89L383.74 89.09L398 89.12" id="a4FD8ewB1N"></path><path d="M408 89L441.77 89.09L456.03 89.12" id="arWS2rl5z"></path><path d="M234.97 89L268.74 89.09L283 89.12" id="coivfBNv"></path><path d="M293 89L326.77 89.09L341.03 89.12" id="a4kB056FGP"></path><path d="M581.97 89L615.74 89.09L630 89.12" id="igEKuK5cs"></path><path d="M640 89L673.77 89.09L688.03 89.12" id="gcogXtxiV"></path><path d="M466.97 89L500.74 89.09L515 89.12" id="d1g5LS4qo2"></path><path d="M525 89L558.77 89.09L573.03 89.12" id="e6t1pjtXT6"></path><path d="M370.22 100.01L369.45 140" id="cMDMsvC43"></path><path d="M380 111.67L370.22 100.01" id="ai7hNHkwR"></path><path d="M360 111.29L370.22 100.01" id="b2wYsBvomw"></path><path d="M550.22 97L549.45 137" id="b3ZQpjaTi"></path><path d="M560 108.67L550.22 97" id="b35deQCoi5"></path><path d="M540 108.28L550.22 97" id="e6MEhEOrc"></path></defs><g><g><g><use xlink:href="#akmjOYaC4" opacity="1" fill="#000000" fill-opacity="0"></use><g><use xlink:href="#akmjOYaC4" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="2" stroke-opacity="1"></use></g></g><g><use xlink:href="#dk42qIEb" opacity="1" fill="#7ee698" fill-opacity="1"></use><g><use xlink:href="#dk42qIEb" opacity="1" fill-opacity="0" stroke="#087d49" stroke-width="0" stroke-opacity="1"></use></g></g><g><use xlink:href="#i6tVJTqLp" opacity="1" fill="#719fd8" fill-opacity="1"></use><g><use xlink:href="#i6tVJTqLp" opacity="1" fill-opacity="0" stroke="#087d49" stroke-width="0" stroke-opacity="1"></use></g></g><g><use xlink:href="#aT6kAJVY" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#aT6kAJVY" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#j26GUPPO5x" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#j26GUPPO5x" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#dqOHH5dIC" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#dqOHH5dIC" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#ah8s4EG1w" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#ah8s4EG1w" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#fqXPr7EGh" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#fqXPr7EGh" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#e6593tC92c" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#e6593tC92c" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#an3jtTydS" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#an3jtTydS" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#d3tEcKmviI" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#d3tEcKmviI" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#acomeBLDo" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#acomeBLDo" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#a2VnMx604Y" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a2VnMx604Y" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#dXC8eRIjy" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#dXC8eRIjy" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#a2QkEFR5OI" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a2QkEFR5OI" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#b2kSnqwbtC" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#b2kSnqwbtC" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><g><g><use xlink:href="#bcaZGWDm1" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#e3AbvbbD1M" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#biMXB4mPY" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g></g><g><g><g><use xlink:href="#aKY9r4bxT" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#a4244NB9SB" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#azu22x3pT" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g></g><g><g><g><g><use xlink:href="#b1hJuN3tRT" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#b1hJuN3tRT" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#aeWyK3yNt" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#aeWyK3yNt" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#ahdPAUkVU" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#ahdPAUkVU" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#d1hCW7QMF" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#d1hCW7QMF" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g></g><g><g><use xlink:href="#a4FD8ewB1N" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a4FD8ewB1N" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#arWS2rl5z" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#arWS2rl5z" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#coivfBNv" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#coivfBNv" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#a4kB056FGP" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a4kB056FGP" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g></g></g><g><g><use xlink:href="#igEKuK5cs" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#igEKuK5cs" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#gcogXtxiV" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#gcogXtxiV" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#d1g5LS4qo2" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#d1g5LS4qo2" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g><g><use xlink:href="#e6t1pjtXT6" opacity="0.7" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#e6t1pjtXT6" opacity="0.7" fill-opacity="0" stroke="#000000" stroke-width="5" stroke-opacity="1"></use></g></g></g></g><g><g><g><use xlink:href="#cMDMsvC43" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#ai7hNHkwR" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#b2wYsBvomw" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g></g><g><g><g><use xlink:href="#b3ZQpjaTi" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#b35deQCoi5" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#e6MEhEOrc" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-opacity="1"></use></g></g></g></g></g></svg>
\ No newline at end of file

From 8fae3cc92f03daa5874f01a2ba30b0abb00ed2dc Mon Sep 17 00:00:00 2001
From: Hossain Khan <amardeshbd@gmail.com>
Date: Fri, 5 Apr 2019 19:11:15 -0400
Subject: [PATCH 3/3] [FIXED] [#49] Renamed file properly based on code review
 https://github.com/amardeshbd/android-constraint-layout-cheatsheet/pull/68#pullrequestreview-223508904

---
 .../java/com/hossainkhan/android/demo/data/LayoutDataStore.kt | 4 ++--
 ...elper_guideline.xml => thumb_virtual_helper_guideline.xml} | 0
 app/src/main/res/layout/.README.md                            | 2 +-
 ...per_guideline.xml => preview_virtual_helper_guideline.xml} | 0
 ...l_helper_guideline.svg => ic_virtual_helper_guideline.svg} | 0
 5 files changed, 3 insertions(+), 3 deletions(-)
 rename app/src/main/res/drawable/{thumb_visual_helper_guideline.xml => thumb_virtual_helper_guideline.xml} (100%)
 rename app/src/main/res/layout/{preview_visual_helper_guideline.xml => preview_virtual_helper_guideline.xml} (100%)
 rename resources/vector/{ic_visual_helper_guideline.svg => ic_virtual_helper_guideline.svg} (100%)

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
index 904dc98..600ac10 100644
--- a/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
+++ b/app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt
@@ -119,8 +119,8 @@ class LayoutDataStore @Inject constructor(
                             "* The dimension should be set to MATCH_CONSTRAINT (0dp)\n" +
                             "* Then set the `layout_constraintWidth_percent` or `layout_constraintHeight_percent` attributes to a value between 0.0 and 1.0"),
             LayoutInformation(
-                    layoutResourceId = R.layout.preview_visual_helper_guideline,
-                    thumbnailResourceId = R.drawable.thumb_visual_helper_guideline,
+                    layoutResourceId = R.layout.preview_virtual_helper_guideline,
+                    thumbnailResourceId = R.drawable.thumb_virtual_helper_guideline,
                     title = "Virtual Helper: Guideline",
                     description = "The Guideline object allows you to create Horizontal and Vertical guidelines which " +
                             "are positioned relative to the ConstraintLayout container." +
diff --git a/app/src/main/res/drawable/thumb_visual_helper_guideline.xml b/app/src/main/res/drawable/thumb_virtual_helper_guideline.xml
similarity index 100%
rename from app/src/main/res/drawable/thumb_visual_helper_guideline.xml
rename to app/src/main/res/drawable/thumb_virtual_helper_guideline.xml
diff --git a/app/src/main/res/layout/.README.md b/app/src/main/res/layout/.README.md
index 9c38812..78e227d 100644
--- a/app/src/main/res/layout/.README.md
+++ b/app/src/main/res/layout/.README.md
@@ -28,7 +28,7 @@ Each layout must also be named based on sub features. Use following convention t
   * Prefix: **`_TBD_`** | Chain Style
   * Prefix: **`_TBD_`** | Weighted chains
   * Prefix: **`_TBD_`** | Margins and chains _(Added in 1.1)_
-- Prefix: **`_visual_helper_`** | Virtual Helpers objects
+- Prefix: **`_virtual_helper_`** | Virtual Helpers objects
   * Prefix: **`_guideline_`** | Guideline
   * Prefix: **`_barrier_`** | Barrier
   * Prefix: **`_group_`** | Group
diff --git a/app/src/main/res/layout/preview_visual_helper_guideline.xml b/app/src/main/res/layout/preview_virtual_helper_guideline.xml
similarity index 100%
rename from app/src/main/res/layout/preview_visual_helper_guideline.xml
rename to app/src/main/res/layout/preview_virtual_helper_guideline.xml
diff --git a/resources/vector/ic_visual_helper_guideline.svg b/resources/vector/ic_virtual_helper_guideline.svg
similarity index 100%
rename from resources/vector/ic_visual_helper_guideline.svg
rename to resources/vector/ic_virtual_helper_guideline.svg