[ADDED] [#54] Simple min max width & height example.

README.md

@@ -35,7 +35,7 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
 - [ ] Dimension constraints
   * [x] Ratio
   * [x] Percent dimension
-  * [ ] Min and Max
+  * [x] Min and Max
   * [ ] `MATCH_CONSTRAINT` dimensions _(Added in 1.1)_
   * [ ] `WRAP_CONTENT` : enforcing constraints _(Added in 1.1)_
   * [ ] Widgets dimension constraints

app/src/main/AndroidManifest.xml

@@ -34,6 +34,9 @@
         <activity
             android:name="com.hossainkhan.android.demo.ui.layoutpreview.LayoutGuidelineGroupActivity"
             android:parentActivityName="com.hossainkhan.android.demo.ui.browse.LayoutBrowseActivity" />
+        <activity
+            android:name="com.hossainkhan.android.demo.ui.layoutpreview.LayoutDimensionMinMaxActivity"
+            android:parentActivityName="com.hossainkhan.android.demo.ui.browse.LayoutBrowseActivity" />
     </application>
 
 </manifest>

app/src/main/java/com/hossainkhan/android/demo/data/LayoutDataStore.kt

@@ -111,13 +111,26 @@ class LayoutDataStore @Inject constructor(
                             "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\"`"),
+
+            /*
+             * https://developer.android.com/reference/android/support/constraint/ConstraintLayout#DimensionConstraints
+             */
+            LayoutInformation(
+                    layoutResourceId = R.layout.preview_dimension_min_max,
+                    thumbnailResourceId = R.drawable.thumb_dimension_min_max,
+                    title = "Dimension: Min & Max (width/height)",
+                    description = "You can define minimum and maximum sizes for the ConstraintLayout itself:\n\n" +
+                            "* Standard attributes can should be use - `minWidth`, `minHeight`, `maxWidth`, `maxHeight`.\n" +
+                            "* Those minimum and maximum dimensions will be used by ConstraintLayout when its dimensions are set to `WRAP_CONTENT`"),
+
             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"),
+
             LayoutInformation(
                     layoutResourceId = R.layout.preview_virtual_helper_guideline,
                     thumbnailResourceId = R.drawable.thumb_virtual_helper_guideline,

app/src/main/java/com/hossainkhan/android/demo/di/ActivityBindingModule.kt

@@ -17,6 +17,7 @@
 package com.hossainkhan.android.demo.di
 
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutChainStyleActivity
+import com.hossainkhan.android.demo.ui.layoutpreview.LayoutDimensionMinMaxActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutGuidelineBarrierActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutGuidelineGroupActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutPreviewBaseActivity
@@ -68,4 +69,8 @@ abstract class ActivityBindingModule {
     @ActivityScope
     @ContributesAndroidInjector
     abstract fun layoutGuidelineGroupActivity(): LayoutGuidelineGroupActivity
+
+    @ActivityScope
+    @ContributesAndroidInjector
+    abstract fun layoutDimensionMinMaxActivity(): LayoutDimensionMinMaxActivity
 }

app/src/main/java/com/hossainkhan/android/demo/ui/browse/LayoutBrowseViewModel.kt

@@ -23,6 +23,7 @@ import com.hossainkhan.android.demo.R
 import com.hossainkhan.android.demo.data.AppDataStore
 import com.hossainkhan.android.demo.data.LayoutInformation
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutChainStyleActivity
+import com.hossainkhan.android.demo.ui.layoutpreview.LayoutDimensionMinMaxActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutGuidelineBarrierActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutGuidelineGroupActivity
 import com.hossainkhan.android.demo.ui.layoutpreview.LayoutVisibilityGoneActivity
@@ -65,6 +66,9 @@ class LayoutBrowseViewModel(
             R.layout.preview_virtual_helper_group -> {
                 browseNavigator.loadLayoutPreview(LayoutGuidelineGroupActivity::class.java, layoutResId)
             }
+            R.layout.preview_dimension_min_max -> {
+                browseNavigator.loadLayoutPreview(LayoutDimensionMinMaxActivity::class.java, layoutResId)
+            }
             else -> {
                 // By default it loads the preview activity with the layout requested.
                 browseNavigator.loadLayoutPreview(layoutResId)

app/src/main/java/com/hossainkhan/android/demo/ui/layoutpreview/LayoutDimensionMinMaxActivity.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.ui.layoutpreview
+
+import android.os.Bundle
+import android.widget.Button
+import android.widget.TextView
+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 LayoutDimensionMinMaxActivity : 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_container_text)
+        val textLabel = findViewById<TextView>(R.id.text_view_with_min_max)
+
+        toggleButton.setOnClickListener {
+            if (textLabel.text == getString(R.string.label_text_small)) {
+                textLabel.setText(R.string.lorem_ipsum)
+            } else {
+                textLabel.setText(R.string.label_text_small)
+            }
+        }
+    }
+}

app/src/main/java/com/hossainkhan/android/demo/ui/layoutpreview/LayoutGuidelineBarrierActivity.kt

@@ -36,10 +36,10 @@ class LayoutGuidelineBarrierActivity : LayoutPreviewBaseActivity() {
         val textLabel = findViewById<TextView>(R.id.text_label)
 
         toggleButton.setOnClickListener {
-            if (textLabel.text == getString(R.string.barrier_label_text_small)) {
-                textLabel.setText(R.string.barrier_label_text_long)
+            if (textLabel.text == getString(R.string.label_text_small)) {
+                textLabel.setText(R.string.label_text_long)
             } else {
-                textLabel.setText(R.string.barrier_label_text_small)
+                textLabel.setText(R.string.label_text_small)
             }
         }
     }

app/src/main/res/drawable/thumb_dimension_min_max.xml

@@ -0,0 +1,70 @@
+<!--
+  ~ 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="M305.19,250C307.84,250 310,252.16 310,254.81C310,273.58 310,325.06 310,343.82C310,346.48 307.84,348.64 305.19,348.64C256.15,348.64 113.85,348.64 64.81,348.64C62.16,348.64 60,346.48 60,343.82C60,325.06 60,273.58 60,254.81C60,252.16 62.16,250 64.81,250C113.85,250 256.15,250 305.19,250Z"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M50,230L410,230L410,370L50,370L50,230Z"
+        android:strokeAlpha="1" android:strokeColor="#2cc893" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M40,221.36L606.18,221.36L606.18,378.64L40,378.64L40,221.36Z"
+        android:strokeAlpha="1" android:strokeColor="#2cc893" android:strokeWidth="3"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M391.73,330L400,340L320,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M391.73,350L400,340L320,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M328.27,330L320,340L400,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M328.27,350L320,340L400,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M572.42,330L590,340L420,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M572.42,350L590,340L420,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M433.44,330L420,340L550,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M433.44,350L420,340L550,340"
+        android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M470,318.54L470,269.74L450,288.54L430,269.74L430,320"
+        android:strokeAlpha="1" android:strokeColor="#14503c" android:strokeWidth="5"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M530,318.54L522.03,298.62L510,268.54L498.28,297.85L490,318.54"
+        android:strokeAlpha="1" android:strokeColor="#14503c" android:strokeWidth="5"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M521.47,298.54L497.91,298.54"
+        android:strokeAlpha="1" android:strokeColor="#14503c" android:strokeWidth="5"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M590,268.54L550,318.54"
+        android:strokeAlpha="1" android:strokeColor="#14503c" android:strokeWidth="5"/>
+    <path android:fillAlpha="0" android:fillColor="#FF000000"
+        android:pathData="M590,318.54L550,268.54"
+        android:strokeAlpha="1" android:strokeColor="#14503c" android:strokeWidth="5"/>
+</vector>

app/src/main/res/layout/.README.md

@@ -20,7 +20,7 @@ Each layout must also be named based on sub features. Use following convention t
 - Prefix: **`_dimension_`** | Dimension constraints
   * Prefix: **`_ratio_`** | Ratio
   * Prefix: **`_percent_`** | Percent dimension
-  * Prefix: **`_sizing_`** | Min and Max
+  * Prefix: **`_min_max_`** | Min and Max
   * Prefix: **`_TBD_`** | `MATCH_CONSTRAINT` dimensions _(Added in 1.1)_
   * Prefix: **`_TBD_`** | `WRAP_CONTENT` : enforcing constraints _(Added in 1.1)_
   * Prefix: **`_TBD_`** | Widgets dimension constraints

app/src/main/res/layout/preview_dimension_min_max.xml

@@ -0,0 +1,75 @@
+<?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"
+    tools:context="com.hossainkhan.android.demo.ui.layoutpreview.LayoutPreviewBaseActivity">
+
+
+    <TextView
+        android:id="@+id/text_view_with_min_max"
+        style="@style/TextAppearance.AppCompat.Medium"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:background="@color/md_pink_200"
+        android:ellipsize="end"
+        android:maxWidth="300dp"
+        android:maxHeight="200dp"
+        android:minWidth="200dp"
+        android:minHeight="100dp"
+        android:padding="8dp"
+        android:text="@string/label_text_small"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_bias="0.30" />
+
+
+
+    <!-- _________________ IGNORE VIEWS BELOW THIS LINE _________________ -->
+
+    <!--
+        A button to dynamically set label text to showcase the min and max width.
+    -->
+    <Button
+        android:id="@+id/toggle_container_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="20dp"
+        android:text="Toggle Text Content"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:ignore="HardcodedText" />
+
+    <TextView
+        android:id="@+id/guide_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="20dp"
+        android:gravity="center"
+        android:text="A view with minHeight=100dp, maxHeight=200dp, minWidth=200dp and maxWidth=300dp"
+        app:layout_constraintEnd_toEndOf="@+id/text_view_with_min_max"
+        app:layout_constraintStart_toStartOf="@+id/text_view_with_min_max"
+        app:layout_constraintTop_toBottomOf="@+id/text_view_with_min_max" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/preview_virtual_helper_barrier.xml

@@ -35,7 +35,7 @@
         android:id="@+id/text_label"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:text="@string/barrier_label_text_small"
+        android:text="@string/label_text_small"
         app:layout_constraintEnd_toEndOf="@id/barrier"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

app/src/main/res/values/strings.xml

@@ -16,8 +16,8 @@
 
     <string name="barrier_guide_text">In this Barrier example, the barrier is set on the right side of "Small Label" and "ACTION LABEL". Notice initially how this description is pushed by the action button. Now, if you toggle the label text, you will see the barrier also grows with it and pushes this content event further.</string>
 
-    <string name="barrier_label_text_small">Small Label</string>
-    <string name="barrier_label_text_long">Much Longer Translated Label</string>
+    <string name="label_text_small">Small Label</string>
+    <string name="label_text_long">Much Longer Translated Label</string>
 
     <string name="barrier_label_button_small">Action Label</string>
     <string name="barrier_label_button_long">Action Longer Translated Label</string>