From e8addd404faf6085b8a5604c62220790daaf2ac8 Mon Sep 17 00:00:00 2001
From: Hossain Khan <amardeshbd@gmail.com>
Date: Fri, 5 Apr 2019 16:24:15 -0400
Subject: [PATCH] [ADDED] [#53] Percent Dimension example. Fixes #53

---
 README.md                                     |  6 +-
 .../android/demo/data/LayoutDataStore.kt      |  9 ++-
 .../drawable/thumb_dimension_percentage.xml   | 54 ++++++++++++++++
 .../res/layout/preview_dimension_percent.xml  | 61 +++++++++++++++++++
 resources/vector/ic_dimension_percentage.svg  |  3 +
 5 files changed, 129 insertions(+), 4 deletions(-)
 create mode 100644 app/src/main/res/drawable/thumb_dimension_percentage.xml
 create mode 100644 app/src/main/res/layout/preview_dimension_percent.xml
 create mode 100644 resources/vector/ic_dimension_percentage.svg

diff --git a/README.md b/README.md
index 3297480..fe2d7e8 100644
--- a/README.md
+++ b/README.md
@@ -34,14 +34,14 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
 - [x] Visibility behavior
 - [ ] Dimension constraints
   * [x] Ratio
-  * [ ] Percent dimension
+  * [x] Percent dimension
   * [ ] Min and Max
   * [ ] `MATCH_CONSTRAINT` dimensions _(Added in 1.1)_
   * [ ] `WRAP_CONTENT` : enforcing constraints _(Added in 1.1)_
   * [ ] Widgets dimension constraints
 - [ ] Chains
   * [x] Chain Style
-  * [ ] Weighted chains
+  * [x] Weighted chains
   * [ ] Margins and chains _(Added in 1.1)_
 - [ ] Virtual Helpers objects
   * [ ] Guideline
@@ -51,7 +51,7 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
 
 ## Objective
 These are the **my** objectives for this demo application.
-* To explore all the features of constrainst layout
+* To explore all the features of constraint layout
 * Learn and use material design component in the sample app
 * Learn and use the new architecture components in the sample app
 * Learn and use proper architecture for the app - likely MVVM
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 de1d5dc..c47c109 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
@@ -110,7 +110,14 @@ class LayoutDataStore @Inject constructor(
                             "\n\n" +
                             "The ratio can be expressed either as:\n" +
                             "\n * a float value, representing a ratio between width and height" +
-                            "\n * a ratio in the form \"width:height\", for example: `layout_constraintDimensionRatio=\"16:9\"`")
+                            "\n * a ratio in the form \"width:height\", for example: `layout_constraintDimensionRatio=\"16:9\"`"),
+            LayoutInformation(
+                    layoutResourceId = R.layout.preview_dimension_percent,
+                    thumbnailResourceId = R.drawable.thumb_dimension_percentage,
+                    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")
             /*
              Next item template (easy to copy and paste)
              LayoutInformation(
diff --git a/app/src/main/res/drawable/thumb_dimension_percentage.xml b/app/src/main/res/drawable/thumb_dimension_percentage.xml
new file mode 100644
index 0000000..8511f4d
--- /dev/null
+++ b/app/src/main/res/drawable/thumb_dimension_percentage.xml
@@ -0,0 +1,54 @@
+<!--
+  ~ 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="#4fc3f7" android:pathData="M245.63,212.95C251.15,212.95 255.63,217.43 255.63,222.95C255.63,261.93 255.63,368.89 255.63,407.87C255.63,413.39 251.15,417.87 245.63,417.87C208.5,417.87 107.13,417.87 70,417.87C64.48,417.87 60,413.39 60,407.87C60,368.89 60,261.93 60,222.95C60,217.43 64.48,212.95 70,212.95C107.13,212.95 208.5,212.95 245.63,212.95Z"/>
+    <path android:fillAlpha="1" android:fillColor="#f06292" android:pathData="M548.7,74.51C554.28,74.51 558.8,79.03 558.8,84.61C558.8,180.79 558.8,459.21 558.8,555.39C558.8,560.97 554.28,565.49 548.7,565.49C511.2,565.49 408.8,565.49 371.3,565.49C365.72,565.49 361.2,560.97 361.2,555.39C361.2,459.21 361.2,180.79 361.2,84.61C361.2,79.03 365.72,74.51 371.3,74.51C408.8,74.51 511.2,74.51 548.7,74.51Z"/>
+    <path android:fillAlpha="1" android:fillColor="#000000" android:pathData="M440,334.67C440,344.94 431.66,353.28 421.39,353.28C411.12,353.28 402.79,344.94 402.79,334.67C402.79,324.4 411.12,316.07 421.39,316.07C431.66,316.07 440,324.4 440,334.67Z"/>
+    <path android:fillAlpha="0" android:fillColor="#ffffff" android:pathData="M448.1,195.07C448.1,209.23 437.84,220.73 425.2,220.73C412.56,220.73 402.3,209.23 402.3,195.07C402.3,180.91 412.56,169.41 425.2,169.41C437.84,169.41 448.1,180.91 448.1,195.07Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M448.1,195.07C448.1,209.23 437.84,220.73 425.2,220.73C412.56,220.73 402.3,209.23 402.3,195.07C402.3,180.91 412.56,169.41 425.2,169.41C437.84,169.41 448.1,180.91 448.1,195.07Z"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="12"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M403.06,241.63C407.21,251.01 413.1,255.63 420.73,255.51C422.53,255.48 424.68,255.42 427.19,255.32C438.86,254.9 448.1,245.31 448.1,233.63C448.1,228.71 448.1,216.43 448.1,196.78"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="12"/>
+    <path android:fillAlpha="0" android:fillColor="#ffffff" android:pathData="M493.77,168.2C502.73,168.2 510,175.46 510,184.42C510,189.34 510,201.64 510,221.31C510,232.88 510,240.1 510,243C510,250.58 503.85,256.72 496.27,256.72C491.02,256.72 490.14,256.72 485.17,256.72C476.79,256.72 470,249.93 470,241.55C470,226.88 470,198.04 470,183.37C470,174.99 476.79,168.2 485.17,168.2C490.14,168.2 489.02,168.2 493.77,168.2Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M493.77,168.2C502.73,168.2 510,175.46 510,184.42C510,189.34 510,201.64 510,221.31C510,232.88 510,240.1 510,243C510,250.58 503.85,256.72 496.27,256.72C491.02,256.72 490.14,256.72 485.17,256.72C476.79,256.72 470,249.93 470,241.55C470,226.88 470,198.04 470,183.37C470,174.99 476.79,168.2 485.17,168.2C490.14,168.2 489.02,168.2 493.77,168.2Z"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="12"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M513.69,300L406.31,438.52"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="15"/>
+    <path android:fillAlpha="1" android:fillColor="#000000" android:pathData="M510,406.97C510,417.24 501.66,425.57 491.39,425.57C481.12,425.57 472.79,417.24 472.79,406.97C472.79,396.7 481.12,388.36 491.39,388.36C501.66,388.36 510,396.7 510,406.97Z"/>
+    <path android:fillAlpha="1" android:fillColor="#000000" android:pathData="M150.62,348.39C150.62,353.58 146.41,357.79 141.22,357.79C136.04,357.79 131.83,353.58 131.83,348.39C131.83,343.21 136.04,339 141.22,339C146.41,339 150.62,343.21 150.62,348.39Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M188.17,330.07L133.96,400"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="11"/>
+    <path android:fillAlpha="1" android:fillColor="#000000" android:pathData="M185.95,384.89C185.95,390.07 181.75,394.28 176.56,394.28C171.38,394.28 167.17,390.07 167.17,384.89C167.17,379.71 171.38,375.5 176.56,375.5C181.75,375.5 185.95,379.71 185.95,384.89Z"/>
+    <path android:fillAlpha="0" android:fillColor="#ffffff" android:pathData="M185.23,228.74C193.39,228.74 200,235.35 200,243.51C200,247.87 200,258.75 200,276.18C200,286.38 200,292.76 200,295.31C200,302.21 194.41,307.8 187.51,307.8C182.73,307.8 181.92,307.8 177.41,307.8C169.78,307.8 163.6,301.62 163.6,294C163.6,280.94 163.6,255.6 163.6,242.55C163.6,234.92 169.78,228.74 177.41,228.74C181.92,228.74 180.9,228.74 185.23,228.74Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M185.23,228.74C193.39,228.74 200,235.35 200,243.51C200,247.87 200,258.75 200,276.18C200,286.38 200,292.76 200,295.31C200,302.21 194.41,307.8 187.51,307.8C182.73,307.8 181.92,307.8 177.41,307.8C169.78,307.8 163.6,301.62 163.6,294C163.6,280.94 163.6,255.6 163.6,242.55C163.6,234.92 169.78,228.74 177.41,228.74C181.92,228.74 180.9,228.74 185.23,228.74Z"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="9"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M138.53,310L138.53,250.12L138.53,274.28L102.13,274.28L102.13,227.42"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="9"/>
+</vector>
diff --git a/app/src/main/res/layout/preview_dimension_percent.xml b/app/src/main/res/layout/preview_dimension_percent.xml
new file mode 100644
index 0000000..0e2d3c5
--- /dev/null
+++ b/app/src/main/res/layout/preview_dimension_percent.xml
@@ -0,0 +1,61 @@
+<?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:foreground="@drawable/ic_grid_overlay"
+    android:foregroundTint="@color/grid_tint"
+    tools:context=".layoutpreview.LayoutPreviewBaseActivity">
+
+
+    <!--
+        1st view that has "40%" width dimension based on width-constraints (in this case full screen width)
+        See `layout_constraintWidth_percent`
+    -->
+    <ImageView
+        android:id="@+id/view_dimension_ratio_1to1"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="30dp"
+        android:background="@color/md_light_blue_300"
+        android:src="@drawable/ic_image_black_140dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintWidth_percent="0.40" />
+
+
+    <!--
+        2nd view that has "90%" height dimension based on height-constraints (in this case full screen height)
+        See `layout_constraintHeight_percent`
+    -->
+    <ImageView
+        android:id="@+id/view_dimension_ratio_16to9_width_constrained"
+        android:layout_width="wrap_content"
+        android:layout_height="0dp"
+        android:background="@color/md_pink_300"
+        android:src="@drawable/ic_image_black_140dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHeight_percent="0.90"
+        app:layout_constraintStart_toEndOf="@+id/view_dimension_ratio_1to1"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/resources/vector/ic_dimension_percentage.svg b/resources/vector/ic_dimension_percentage.svg
new file mode 100644
index 0000000..bfac1a8
--- /dev/null
+++ b/resources/vector/ic_dimension_percentage.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="a20netMf69"></path><path d="M245.63 212.95C251.15 212.95 255.63 217.43 255.63 222.95C255.63 261.93 255.63 368.89 255.63 407.87C255.63 413.39 251.15 417.87 245.63 417.87C208.5 417.87 107.13 417.87 70 417.87C64.48 417.87 60 413.39 60 407.87C60 368.89 60 261.93 60 222.95C60 217.43 64.48 212.95 70 212.95C107.13 212.95 208.5 212.95 245.63 212.95Z" id="am2rx1zfj"></path><path d="M548.7 74.51C554.28 74.51 558.8 79.03 558.8 84.61C558.8 180.79 558.8 459.21 558.8 555.39C558.8 560.97 554.28 565.49 548.7 565.49C511.2 565.49 408.8 565.49 371.3 565.49C365.72 565.49 361.2 560.97 361.2 555.39C361.2 459.21 361.2 180.79 361.2 84.61C361.2 79.03 365.72 74.51 371.3 74.51C408.8 74.51 511.2 74.51 548.7 74.51Z" id="dRqewuyT"></path><path d="M440 334.67C440 344.94 431.66 353.28 421.39 353.28C411.12 353.28 402.79 344.94 402.79 334.67C402.79 324.4 411.12 316.07 421.39 316.07C431.66 316.07 440 324.4 440 334.67Z" id="a39PmSNZ38"></path><path d="M448.1 195.07C448.1 209.23 437.84 220.73 425.2 220.73C412.56 220.73 402.3 209.23 402.3 195.07C402.3 180.91 412.56 169.41 425.2 169.41C437.84 169.41 448.1 180.91 448.1 195.07Z" id="a1GlyLRqde"></path><path d="M403.06 241.63C407.21 251.01 413.1 255.63 420.73 255.51C422.53 255.48 424.68 255.42 427.19 255.32C438.86 254.9 448.1 245.31 448.1 233.63C448.1 228.71 448.1 216.43 448.1 196.78" id="mLhv66Pg"></path><path d="M493.77 168.2C502.73 168.2 510 175.46 510 184.42C510 189.34 510 201.64 510 221.31C510 232.88 510 240.1 510 243C510 250.58 503.85 256.72 496.27 256.72C491.02 256.72 490.14 256.72 485.17 256.72C476.79 256.72 470 249.93 470 241.55C470 226.88 470 198.04 470 183.37C470 174.99 476.79 168.2 485.17 168.2C490.14 168.2 489.02 168.2 493.77 168.2Z" id="a2mU8fPfPi"></path><path d="M513.69 300L406.31 438.52" id="f7b9r3K4p"></path><path d="M510 406.97C510 417.24 501.66 425.57 491.39 425.57C481.12 425.57 472.79 417.24 472.79 406.97C472.79 396.7 481.12 388.36 491.39 388.36C501.66 388.36 510 396.7 510 406.97Z" id="a1lPRT5uG"></path><path d="M150.62 348.39C150.62 353.58 146.41 357.79 141.22 357.79C136.04 357.79 131.83 353.58 131.83 348.39C131.83 343.21 136.04 339 141.22 339C146.41 339 150.62 343.21 150.62 348.39Z" id="b7URvlwl6n"></path><path d="M188.17 330.07L133.96 400" id="aXsdmiFcE"></path><path d="M185.95 384.89C185.95 390.07 181.75 394.28 176.56 394.28C171.38 394.28 167.17 390.07 167.17 384.89C167.17 379.71 171.38 375.5 176.56 375.5C181.75 375.5 185.95 379.71 185.95 384.89Z" id="c6a40vB9T1"></path><path d="M185.23 228.74C193.39 228.74 200 235.35 200 243.51C200 247.87 200 258.75 200 276.18C200 286.38 200 292.76 200 295.31C200 302.21 194.41 307.8 187.51 307.8C182.73 307.8 181.92 307.8 177.41 307.8C169.78 307.8 163.6 301.62 163.6 294C163.6 280.94 163.6 255.6 163.6 242.55C163.6 234.92 169.78 228.74 177.41 228.74C181.92 228.74 180.9 228.74 185.23 228.74Z" id="c6B544DwO"></path><path d="M138.53 310L138.53 250.12L138.53 274.28L102.13 274.28L102.13 227.42" id="d1jxYvegxd"></path></defs><g><g><g><use xlink:href="#a20netMf69" opacity="1" fill="#000000" fill-opacity="0"></use><g><use xlink:href="#a20netMf69" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="2" stroke-opacity="1"></use></g></g><g><use xlink:href="#am2rx1zfj" opacity="1" fill="#4fc3f7" fill-opacity="1"></use></g><g><use xlink:href="#dRqewuyT" opacity="1" fill="#f06292" fill-opacity="1"></use></g><g><use xlink:href="#a39PmSNZ38" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><g><use xlink:href="#a1GlyLRqde" opacity="1" fill="#ffffff" fill-opacity="0"></use><g><use xlink:href="#a1GlyLRqde" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="12" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#mLhv66Pg" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="12" stroke-opacity="1"></use></g></g></g><g><use xlink:href="#a2mU8fPfPi" opacity="1" fill="#ffffff" fill-opacity="0"></use><g><use xlink:href="#a2mU8fPfPi" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="12" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#f7b9r3K4p" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="15" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1lPRT5uG" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><use xlink:href="#b7URvlwl6n" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><g><use xlink:href="#aXsdmiFcE" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="11" stroke-opacity="1"></use></g></g><g><use xlink:href="#c6a40vB9T1" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><use xlink:href="#c6B544DwO" opacity="1" fill="#ffffff" fill-opacity="0"></use><g><use xlink:href="#c6B544DwO" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="9" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#d1jxYvegxd" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="9" stroke-opacity="1"></use></g></g></g></g></svg>
\ No newline at end of file