Menu
I want to achieve the layout below using a ConstraintLayout with no nesting.
The layout requires a barrier since it's not guaranteed which textview will be taller. It also requires a chain since everything needs to be centered. The issue is that I can't find a way to make chain work with barriers.
Here's what I have so far which will layout correctly but will not center:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto"> <TextView android:id="@+id/topLeftText" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="16dp" tools:text="Test test test test test test test test test test" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toStartOf="@+id/topRightText"/> <TextView android:id="@+id/topRightText" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:layout_marginBottom="16dp" android:layout_marginRight="16dp" android:layout_marginEnd="16dp" tools:text="Test test test test test test test test test test test test test test test test test test test test" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toEndOf="@+id/topLeftText" app:layout_constraintEnd_toEndOf="parent"/> <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="topLeftText,topRightText" app:barrierDirection="bottom"/> <TextView android:id="@+id/bottomText" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="16dp" tools:text="Test test test test test test test test test test test test test test test test test test test test" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@+id/barrier"/> </android.support.constraint.ConstraintLayout> If anyone knows how to achieve this, that would be much appreciated!
408
Creating Barriers in XMLThe app:barrierDirection attribute determines the direction of the Barrier - in this case it will be positioned at the end of the referenced Views. The list of referenced Views is a comma separated list of the IDs of other Views within the layout (without the @+id/ qualifier).
androidx.constraintlayout.widget.Barrier. Added in 1.1. A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.
With the help of ConstraintLayout , we can create complex and lengthy layouts with a flat view hierarchy. It means there is no need to nest multiple view groups ( LinearLayout or RelativeLayout ). It's similar to RelativeLayout but much more flexible than RelativeLayout .
Barriers are one of my favourite features in ConstraintLayout. A barrier is an invisible view that contains reference to the views that you wish to use to form a “barrier” against. If one of the views grows, the barrier will adjust its size to the largest height or width of the referenced items.
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.
T he ConstraintLayout is one of the most dynamic and powerful available Android ViewGroup components. Besides its variety of possibilities, it allows us to implement a flat view hierarchy, leading to improved performances when it comes to layout inflation compared to deeply nested layouts.
If you want to add a guideline ConstraintLayout you can do it either by using the mentioned “ Guidelines ” menu or by adding a Guideline view component programmatically inside the respective XML layout file. To edit the layout code, you can switch from the “ Design ” to “ Split ” or “ Code ” view in the top right corner of the layout editor.
I know it's old but i think to do that without nesting, you have to change top component to something like this.
android:layout_height="wrap_content" android:layout_gravity="center"
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto"> 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
