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

Commit 7aaa75c

Browse files
hossain-khanhossain-khan
authored
Merge pull request #23 from amardeshbd/feature/22_circular_positioning
[ADDED] [#22] Circular positioning example.
2 parents 9a9a287 + 12112a6 commit 7aaa75c

File tree

11 files changed

+214
-11
lines changed

11 files changed

+214
-11
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ A demo application for Android `ConstraintLayout` with various usage with sample
1919
* [ ] Vertical Axis: top, bottom sides and text baseline
2020
- [ ] Margins
2121
- [x] Centering positioning and bias
22-
- [ ] Circular positioning _(Added in 1.1)_
22+
- [x] Circular positioning _(Added in 1.1)_
2323
- [ ] Visibility behavior
2424
- [ ] Dimension constraints
2525
* [ ] Ratio
@@ -49,4 +49,4 @@ These are the **my** objectives for this demo application.
4949
## Preview
5050
Here is a snapshot of current progress _(This will be updated from time to time)_.
5151

52-
![Browse Layout Variances](https://user-images.githubusercontent.com/99822/39676220-f20ef5c6-5134-11e8-9430-08f90b5fe5fb.png) ![Show Layout Screen](https://user-images.githubusercontent.com/99822/39676265-a0bb1f28-5135-11e8-8c34-014cef844e97.png)
52+
![Browse Layout Variances](https://user-images.githubusercontent.com/99822/39677044-d235942c-5142-11e8-972d-bb0885f87384.png) ![Show Layout Screen](https://user-images.githubusercontent.com/99822/39676265-a0bb1f28-5135-11e8-8c34-014cef844e97.png)

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,23 @@ class LayoutDataStore @Inject constructor(
2929
val supportedLayoutInfos = listOf(
3030
LayoutInformation(
3131
layoutResourceId = R.layout.preview_positioning_top_left,
32-
thumbnailResourceId = R.drawable.ic_positioning_top_left,
32+
thumbnailResourceId = R.drawable.thumb_positioning_top_left,
3333
title = "Positioning: Top Left",
3434
description = "Top left using constraints."),
3535
LayoutInformation(
3636
layoutResourceId = R.layout.preview_positioning_centered,
37-
thumbnailResourceId = R.drawable.ic_positioning_center,
37+
thumbnailResourceId = R.drawable.thumb_positioning_center,
3838
title = "Positioning: Centered",
39-
description = "Centered view using constraints on top-bottom and left-right.")
39+
description = "Centered view using constraints on top-bottom and left-right."),
40+
LayoutInformation(
41+
layoutResourceId = R.layout.preview_positioning_circular,
42+
thumbnailResourceId = R.drawable.thumb_positioning_circular,
43+
title = "Positioning: Circular",
44+
description = "You can constrain a widget center relative to another widget center, at an angle and a distance. This allows you to position a widget on a circle." +
45+
"\n\n" +
46+
"layout_constraintCircle : references another widget id\n" +
47+
"layout_constraintCircleRadius : the distance to the other widget center\n" +
48+
"layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)\n")
4049
)
4150

4251
/**
@@ -49,7 +58,7 @@ class LayoutDataStore @Inject constructor(
4958
/**
5059
* Returns Github URL for layout resource file for this project.
5160
*
52-
* @param
61+
* @param layoutResourceId The layout resource ID to generate the URL for.
5362
* @return The URL to load the layout blob file.
5463
*/
5564
fun getLayoutUrl(@LayoutRes layoutResourceId: Int): String {

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<!--
4+
~ Copyright (c) 2018 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+
<shape xmlns:android="http://schemas.android.com/apk/res/android"
20+
android:shape="oval">
21+
<stroke
22+
android:width="2dp"
23+
android:color="#11000000"/>
24+
</shape>

app/src/main/res/drawable/ic_positioning_center.xml renamed to app/src/main/res/drawable/thumb_positioning_center.xml

File renamed without changes.

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!--
2+
~ Copyright (c) 2018 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:height="24dp" android:viewportHeight="640"
18+
android:viewportWidth="640" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
19+
<path android:fillAlpha="0" android:fillColor="#FF000000"
20+
android:pathData="M2.19,637.84L637.81,637.84L637.81,2.16L2.19,2.16L2.19,637.84Z"
21+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="2"/>
22+
<path android:fillAlpha="1" android:fillColor="#00838f" android:pathData="M535.91,77.48C539.65,77.48 542.68,80.51 542.68,84.25C542.68,103.9 542.68,156.1 542.68,175.75C542.68,179.49 539.65,182.52 535.91,182.52C517.81,182.52 470.28,182.52 452.18,182.52C448.44,182.52 445.41,179.49 445.41,175.75C445.41,156.1 445.41,103.9 445.41,84.25C445.41,80.51 448.44,77.48 452.18,77.48C470.28,77.48 517.81,77.48 535.91,77.48Z"/>
23+
<path android:fillAlpha="0" android:fillColor="#ffffff" android:pathData="M576.28,320C576.28,461.45 461.45,576.28 320,576.28C178.55,576.28 63.72,461.45 63.72,320C63.72,178.55 178.55,63.72 320,63.72C461.45,63.72 576.28,178.55 576.28,320Z"/>
24+
<path android:fillAlpha="0" android:fillColor="#FF000000"
25+
android:pathData="M576.28,320C576.28,461.45 461.45,576.28 320,576.28C178.55,576.28 63.72,461.45 63.72,320C63.72,178.55 178.55,63.72 320,63.72C461.45,63.72 576.28,178.55 576.28,320Z"
26+
android:strokeAlpha="0.8" android:strokeColor="#ff3c3c" android:strokeWidth="4"/>
27+
<path android:fillAlpha="1" android:fillColor="#00acc1" android:pathData="M407.81,213.54C413.34,213.54 417.81,218.02 417.81,223.54C417.81,262.52 417.81,369.48 417.81,408.46C417.81,413.98 413.34,418.46 407.81,418.46C370.69,418.46 269.31,418.46 232.19,418.46C226.66,418.46 222.19,413.98 222.19,408.46C222.19,369.48 222.19,262.52 222.19,223.54C222.19,218.02 226.66,213.54 232.19,213.54C269.31,213.54 370.69,213.54 407.81,213.54Z"/>
28+
<path android:fillAlpha="0.8" android:fillColor="#ff3c3c" android:pathData="M332.24,320C332.24,326.76 326.76,332.24 320,332.24C313.24,332.24 307.76,326.76 307.76,320C307.76,313.24 313.24,307.76 320,307.76C326.76,307.76 332.24,313.24 332.24,320Z"/>
29+
<path android:fillAlpha="0.8" android:fillColor="#ff3c3c" android:pathData="M504.48,130C504.48,136.76 499,142.24 492.24,142.24C485.48,142.24 480,136.76 480,130C480,123.24 485.48,117.76 492.24,117.76C499,117.76 504.48,123.24 504.48,130Z"/>
30+
<path android:fillAlpha="0" android:fillColor="#FF000000"
31+
android:pathData="M492.4,130L320,320" android:strokeAlpha="0.8"
32+
android:strokeColor="#ff3c3c" android:strokeWidth="3"/>
33+
<path android:fillAlpha="0" android:fillColor="#FF000000"
34+
android:pathData="M320,79.67L320,46.39"
35+
android:strokeAlpha="0.8" android:strokeColor="#ff3c3c" android:strokeWidth="3"/>
36+
</vector>

app/src/main/res/drawable/ic_positioning_top_left.xml renamed to app/src/main/res/drawable/thumb_positioning_top_left.xml

File renamed without changes.

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<!--
4+
~ Copyright (c) 2018 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+
<!--
20+
NOTE: Only used as guides on "layout/preview_positioning_circular".
21+
-->
22+
<merge xmlns:android="http://schemas.android.com/apk/res/android"
23+
xmlns:app="http://schemas.android.com/apk/res-auto"
24+
xmlns:tools="http://schemas.android.com/tools"
25+
tools:showIn="@layout/preview_positioning_circular">
26+
27+
28+
<View
29+
android:id="@+id/view_circle_radius_150dp"
30+
android:layout_width="300dp"
31+
android:layout_height="300dp"
32+
android:background="@drawable/ic_circle_overlay"
33+
app:layout_constraintBottom_toBottomOf="parent"
34+
app:layout_constraintEnd_toEndOf="parent"
35+
app:layout_constraintStart_toStartOf="parent"
36+
app:layout_constraintTop_toTopOf="parent" />
37+
38+
<View
39+
android:id="@+id/view_circle_radius_100dp"
40+
android:layout_width="200dp"
41+
android:layout_height="200dp"
42+
android:background="@drawable/ic_circle_overlay"
43+
app:layout_constraintBottom_toBottomOf="parent"
44+
app:layout_constraintEnd_toEndOf="parent"
45+
app:layout_constraintStart_toStartOf="parent"
46+
app:layout_constraintTop_toTopOf="parent" />
47+
</merge>

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
~ limitations under the License.
1515
-->
1616

17-
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
<android.support.constraint.ConstraintLayout
18+
xmlns:android="http://schemas.android.com/apk/res/android"
1819
xmlns:app="http://schemas.android.com/apk/res-auto"
1920
xmlns:tools="http://schemas.android.com/tools"
2021
android:layout_width="match_parent"
@@ -29,11 +30,9 @@
2930
-->
3031
<View
3132
android:id="@+id/view"
32-
android:layout_width="@dimen/box_size_medium"
33-
android:layout_height="@dimen/box_size_medium"
34-
android:background="@color/md_red_700"
3533
app:layout_constraintBottom_toBottomOf="parent"
3634
app:layout_constraintEnd_toEndOf="parent"
3735
app:layout_constraintStart_toStartOf="parent"
38-
app:layout_constraintTop_toTopOf="parent" />
36+
app:layout_constraintTop_toTopOf="parent"
37+
style="@style/MediumBox" />
3938
</android.support.constraint.ConstraintLayout>

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<!--
4+
~ Copyright (c) 2018 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+
<android.support.constraint.ConstraintLayout
20+
xmlns:android="http://schemas.android.com/apk/res/android"
21+
xmlns:app="http://schemas.android.com/apk/res-auto"
22+
xmlns:tools="http://schemas.android.com/tools"
23+
android:layout_width="match_parent"
24+
android:layout_height="match_parent">
25+
26+
27+
<!--
28+
First setup a centered view which will be used to place other textviews using circular angle.
29+
-->
30+
<View
31+
android:id="@+id/view_centered"
32+
style="@style/MediumBox"
33+
app:layout_constraintBottom_toBottomOf="parent"
34+
app:layout_constraintEnd_toEndOf="parent"
35+
app:layout_constraintStart_toStartOf="parent"
36+
app:layout_constraintTop_toTopOf="parent" />
37+
38+
<!--
39+
Text at 45 degree with distance 100dp from centered box.
40+
-->
41+
<TextView
42+
style="@style/SimpleInfoTextView"
43+
android:text="Text at 45 degree\nRadius/Distance 100dp"
44+
app:layout_constraintCircle="@+id/view_centered"
45+
app:layout_constraintCircleAngle="45"
46+
app:layout_constraintCircleRadius="100dp"
47+
tools:ignore="HardcodedText" />
48+
49+
<!--
50+
Text at 220 degree with distance 150dp from centered box.
51+
-->
52+
<TextView
53+
style="@style/SimpleInfoTextView"
54+
android:text="Text at 220 degree\nRadius/Distance 150dp"
55+
app:layout_constraintCircle="@+id/view_centered"
56+
app:layout_constraintCircleAngle="220"
57+
app:layout_constraintCircleRadius="150dp"
58+
tools:ignore="HardcodedText" />
59+
60+
61+
<!--
62+
Debug view to show circle around the main view with radius.
63+
Ignore these definitions below.
64+
-->
65+
<include layout="@layout/include_layout_positioning_circle_overlay" />
66+
67+
</android.support.constraint.ConstraintLayout>

‎app/src/main/res/values/styles.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,16 @@
88
<item name="colorAccent">@color/colorAccent</item>
99
</style>
1010

11+
<style name="MediumBox">
12+
<item name="android:layout_width">@dimen/box_size_medium</item>
13+
<item name="android:layout_height">@dimen/box_size_medium</item>
14+
<item name="android:background">@color/md_red_700</item>
15+
</style>
16+
17+
<style name="SimpleInfoTextView">
18+
<item name="android:layout_width">wrap_content</item>
19+
<item name="android:layout_height">wrap_content</item>
20+
<item name="android:background">@color/md_amber_200</item>
21+
</style>
22+
1123
</resources>

0 commit comments

Comments
 (0)