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

Commit 1da61f5

Browse files
hossain-khanhossain-khan
authored
Merge pull request #76 from amardeshbd/51-virtual-guideline-group
[ADDED] [#51] Virtual guideline group demo.
2 parents 20b9209 + d0f669a commit 1da61f5

File tree

11 files changed

+224
-8
lines changed

11 files changed

+224
-8
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ See https://github.com/googlesamples/android-ConstraintLayoutExamples
4343
* [x] Chain Style
4444
* [x] Weighted chains
4545
* [ ] Margins and chains _(Added in 1.1)_
46-
- [ ] Virtual Helpers objects
46+
- [x] Virtual Helpers objects 🥇
4747
* [x] Guideline
48-
* [ ] Barrier
49-
* [ ] Group
48+
* [x] Barrier
49+
* [x] Group
5050
- [ ] Optimizer _(Added in 1.1)_
5151

5252
## Objective

‎app/src/main/AndroidManifest.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
<activity
3232
android:name=".layoutpreview.LayoutGuidelineBarrierActivity"
3333
android:parentActivityName=".browse.LayoutBrowseActivity" />
34+
<activity
35+
android:name=".layoutpreview.LayoutGuidelineGroupActivity"
36+
android:parentActivityName=".browse.LayoutBrowseActivity" />
3437
</application>
3538

3639
</manifest>

‎app/src/main/java/com/hossainkhan/android/demo/browse/LayoutBrowseActivity.kt‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,15 @@
1616

1717
package com.hossainkhan.android.demo.browse
1818

19-
import androidx.lifecycle.ViewModelProviders
2019
import android.os.Bundle
2120
import androidx.appcompat.app.AppCompatActivity
21+
import androidx.lifecycle.ViewModelProviders
2222
import androidx.recyclerview.widget.GridLayoutManager
2323
import androidx.recyclerview.widget.RecyclerView
2424
import com.hossainkhan.android.demo.R
2525
import com.hossainkhan.android.demo.layoutpreview.LayoutChainStyleActivity
2626
import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineBarrierActivity
27+
import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineGroupActivity
2728
import com.hossainkhan.android.demo.layoutpreview.LayoutPreviewBaseActivity
2829
import com.hossainkhan.android.demo.layoutpreview.LayoutVisibilityGoneActivity
2930
import com.hossainkhan.android.demo.viewmodel.LayoutPreviewViewModelFactory
@@ -78,6 +79,9 @@ class LayoutBrowseActivity : AppCompatActivity() {
7879
private fun onLayoutItemSelected(layoutResId: Int) {
7980
Timber.i("Selected layout id: %s", layoutResId)
8081

82+
/*
83+
* Where applicable, loads specific activity with interactive feature for user to try out feature.
84+
*/
8185
when (layoutResId) {
8286
R.layout.preview_visibility_gone -> {
8387
startActivity(LayoutPreviewBaseActivity.createStartIntent(this,
@@ -91,7 +95,12 @@ class LayoutBrowseActivity : AppCompatActivity() {
9195
startActivity(LayoutPreviewBaseActivity.createStartIntent(this,
9296
LayoutGuidelineBarrierActivity::class.java, R.layout.preview_virtual_helper_barrier))
9397
}
98+
R.layout.preview_virtual_helper_group -> {
99+
startActivity(LayoutPreviewBaseActivity.createStartIntent(this,
100+
LayoutGuidelineGroupActivity::class.java, R.layout.preview_virtual_helper_group))
101+
}
94102
else -> {
103+
// By default it loads the preview activity with the layout requested.
95104
startActivity(LayoutPreviewBaseActivity.createStartIntent(this, layoutResId))
96105
}
97106
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ package com.hossainkhan.android.demo.dagger
1818

1919
import com.hossainkhan.android.demo.layoutpreview.LayoutChainStyleActivity
2020
import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineBarrierActivity
21+
import com.hossainkhan.android.demo.layoutpreview.LayoutGuidelineGroupActivity
2122
import com.hossainkhan.android.demo.layoutpreview.LayoutPreviewBaseActivity
2223
import com.hossainkhan.android.demo.layoutpreview.LayoutVisibilityGoneActivity
2324
import dagger.Module
@@ -62,4 +63,8 @@ abstract class ActivityBindingModule {
6263
@ActivityScope
6364
@ContributesAndroidInjector
6465
abstract fun layoutGuidelineBarrierActivity(): LayoutGuidelineBarrierActivity
66+
67+
@ActivityScope
68+
@ContributesAndroidInjector
69+
abstract fun layoutGuidelineGroupActivity(): LayoutGuidelineGroupActivity
6570
}

‎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
@@ -135,7 +135,18 @@ class LayoutDataStore @Inject constructor(
135135
thumbnailResourceId = R.drawable.thumb_virtual_helper_barrier,
136136
title = "Virtual Helper: Barrier",
137137
description = "A Barrier references multiple widgets as input, and creates a virtual guideline " +
138-
"based on the most extreme widget on the specified side.")
138+
"based on the most extreme widget on the specified side."),
139+
140+
/*
141+
* https://developer.android.com/reference/android/support/constraint/Group.html
142+
*/
143+
LayoutInformation(
144+
layoutResourceId = R.layout.preview_virtual_helper_group,
145+
thumbnailResourceId = R.drawable.thumb_virtual_helper_group,
146+
title = "Virtual Helper: Group",
147+
description = "This class controls the visibility of a set of referenced widgets. " +
148+
"Widgets are referenced by being added to a comma separated list of ids.\n\n" +
149+
"For example you can link multiple views: `app:constraint_referenced_ids=\"viewId1,viewId2,viewId3\"` and control their visibility at once.")
139150

140151

141152
/*

‎app/src/main/java/com/hossainkhan/android/demo/layoutpreview/LayoutGuidelineGroupActivity.kt‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
package com.hossainkhan.android.demo.layoutpreview
18+
19+
import android.os.Bundle
20+
import android.view.View
21+
import android.widget.Button
22+
import androidx.constraintlayout.widget.Group
23+
import com.hossainkhan.android.demo.R
24+
25+
/**
26+
* Activity showcasing how virtual guideline group containing multiple views and how it can be changed.
27+
*
28+
* See https://developer.android.com/reference/android/support/constraint/Barrier
29+
*/
30+
class LayoutGuidelineGroupActivity : LayoutPreviewBaseActivity() {
31+
32+
override fun onCreate(savedInstanceState: Bundle?) {
33+
super.onCreate(savedInstanceState)
34+
35+
// Setup additional view that is only available in this screen.
36+
val toggleButton = findViewById<Button>(R.id.toggle_label_text_size)
37+
val groupOfViews = findViewById<Group>(R.id.visual_group)
38+
39+
toggleButton.setOnClickListener {
40+
when (groupOfViews.visibility) {
41+
View.VISIBLE -> groupOfViews.visibility = View.GONE
42+
else -> groupOfViews.visibility = View.VISIBLE
43+
}
44+
}
45+
}
46+
}

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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="#df7ee6" android:pathData="M202.68,160C206.72,160 210,163.28 210,167.32C210,195.86 210,274.14 210,302.68C210,306.72 206.72,310 202.68,310C174.14,310 95.86,310 67.32,310C63.28,310 60,306.72 60,302.68C60,274.14 60,195.86 60,167.32C60,163.28 63.28,160 67.32,160C95.86,160 174.14,160 202.68,160Z"/>
25+
<path android:fillAlpha="0" android:fillColor="#FF000000"
26+
android:pathData="M202.68,160C206.72,160 210,163.28 210,167.32C210,195.86 210,274.14 210,302.68C210,306.72 206.72,310 202.68,310C174.14,310 95.86,310 67.32,310C63.28,310 60,306.72 60,302.68C60,274.14 60,195.86 60,167.32C60,163.28 63.28,160 67.32,160C95.86,160 174.14,160 202.68,160Z"
27+
android:strokeAlpha="1" android:strokeWidth="0"/>
28+
<path android:fillAlpha="1" android:fillColor="#7ee698" android:pathData="M382.68,160C386.72,160 390,163.28 390,167.32C390,195.86 390,274.14 390,302.68C390,306.72 386.72,310 382.68,310C354.14,310 275.86,310 247.32,310C243.28,310 240,306.72 240,302.68C240,274.14 240,195.86 240,167.32C240,163.28 243.28,160 247.32,160C275.86,160 354.14,160 382.68,160Z"/>
29+
<path android:fillAlpha="0" android:fillColor="#FF000000"
30+
android:pathData="M382.68,160C386.72,160 390,163.28 390,167.32C390,195.86 390,274.14 390,302.68C390,306.72 386.72,310 382.68,310C354.14,310 275.86,310 247.32,310C243.28,310 240,306.72 240,302.68C240,274.14 240,195.86 240,167.32C240,163.28 243.28,160 247.32,160C275.86,160 354.14,160 382.68,160Z"
31+
android:strokeAlpha="1" android:strokeWidth="0"/>
32+
<path android:fillAlpha="1" android:fillColor="#7eb4e6" android:pathData="M562.68,160C566.72,160 570,163.28 570,167.32C570,195.86 570,274.14 570,302.68C570,306.72 566.72,310 562.68,310C534.14,310 455.86,310 427.32,310C423.28,310 420,306.72 420,302.68C420,274.14 420,195.86 420,167.32C420,163.28 423.28,160 427.32,160C455.86,160 534.14,160 562.68,160Z"/>
33+
<path android:fillAlpha="0" android:fillColor="#FF000000"
34+
android:pathData="M562.68,160C566.72,160 570,163.28 570,167.32C570,195.86 570,274.14 570,302.68C570,306.72 566.72,310 562.68,310C534.14,310 455.86,310 427.32,310C423.28,310 420,306.72 420,302.68C420,274.14 420,195.86 420,167.32C420,163.28 423.28,160 427.32,160C455.86,160 534.14,160 562.68,160Z"
35+
android:strokeAlpha="1" android:strokeWidth="0"/>
36+
<path android:fillAlpha="0" android:fillColor="#ffffff" android:pathData="M592.15,135.5C596.87,135.5 600.7,139.32 600.7,144.04C600.7,182.25 600.7,288.34 600.7,326.55C600.7,331.27 596.87,335.1 592.15,335.1C481.58,335.1 158.42,335.1 47.85,335.1C43.13,335.1 39.3,331.27 39.3,326.55C39.3,288.34 39.3,182.25 39.3,144.04C39.3,139.32 43.13,135.5 47.85,135.5C158.42,135.5 481.58,135.5 592.15,135.5Z"/>
37+
<path android:fillAlpha="0" android:fillColor="#FF000000"
38+
android:pathData="M592.15,135.5C596.87,135.5 600.7,139.32 600.7,144.04C600.7,182.25 600.7,288.34 600.7,326.55C600.7,331.27 596.87,335.1 592.15,335.1C481.58,335.1 158.42,335.1 47.85,335.1C43.13,335.1 39.3,331.27 39.3,326.55C39.3,288.34 39.3,182.25 39.3,144.04C39.3,139.32 43.13,135.5 47.85,135.5C158.42,135.5 481.58,135.5 592.15,135.5Z"
39+
android:strokeAlpha="1" android:strokeColor="#000000" android:strokeWidth="8"/>
40+
<path android:fillAlpha="0" android:fillColor="#FF000000"
41+
android:pathData="M270,460L356.78,370" android:strokeAlpha="1"
42+
android:strokeColor="#ff0000" android:strokeWidth="16"/>
43+
<path android:fillAlpha="1" android:fillColor="#fc0000" android:pathData="M270,370L356.78,460"/>
44+
<path android:fillAlpha="0" android:fillColor="#FF000000"
45+
android:pathData="M270,370L356.78,460" android:strokeAlpha="1"
46+
android:strokeColor="#fc0000" android:strokeWidth="16"/>
47+
</vector>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
xmlns:tools="http://schemas.android.com/tools"
2222
android:layout_width="match_parent"
2323
android:layout_height="match_parent"
24-
android:layout_margin="16dp">
24+
android:layout_margin="16dp"
25+
android:animateLayoutChanges="true">
2526

2627
<androidx.constraintlayout.widget.Barrier
2728
android:id="@+id/barrier"

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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:layout_margin="16dp"
25+
android:animateLayoutChanges="true">
26+
27+
<!-- This virtual helper has `constraint_referenced_ids` to multiple views to apply visibility to all of them -->
28+
<androidx.constraintlayout.widget.Group
29+
android:id="@+id/visual_group"
30+
android:layout_width="wrap_content"
31+
android:layout_height="wrap_content"
32+
android:visibility="visible"
33+
app:constraint_referenced_ids="view1,view2,view3" />
34+
35+
36+
<View
37+
android:id="@+id/view1"
38+
style="@style/MediumBox"
39+
app:layout_constraintEnd_toStartOf="@+id/view2"
40+
app:layout_constraintHorizontal_chainStyle="spread_inside"
41+
app:layout_constraintStart_toStartOf="parent"
42+
app:layout_constraintTop_toTopOf="parent" />
43+
44+
<View
45+
android:id="@+id/view2"
46+
style="@style/MediumBox.Purple"
47+
app:layout_constraintEnd_toStartOf="@+id/view3"
48+
app:layout_constraintStart_toEndOf="@+id/view1"
49+
app:layout_constraintTop_toTopOf="parent" />
50+
51+
<View
52+
android:id="@+id/view3"
53+
style="@style/MediumBox.Pink"
54+
app:layout_constraintEnd_toEndOf="parent"
55+
app:layout_constraintStart_toEndOf="@+id/view2"
56+
app:layout_constraintTop_toTopOf="parent" />
57+
58+
59+
<!-- _________________ IGNORE VIEWS BELOW THIS LINE _________________ -->
60+
61+
<!--
62+
A button to dynamically set label text to showcase the barrier in effect.
63+
-->
64+
<Button
65+
android:id="@+id/toggle_label_text_size"
66+
android:layout_width="wrap_content"
67+
android:layout_height="wrap_content"
68+
android:text="Toggle View Group Visibility"
69+
app:layout_constraintBottom_toBottomOf="parent"
70+
app:layout_constraintEnd_toEndOf="parent"
71+
app:layout_constraintStart_toStartOf="parent"
72+
tools:ignore="HardcodedText" />
73+
74+
<TextView
75+
style="@style/TextAppearance.AppCompat.Body1"
76+
android:layout_width="0dp"
77+
android:layout_height="wrap_content"
78+
android:layout_marginStart="8dp"
79+
android:layout_marginTop="36dp"
80+
android:layout_marginEnd="8dp"
81+
android:gravity="center"
82+
android:text="Three separate views grouped by virtual guideline group which can be hidden by just hiding the group without touching each individual views."
83+
app:layout_constraintEnd_toEndOf="parent"
84+
app:layout_constraintStart_toStartOf="parent"
85+
app:layout_constraintTop_toBottomOf="@+id/view2"
86+
tools:ignore="HardcodedText" />
87+
88+
</androidx.constraintlayout.widget.ConstraintLayout>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,14 @@
3333
</style>
3434

3535
<style name="MediumBox.Purple">
36-
<item name="android:layout_width">@dimen/box_size_medium</item>
37-
<item name="android:layout_height">@dimen/box_size_medium</item>
3836
<item name="android:background">@color/md_deep_purple_700</item>
3937
</style>
4038

39+
<style name="MediumBox.Pink">
40+
<item name="android:background">@color/md_pink_700</item>
41+
</style>
42+
43+
4144
<style name="SimpleInfoTextView">
4245
<item name="android:layout_width">wrap_content</item>
4346
<item name="android:layout_height">wrap_content</item>

0 commit comments

Comments
 (0)