Menu
This is the layout I am going to do using Constraint Layout.
I want to create the above layout without any Nesting of Views, which is one of the advantages of using Constraint Layout.
It is a simple layout. But i wish to add vertical chaining to the layout.
If i add vertical chaining, each and every view will be spread. But my condition is that the Text View and the View(Horizontal line) should be together, as a group.
And i need to chain that group. I tried the following way:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.Settings">
<include
android:id="@+id/toolbarLayout"
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="56dp"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/cancelPolicy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/canc_pol"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/toolbarLayout" />
<View
android:id="@+id/cancelPolicyLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/cancelPolicy" />
<android.support.constraint.Group
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintTop_toTopOf="@id/toolbarLayout"
app:layout_constraintBottom_toTopOf="@id/termsAndCondGroup"
android:id="@+id/cancelPolicyGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:constraint_referenced_ids="cancelPolicy,cancelPolicyLine" />
<TextView
android:id="@+id/termsAndCond"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/t_and_c"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/cancelPolicyLine" />
<View
android:id="@+id/termsAndCondLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/termsAndCond" />
<android.support.constraint.Group
app:constraint_referenced_ids="termsAndCond,termsAndCondLine"
app:layout_constraintTop_toBottomOf="@id/cancelPolicyGroup"
app:layout_constraintBottom_toTopOf="@id/privatePolicyGroup"
android:id="@+id/termsAndCondGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/privatePolicy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/priv_pol"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/termsAndCondLine" />
<View
android:id="@+id/privatePolicyLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/privatePolicy" />
<android.support.constraint.Group
android:id="@+id/privatePolicyGroup"
app:layout_constraintTop_toBottomOf="@id/termsAndCondGroup"
app:layout_constraintBottom_toTopOf="@id/aboutGroup"
app:constraint_referenced_ids="privatePolicy,privatePolicyLine"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/about"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/about"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/privatePolicyLine" />
<View
android:id="@+id/aboutLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/about" />
<android.support.constraint.Group
android:id="@+id/aboutGroup"
app:layout_constraintTop_toBottomOf="@id/privatePolicyGroup"
app:layout_constraintBottom_toBottomOf="@id/guidelineBottom"
app:constraint_referenced_ids="about,aboutLine"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.constraint.Guideline
android:id="@+id/guidelineTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0" />
<android.support.constraint.Guideline
android:id="@+id/guidelineBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<android.support.constraint.Guideline
android:id="@+id/guidelineLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="@+id/guidelineRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
</android.support.constraint.ConstraintLayout>
But only the groups were chained, the views still remained the same. This is What i got. I would like to know weather we can chain groups of views without nesting of layouts.
621
Creating a chain is really easy, we can click and drag to select views or press ctrl and select views from Component Tree. And then right click on selected views in Editor Or Component Tree to apply constraints. You can see that in action in following screen records.
You have to disable each button individually, because constraints are added to each widget in constraintlayout. To group views, you need to use view groups, that doesn't make sense in the context of constraint layout. With Constraint layout:1.1. 0-beta1, you can group views using android.
What are chains? Chains are a specific kind of constraint which allow us to share space between the views within the chain and control how the available space is divided between them. The closest analogue with traditional Android layouts is weights in LinearLayout , but chains do far more than that, as we shall see.
A chain is a group of views linked together with bi-directional positional constraints. The aim of chains is to control the space between views and how the views use the space inside a layout.
Finally, this worked out for me:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.Settings">
<include
android:id="@+id/toolbarLayout"
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="56dp"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/cancelPolicy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/canc_pol"
app:layout_constraintBottom_toTopOf="@id/cancelPolicyLine"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toTopOf="@id/cancelPolicyGroup"
app:layout_constraintVertical_chainStyle="packed" />
<View
android:id="@+id/cancelPolicyLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintBottom_toBottomOf="@id/cancelPolicyGroup"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/cancelPolicy" />
<android.support.constraint.Group
android:id="@+id/cancelPolicyGroup"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="cancelPolicy,cancelPolicyLine"
app:layout_constraintBottom_toTopOf="@id/termsAndCondGroup"
app:layout_constraintTop_toBottomOf="@id/toolbarLayout"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="@+id/termsAndCond"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/t_and_c"
app:layout_constraintBottom_toTopOf="@id/termsAndCondLine"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toTopOf="@id/termsAndCondGroup"
app:layout_constraintVertical_chainStyle="packed" />
<View
android:id="@+id/termsAndCondLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintBottom_toBottomOf="@id/termsAndCondGroup"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/termsAndCond" />
<android.support.constraint.Group
android:id="@+id/termsAndCondGroup"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="termsAndCond,termsAndCondLine"
app:layout_constraintBottom_toTopOf="@id/privatePolicyGroup"
app:layout_constraintTop_toBottomOf="@id/cancelPolicyGroup" />
<TextView
android:id="@+id/privatePolicy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/priv_pol"
app:layout_constraintBottom_toTopOf="@id/privatePolicyLine"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toTopOf="@id/privatePolicyGroup"
app:layout_constraintVertical_chainStyle="packed" />
<View
android:id="@+id/privatePolicyLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintBottom_toBottomOf="@id/privatePolicyGroup"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/privatePolicy" />
<android.support.constraint.Group
android:id="@+id/privatePolicyGroup"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="privatePolicy,privatePolicyLine"
app:layout_constraintBottom_toTopOf="@id/aboutGroup"
app:layout_constraintTop_toBottomOf="@id/termsAndCondGroup" />
<TextView
android:id="@+id/about"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="@dimen/padding_small"
android:text="@string/about"
app:layout_constraintBottom_toTopOf="@id/aboutLine"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toTopOf="@id/aboutGroup"
app:layout_constraintVertical_chainStyle="packed" />
<View
android:id="@+id/aboutLine"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#c0c0c0"
app:layout_constraintBottom_toBottomOf="@id/aboutGroup"
app:layout_constraintEnd_toEndOf="@id/guidelineRight"
app:layout_constraintStart_toStartOf="@id/guidelineLeft"
app:layout_constraintTop_toBottomOf="@id/about" />
<android.support.constraint.Group
android:id="@+id/aboutGroup"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="about,aboutLine"
app:layout_constraintBottom_toBottomOf="@id/guidelineBottom"
app:layout_constraintTop_toBottomOf="@id/privatePolicyGroup" />
<android.support.constraint.Guideline
android:id="@+id/guidelineTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0" />
<android.support.constraint.Guideline
android:id="@+id/guidelineBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
<android.support.constraint.Guideline
android:id="@+id/guidelineLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="@+id/guidelineRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
</android.support.constraint.ConstraintLayout>
I just made the groups to spread throughout the layout by giving height as 0 and positioned my views within those groups. And i got this:Output
For anyone trying to spread the views in the entire screen, just make the Vertical Guideline to have app:layout_constraintGuide_percent="1"
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With