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

Commit 2a10529

Browse files
hossain-khanhossain-khan
committed
[ADDED] [#42] Chaining example with action buttons.
Fixes #42
1 parent 6d5f446 commit 2a10529

File tree

9 files changed

+296
-1
lines changed

9 files changed

+296
-1
lines changed

‎app/src/main/AndroidManifest.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@
2323
<activity
2424
android:name=".layoutpreview.LayoutVisibilityGoneActivity"
2525
android:parentActivityName=".browse.LayoutBrowseActivity" />
26+
<activity
27+
android:name=".layoutpreview.LayoutChainStyleActivity"
28+
android:parentActivityName=".browse.LayoutBrowseActivity" />
2629
</application>
2730

2831
</manifest>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import android.support.v7.app.AppCompatActivity
2222
import android.support.v7.widget.GridLayoutManager
2323
import android.support.v7.widget.RecyclerView
2424
import com.hossainkhan.android.demo.R
25+
import com.hossainkhan.android.demo.layoutpreview.LayoutChainStyleActivity
2526
import com.hossainkhan.android.demo.layoutpreview.LayoutPreviewBaseActivity
2627
import com.hossainkhan.android.demo.layoutpreview.LayoutVisibilityGoneActivity
2728
import com.hossainkhan.android.demo.viewmodel.LayoutPreviewViewModelFactory
@@ -80,6 +81,9 @@ class LayoutBrowseActivity : AppCompatActivity() {
8081
R.layout.preview_visibility_gone -> {
8182
startActivity(LayoutVisibilityGoneActivity.createStartIntent(this))
8283
}
84+
R.layout.preview_chain_style_main -> {
85+
startActivity(LayoutChainStyleActivity.createStartIntent(this))
86+
}
8387
else -> {
8488
startActivity(LayoutPreviewBaseActivity.createStartIntent(this, layoutResId))
8589
}

‎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
@@ -16,6 +16,7 @@
1616

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

19+
import com.hossainkhan.android.demo.layoutpreview.LayoutChainStyleActivity
1920
import com.hossainkhan.android.demo.layoutpreview.LayoutPreviewBaseActivity
2021
import com.hossainkhan.android.demo.layoutpreview.LayoutVisibilityGoneActivity
2122
import dagger.Module
@@ -52,4 +53,8 @@ abstract class ActivityBindingModule {
5253
@ActivityScope
5354
@ContributesAndroidInjector
5455
abstract fun layoutVisibilityActivity(): LayoutVisibilityGoneActivity
56+
57+
@ActivityScope
58+
@ContributesAndroidInjector
59+
abstract fun layoutChainActivity(): LayoutChainStyleActivity
5560
}

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,29 @@ class LayoutDataStore @Inject constructor(
7474
"But in terms of the layout computations, GONE widgets are still part of it, with an important distinction:" +
7575
"\n\n" +
7676
" * For the layout pass, their dimension will be considered as zero (basically, they will be resolved to a point)\n" +
77-
" * If they have constraints to other widgets they will still be respected, but any margins will be as if equals to zero")
77+
" * If they have constraints to other widgets they will still be respected, but any margins will be as if equals to zero"),
78+
LayoutInformation(
79+
layoutResourceId = R.layout.preview_chain_style_main,
80+
thumbnailResourceId = R.drawable.thumb_positioning_bias,
81+
title = "Chain: Style",
82+
description = "When setting the attribute `constraintHorizontal_chainStyle` or " +
83+
"`constraintVertical_chainStyle` on the first element of a chain, " +
84+
"the behavior of the chain will change according to the specified style (default is CHAIN_SPREAD)." +
85+
"\n\n" +
86+
" * CHAIN_SPREAD -- the elements will be spread out (default style)\n" +
87+
" * Weighted chain -- in CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space\n" +
88+
" * CHAIN_SPREAD_INSIDE -- similar, but the endpoints of the chain will not be spread out\n" +
89+
" * CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements")
90+
/*
91+
Next item template (easy to copy and paste)
92+
LayoutInformation(
93+
layoutResourceId = R.layout.XYZ,
94+
thumbnailResourceId = R.drawable.XYZ,
95+
title = "XYZ: XYZ",
96+
description = "XYZ")
97+
*/
98+
99+
78100
)
79101

80102
/**

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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+
package com.hossainkhan.android.demo.layoutpreview
18+
19+
import android.content.Context
20+
import android.content.Intent
21+
import android.os.Bundle
22+
import android.support.constraint.ConstraintLayout
23+
import android.support.constraint.ConstraintSet
24+
import android.support.constraint.ConstraintSet.CHAIN_PACKED
25+
import android.support.constraint.ConstraintSet.CHAIN_SPREAD
26+
import android.support.constraint.ConstraintSet.CHAIN_SPREAD_INSIDE
27+
import android.support.transition.TransitionManager
28+
import android.view.View
29+
import com.hossainkhan.android.demo.R
30+
import android.widget.RadioButton
31+
import android.widget.TextView
32+
import timber.log.Timber
33+
34+
/**
35+
* Showcases the constraint layout chaining with different styles.
36+
*
37+
* https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains
38+
*/
39+
class LayoutChainStyleActivity : LayoutPreviewBaseActivity() {
40+
41+
companion object {
42+
/**
43+
* Creates an intent with required information to start this activity.
44+
*
45+
* @param context Activity context.
46+
*/
47+
fun createStartIntent(context: Context): Intent {
48+
val intent = Intent(context, LayoutChainStyleActivity::class.java)
49+
intent.putExtra(BUNDLE_KEY_LAYOUT_RESID, R.layout.preview_chain_style_main)
50+
return intent
51+
}
52+
}
53+
54+
private lateinit var constraintLayout: ConstraintLayout
55+
private lateinit var guideText: TextView
56+
/**
57+
* Use constraint set to dynamically update constraints
58+
* https://developer.android.com/reference/android/support/constraint/ConstraintSet
59+
*/
60+
private val constraintSet = ConstraintSet()
61+
62+
override fun onCreate(savedInstanceState: Bundle?) {
63+
super.onCreate(savedInstanceState)
64+
65+
constraintLayout = findViewById(R.id.constraint_layout_root)
66+
guideText = findViewById(R.id.view_chain_horizontal_guide_text)
67+
constraintSet.clone(constraintLayout)
68+
}
69+
70+
fun onRadioButtonClicked(view: View) {
71+
Timber.d("Constraint style change requested %s", view)
72+
// Is the button now checked?
73+
val checked = (view as RadioButton).isChecked
74+
75+
// Check which radio button was clicked
76+
when (view.getId()) {
77+
R.id.radio_chain_action_packed -> {
78+
if (checked) {
79+
guideText.setText(R.string.view_guide_chain_style_packed)
80+
TransitionManager.beginDelayedTransition(constraintLayout)
81+
constraintSet.setHorizontalChainStyle(R.id.view_chain_view_first, CHAIN_PACKED)
82+
constraintSet.applyTo(constraintLayout)
83+
}
84+
}
85+
R.id.radio_chain_action_spread -> {
86+
if (checked) {
87+
guideText.setText(R.string.view_guide_chain_style_spread)
88+
TransitionManager.beginDelayedTransition(constraintLayout)
89+
constraintSet.setHorizontalChainStyle(R.id.view_chain_view_first, CHAIN_SPREAD)
90+
constraintSet.applyTo(constraintLayout)
91+
}
92+
}
93+
R.id.radio_chain_action_spread_inside -> {
94+
if (checked) {
95+
guideText.setText(R.string.view_guide_chain_style_spread_inside)
96+
TransitionManager.beginDelayedTransition(constraintLayout)
97+
constraintSet.setHorizontalChainStyle(R.id.view_chain_view_first, CHAIN_SPREAD_INSIDE)
98+
constraintSet.applyTo(constraintLayout)
99+
}
100+
}
101+
}
102+
}
103+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (c) 2018 Hossain Khan
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
-->
17+
18+
<merge xmlns:tools="http://schemas.android.com/tools"
19+
xmlns:app="http://schemas.android.com/apk/res-auto"
20+
xmlns:android="http://schemas.android.com/apk/res/android"
21+
tools:showIn="@layout/preview_chain_style_main">
22+
23+
24+
<!-- NOTE: All children of ConstraintLayout must have ids to use ConstraintSet -->
25+
<TextView
26+
android:id="@+id/view_chain_horizontal_guide_text"
27+
android:layout_width="wrap_content"
28+
android:layout_height="wrap_content"
29+
android:layout_marginTop="24dp"
30+
android:gravity="center_horizontal"
31+
android:text="@string/view_guide_chain_style_spread_inside"
32+
app:layout_constraintEnd_toEndOf="parent"
33+
app:layout_constraintStart_toStartOf="parent"
34+
app:layout_constraintTop_toBottomOf="@+id/view_chain_view_middle" />
35+
36+
37+
<!--
38+
Example taken from https://developer.android.com/guide/topics/ui/controls/radiobutton
39+
-->
40+
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
41+
android:id="@+id/chain_style_action_container"
42+
android:layout_width="0dp"
43+
android:layout_height="wrap_content"
44+
android:background="@color/md_grey_200"
45+
android:orientation="horizontal"
46+
android:padding="16dp"
47+
app:layout_constraintBottom_toBottomOf="parent"
48+
app:layout_constraintEnd_toEndOf="parent"
49+
app:layout_constraintStart_toStartOf="parent">
50+
51+
<RadioButton
52+
android:id="@+id/radio_chain_action_packed"
53+
android:layout_width="wrap_content"
54+
android:layout_height="wrap_content"
55+
android:layout_weight="1"
56+
android:onClick="onRadioButtonClicked"
57+
android:text="@string/view_action_name_chain_style_packed" />
58+
59+
<RadioButton
60+
android:id="@+id/radio_chain_action_spread"
61+
android:layout_width="wrap_content"
62+
android:layout_height="wrap_content"
63+
android:layout_weight="1"
64+
android:onClick="onRadioButtonClicked"
65+
android:text="@string/view_action_name_chain_style_spread" />
66+
67+
<RadioButton
68+
android:id="@+id/radio_chain_action_spread_inside"
69+
android:layout_width="wrap_content"
70+
android:layout_height="wrap_content"
71+
android:layout_weight="1"
72+
android:onClick="onRadioButtonClicked"
73+
android:text="@string/view_action_name_chain_style_spread_inside" />
74+
</RadioGroup>
75+
76+
77+
</merge>

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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 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:id="@+id/constraint_layout_root"
23+
android:layout_width="match_parent"
24+
android:layout_height="match_parent">
25+
26+
27+
<View
28+
android:id="@+id/view_chain_view_first"
29+
style="@style/SmallBox.Variant2"
30+
android:layout_marginTop="16dp"
31+
app:layout_constraintEnd_toStartOf="@+id/view_chain_view_middle"
32+
app:layout_constraintHorizontal_chainStyle="spread_inside"
33+
app:layout_constraintStart_toStartOf="parent"
34+
app:layout_constraintTop_toTopOf="parent" />
35+
36+
<View
37+
android:id="@+id/view_chain_view_middle"
38+
style="@style/SmallBox.Variant1"
39+
40+
android:layout_marginTop="16dp"
41+
app:layout_constraintEnd_toStartOf="@+id/view_chain_view_last"
42+
app:layout_constraintStart_toEndOf="@+id/view_chain_view_first"
43+
app:layout_constraintTop_toTopOf="parent" />
44+
45+
<View
46+
android:id="@+id/view_chain_view_last"
47+
style="@style/SmallBox"
48+
android:layout_marginTop="16dp"
49+
app:layout_constraintEnd_toEndOf="parent"
50+
app:layout_constraintStart_toEndOf="@+id/view_chain_view_middle"
51+
app:layout_constraintTop_toTopOf="parent" />
52+
53+
54+
<!--
55+
Additional text and actions to explain the views - ignore below
56+
-->
57+
<include layout="@layout/include_layout_chain_style" />
58+
59+
</android.support.constraint.ConstraintLayout>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,12 @@
33
<string name="btn_cta_okay">OK</string>
44
<string name="btn_cta_information">Info</string>
55
<string name="btn_cta_preview_layout_xml">Preview XML</string>
6+
7+
8+
<string name="view_action_name_chain_style_packed">Packed</string>
9+
<string name="view_action_name_chain_style_spread">Spread</string>
10+
<string name="view_action_name_chain_style_spread_inside">Spread Inside</string>
11+
<string name="view_guide_chain_style_spread_inside">Chained views with \nlayout_constraintHorizontal_chainStyle=\'spread_inside\'</string>
12+
<string name="view_guide_chain_style_spread">Chained views with \nlayout_constraintHorizontal_chainStyle=\'spread\'</string>
13+
<string name="view_guide_chain_style_packed">Chained views with \nlayout_constraintHorizontal_chainStyle=\'packed\'</string>
614
</resources>

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

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

11+
<style name="SmallBox">
12+
<item name="android:layout_width">@dimen/box_size_small</item>
13+
<item name="android:layout_height">@dimen/box_size_small</item>
14+
<item name="android:background">@color/md_pink_900</item>
15+
</style>
16+
17+
<style name="SmallBox.Variant1">
18+
<item name="android:background">@color/md_amber_700</item>
19+
</style>
20+
21+
<style name="SmallBox.Variant2">
22+
<item name="android:background">@color/md_purple_700</item>
23+
</style>
24+
1125
<style name="MediumBox">
1226
<item name="android:layout_width">@dimen/box_size_medium</item>
1327
<item name="android:layout_height">@dimen/box_size_medium</item>

0 commit comments

Comments
 (0)