Skip to content
This repository was archived by the owner on Aug 22, 2024. It is now read-only.

Commit e8addd4

Browse files
hossain-khanhossain-khan
committed
[ADDED] [#53] Percent Dimension example.
Fixes #53
1 parent 6d311c5 commit e8addd4

File tree

5 files changed

+129
-4
lines changed

5 files changed

+129
-4
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
3434
- [x] Visibility behavior
3535
- [ ] Dimension constraints
3636
* [x] Ratio
37-
* [ ] Percent dimension
37+
* [x] Percent dimension
3838
* [ ] Min and Max
3939
* [ ] `MATCH_CONSTRAINT` dimensions _(Added in 1.1)_
4040
* [ ] `WRAP_CONTENT` : enforcing constraints _(Added in 1.1)_
4141
* [ ] Widgets dimension constraints
4242
- [ ] Chains
4343
* [x] Chain Style
44-
* [ ] Weighted chains
44+
* [x] Weighted chains
4545
* [ ] Margins and chains _(Added in 1.1)_
4646
- [ ] Virtual Helpers objects
4747
* [ ] Guideline
@@ -51,7 +51,7 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
5151

5252
## Objective
5353
These are the **my** objectives for this demo application.
54-
* To explore all the features of constrainst layout
54+
* To explore all the features of constraint layout
5555
* Learn and use material design component in the sample app
5656
* Learn and use the new architecture components in the sample app
5757
* Learn and use proper architecture for the app - likely MVVM

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,14 @@ class LayoutDataStore @Inject constructor(
110110
"\n\n" +
111111
"The ratio can be expressed either as:\n" +
112112
"\n * a float value, representing a ratio between width and height" +
113-
"\n * a ratio in the form \"width:height\", for example: `layout_constraintDimensionRatio=\"16:9\"`")
113+
"\n * a ratio in the form \"width:height\", for example: `layout_constraintDimensionRatio=\"16:9\"`"),
114+
LayoutInformation(
115+
layoutResourceId = R.layout.preview_dimension_percent,
116+
thumbnailResourceId = R.drawable.thumb_dimension_percentage,
117+
title = "Dimension: Percent dimension",
118+
description = "To use percent, you need to set the following:\n\n" +
119+
"* The dimension should be set to MATCH_CONSTRAINT (0dp)\n" +
120+
"* Then set the `layout_constraintWidth_percent` or `layout_constraintHeight_percent` attributes to a value between 0.0 and 1.0")
114121
/*
115122
Next item template (easy to copy and paste)
116123
LayoutInformation(

‎app/src/main/res/drawable/thumb_dimension_percentage.xml

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!--
2+
~ Copyright (c) 2019 Hossain Khan
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
-->
16+
17+
<vector android:alpha="0.9" android:height="640dp"
18+
android:viewportHeight="640" android:viewportWidth="640"
19+
android:width="640dp" xmlns:android="http://schemas.android.com/apk/res/android">
20+
<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"/>
21+
<path android:fillAlpha="0" android:fillColor="#FF000000"
22+
android:pathData="M2.46,637.84L637.54,637.84L637.54,2.16L2.46,2.16L2.46,637.84Z"
23+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
24+
<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"/>
25+
<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"/>
26+
<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"/>
27+
<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"/>
28+
<path android:fillAlpha="0" android:fillColor="#FF000000"
29+
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"
30+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="12"/>
31+
<path android:fillAlpha="0" android:fillColor="#FF000000"
32+
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"
33+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="12"/>
34+
<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"/>
35+
<path android:fillAlpha="0" android:fillColor="#FF000000"
36+
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"
37+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="12"/>
38+
<path android:fillAlpha="0" android:fillColor="#FF000000"
39+
android:pathData="M513.69,300L406.31,438.52"
40+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="15"/>
41+
<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"/>
42+
<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"/>
43+
<path android:fillAlpha="0" android:fillColor="#FF000000"
44+
android:pathData="M188.17,330.07L133.96,400"
45+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="11"/>
46+
<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"/>
47+
<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"/>
48+
<path android:fillAlpha="0" android:fillColor="#FF000000"
49+
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"
50+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="9"/>
51+
<path android:fillAlpha="0" android:fillColor="#FF000000"
52+
android:pathData="M138.53,310L138.53,250.12L138.53,274.28L102.13,274.28L102.13,227.42"
53+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="9"/>
54+
</vector>

‎app/src/main/res/layout/preview_dimension_percent.xml

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<!--
4+
~ Copyright (c) 2019 Hossain Khan
5+
~
6+
~ Licensed under the Apache License, Version 2.0 (the "License");
7+
~ you may not use this file except in compliance with the License.
8+
~ You may obtain a copy of the License at
9+
~
10+
~ http://www.apache.org/licenses/LICENSE-2.0
11+
~
12+
~ Unless required by applicable law or agreed to in writing, software
13+
~ distributed under the License is distributed on an "AS IS" BASIS,
14+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
~ See the License for the specific language governing permissions and
16+
~ limitations under the License.
17+
-->
18+
19+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
20+
xmlns:app="http://schemas.android.com/apk/res-auto"
21+
xmlns:tools="http://schemas.android.com/tools"
22+
android:layout_width="match_parent"
23+
android:layout_height="match_parent"
24+
android:foreground="@drawable/ic_grid_overlay"
25+
android:foregroundTint="@color/grid_tint"
26+
tools:context=".layoutpreview.LayoutPreviewBaseActivity">
27+
28+
29+
<!--
30+
1st view that has "40%" width dimension based on width-constraints (in this case full screen width)
31+
See `layout_constraintWidth_percent`
32+
-->
33+
<ImageView
34+
android:id="@+id/view_dimension_ratio_1to1"
35+
android:layout_width="0dp"
36+
android:layout_height="wrap_content"
37+
android:layout_marginStart="30dp"
38+
android:background="@color/md_light_blue_300"
39+
android:src="@drawable/ic_image_black_140dp"
40+
app:layout_constraintBottom_toBottomOf="parent"
41+
app:layout_constraintStart_toStartOf="parent"
42+
app:layout_constraintTop_toTopOf="parent"
43+
app:layout_constraintWidth_percent="0.40" />
44+
45+
46+
<!--
47+
2nd view that has "90%" height dimension based on height-constraints (in this case full screen height)
48+
See `layout_constraintHeight_percent`
49+
-->
50+
<ImageView
51+
android:id="@+id/view_dimension_ratio_16to9_width_constrained"
52+
android:layout_width="wrap_content"
53+
android:layout_height="0dp"
54+
android:background="@color/md_pink_300"
55+
android:src="@drawable/ic_image_black_140dp"
56+
app:layout_constraintBottom_toBottomOf="parent"
57+
app:layout_constraintEnd_toEndOf="parent"
58+
app:layout_constraintHeight_percent="0.90"
59+
app:layout_constraintStart_toEndOf="@+id/view_dimension_ratio_1to1"
60+
app:layout_constraintTop_toTopOf="parent" />
61+
</androidx.constraintlayout.widget.ConstraintLayout>

‎resources/vector/ic_dimension_percentage.svg

+3
Loading

0 commit comments

Comments
 (0)