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

Commit 7e5f78c

Browse files
hossain-khanhossain-khan
authored
Merge pull request #62 from amardeshbd/52-dimension-ratio
[ADDED] [#52] Dimension ratio layout and resources added.
2 parents d9d9361 + 136e351 commit 7e5f78c

File tree

6 files changed

+206
-2
lines changed

6 files changed

+206
-2
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,18 @@ class LayoutDataStore @Inject constructor(
9999
"\n\n" +
100100
"For example, on a chain containing two elements using MATCH_CONSTRAINT, with " +
101101
"the first element using a weight of 2 and the second a weight of 1, the space occupied by the first element" +
102-
"will be twice that of the second element.")
102+
"will be twice that of the second element."),
103+
LayoutInformation(
104+
layoutResourceId = R.layout.preview_dimension_ratio,
105+
thumbnailResourceId = R.drawable.thumb_dimension_ratio,
106+
title = "Dimension: Ratio",
107+
description = "You can define one dimension of a widget as a ratio of the other one. In order to do that, " +
108+
"you need to have at least one constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), " +
109+
"and set the attribute layout_constraintDimensionRatio to a given ratio." +
110+
"\n\n" +
111+
"The ratio can be expressed either as:\n" +
112+
"\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\"`")
103114
/*
104115
Next item template (easy to copy and paste)
105116
LayoutInformation(

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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="140dp"
18+
android:tint="#666666" android:viewportHeight="24.0"
19+
android:viewportWidth="24.0" android:width="140dp" xmlns:android="http://schemas.android.com/apk/res/android">
20+
<path android:fillColor="#FF000000" android:pathData="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.5,13.5l2.5,3.01L14.5,12l4.5,6H5l3.5,-4.5z"/>
21+
</vector>

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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 xmlns:android="http://schemas.android.com/apk/res/android"
18+
android:width="24dp"
19+
android:height="24dp"
20+
android:viewportWidth="640"
21+
android:viewportHeight="640">
22+
<path
23+
android:fillAlpha="0"
24+
android:fillColor="#000000"
25+
android:pathData="M2.46,637.84L637.54,637.84L637.54,2.16L2.46,2.16L2.46,637.84Z" />
26+
<path
27+
android:fillAlpha="0"
28+
android:fillColor="#FF000000"
29+
android:pathData="M2.46,637.84L637.54,637.84L637.54,2.16L2.46,2.16L2.46,637.84Z"
30+
android:strokeWidth="2"
31+
android:strokeAlpha="1"
32+
android:strokeColor="#000000" />
33+
<path
34+
android:fillAlpha="1"
35+
android:fillColor="#00acc1"
36+
android:pathData="M245.63,40C251.15,40 255.63,44.48 255.63,50C255.63,88.98 255.63,195.93 255.63,234.92C255.63,240.44 251.15,244.92 245.63,244.92C208.5,244.92 107.13,244.92 70,244.92C64.48,244.92 60,240.44 60,234.92C60,195.93 60,88.98 60,50C60,44.48 64.48,40 70,40C107.13,40 208.5,40 245.63,40Z" />
37+
<path
38+
android:fillAlpha="1"
39+
android:fillColor="#9c83e3"
40+
android:pathData="M414.65,335.08C420.18,335.08 424.65,339.56 424.65,345.08C424.65,384.07 424.65,491.02 424.65,530C424.65,535.52 420.18,540 414.65,540C343.72,540 140.93,540 70,540C64.48,540 60,535.52 60,530C60,491.02 60,384.07 60,345.08C60,339.56 64.48,335.08 70,335.08C140.93,335.08 343.72,335.08 414.65,335.08Z" />
41+
<path
42+
android:fillAlpha="1"
43+
android:fillColor="#000000"
44+
android:pathData="M117.5,86.44L132.5,86.44L132.5,186.44L117.5,186.44L117.5,86.44Z" />
45+
<path
46+
android:fillAlpha="1"
47+
android:fillColor="#1c0f41"
48+
android:pathData="M172.5,116.44C172.5,121.96 168.02,126.44 162.5,126.44C156.98,126.44 152.5,121.96 152.5,116.44C152.5,110.93 156.98,106.44 162.5,106.44C168.02,106.44 172.5,110.93 172.5,116.44Z" />
49+
<path
50+
android:fillAlpha="1"
51+
android:fillColor="#1c0f41"
52+
android:pathData="M172.5,156.44C172.5,161.96 168.02,166.44 162.5,166.44C156.98,166.44 152.5,161.96 152.5,156.44C152.5,150.93 156.98,146.44 162.5,146.44C168.02,146.44 172.5,150.93 172.5,156.44Z" />
53+
<path
54+
android:fillAlpha="1"
55+
android:fillColor="#000000"
56+
android:pathData="M187.5,86.44L202.5,86.44L202.5,186.44L187.5,186.44L187.5,86.44Z" />
57+
<path
58+
android:fillAlpha="1"
59+
android:fillColor="#1c0f41"
60+
android:pathData="M268.17,413.78C268.17,419.3 263.69,423.78 258.17,423.78C252.65,423.78 248.17,419.3 248.17,413.78C248.17,408.26 252.65,403.78 258.17,403.78C263.69,403.78 268.17,408.26 268.17,413.78Z" />
61+
<path
62+
android:fillAlpha="1"
63+
android:fillColor="#1c0f41"
64+
android:pathData="M268.17,453.78C268.17,459.3 263.69,463.78 258.17,463.78C252.65,463.78 248.17,459.3 248.17,453.78C248.17,448.26 252.65,443.78 258.17,443.78C263.69,443.78 268.17,448.26 268.17,453.78Z" />
65+
<path
66+
android:fillAlpha="1"
67+
android:fillColor="#000000"
68+
android:pathData="M137.22,380L152.22,380L152.22,480L137.22,480L137.22,380Z" />
69+
<path
70+
android:fillAlpha="0"
71+
android:fillColor="#ffffff"
72+
android:pathData="M335.81,412.61C335.81,426.77 325.54,438.27 312.9,438.27C300.26,438.27 290,426.77 290,412.61C290,398.45 300.26,386.95 312.9,386.95C325.54,386.95 335.81,398.45 335.81,412.61Z" />
73+
<path
74+
android:fillAlpha="0"
75+
android:fillColor="#FF000000"
76+
android:pathData="M335.81,412.61C335.81,426.77 325.54,438.27 312.9,438.27C300.26,438.27 290,426.77 290,412.61C290,398.45 300.26,386.95 312.9,386.95C325.54,386.95 335.81,398.45 335.81,412.61Z"
77+
android:strokeWidth="12"
78+
android:strokeAlpha="1"
79+
android:strokeColor="#000000" />
80+
<path
81+
android:fillAlpha="0"
82+
android:fillColor="#FF000000"
83+
android:pathData="M290.76,459.17C294.91,468.55 300.8,473.17 308.44,473.05C310.24,473.02 312.39,472.96 314.89,472.87C326.56,472.44 335.81,462.85 335.81,451.17C335.81,446.26 335.81,433.97 335.81,414.32"
84+
android:strokeWidth="12"
85+
android:strokeAlpha="1"
86+
android:strokeColor="#000000" />
87+
<path
88+
android:fillAlpha="0"
89+
android:fillColor="#ffffff"
90+
android:pathData="M180,450.06C180,435.28 190.71,423.29 203.9,423.29C217.08,423.29 227.79,435.28 227.79,450.06C227.79,464.83 217.08,476.83 203.9,476.83C190.71,476.83 180,464.83 180,450.06Z" />
91+
<path
92+
android:fillAlpha="0"
93+
android:fillColor="#FF000000"
94+
android:pathData="M180,450.06C180,435.28 190.71,423.29 203.9,423.29C217.08,423.29 227.79,435.28 227.79,450.06C227.79,464.83 217.08,476.83 203.9,476.83C190.71,476.83 180,464.83 180,450.06Z"
95+
android:strokeWidth="12"
96+
android:strokeAlpha="1"
97+
android:strokeColor="#000000" />
98+
<path
99+
android:fillAlpha="0"
100+
android:fillColor="#FF000000"
101+
android:pathData="M227,401.47C222.67,391.69 216.52,386.86 208.56,387C206.68,387.03 204.43,387.09 201.82,387.19C189.64,387.63 180,397.64 180,409.82C180,414.95 180,427.77 180,448.27"
102+
android:strokeWidth="12"
103+
android:strokeAlpha="1"
104+
android:strokeColor="#000000" />
105+
</vector>

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
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+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:app="http://schemas.android.com/apk/res-auto"
19+
xmlns:tools="http://schemas.android.com/tools"
20+
android:layout_width="match_parent"
21+
android:layout_height="match_parent"
22+
android:foreground="@drawable/ic_grid_overlay"
23+
android:foregroundTint="@color/grid_tint"
24+
tools:context=".layoutpreview.LayoutPreviewBaseActivity">
25+
26+
27+
<!--
28+
1st view that has "1:1" aspect ratio
29+
-->
30+
<ImageView
31+
android:id="@+id/view_dimension_ratio_1to1"
32+
android:layout_width="0dp"
33+
android:layout_height="wrap_content"
34+
android:layout_marginTop="32dp"
35+
android:background="@color/md_teal_A400"
36+
android:src="@drawable/ic_image_black_140dp"
37+
app:layout_constraintDimensionRatio="1:1"
38+
app:layout_constraintEnd_toEndOf="parent"
39+
app:layout_constraintStart_toStartOf="parent"
40+
app:layout_constraintTop_toTopOf="parent" />
41+
42+
43+
<!--
44+
2nd view that is "16:9" aspect ratio with WIDTH as the constraint for the aspect ratio.
45+
-->
46+
<ImageView
47+
android:id="@+id/view_dimension_ratio_16to9_width_constrained"
48+
android:layout_width="0dp"
49+
android:layout_height="wrap_content"
50+
android:layout_marginBottom="32dp"
51+
android:background="@color/md_purple_300"
52+
android:src="@drawable/ic_image_black_140dp"
53+
app:layout_constraintBottom_toBottomOf="parent"
54+
app:layout_constraintDimensionRatio="W,16:9"
55+
app:layout_constraintEnd_toEndOf="parent"
56+
app:layout_constraintStart_toStartOf="parent" />
57+
</androidx.constraintlayout.widget.ConstraintLayout>

‎resources/vector/README.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,14 @@ To have consistent look, use following spec for layout thumbnail.
1414
* Name assets using conventions defined in [README](https://github.com/amardeshbd/android-constraint-layout-cheatsheet/blob/master/app/src/main/res/layout/.README.md)
1515
* Use Android Studio to import the **`SVG`** image to Android Vector drawable.
1616

17+
1718
Examples
1819
-----------
1920
* https://vectr.com/hossain/a11KCVsbcM.svg?width=640&height=640
20-
* https://vectr.com/hossain/dUHU9o4er.svg?width=640&height=640
21+
* https://vectr.com/hossain/dUHU9o4er.svg?width=640&height=640
22+
23+
24+
SVG to Vector Drawable
25+
-----------------------
26+
* Android studio - `New > Vector Asset`
27+
* https://a-student.github.io/SvgToVectorDrawableConverter.Web/

‎resources/vector/ic_dimension_ratio.svg

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)