Fixed
Status Update
No update yet.
Comments
ni...@google.com
Yeah, that definitely looks like a bug, thanks for the report. Not related to the bug itself, but why are you creating chains here?
ab...@gmail.com
Maybe there's a better way (I'm all ears if you have suggestions or if I'm
abusing what chains were intended for) but that was the only way I found to
meet the following requirements:
1. All EditTexts vertically left aligned to the right of the longest label
2. EditTexts each have a specified (different) maximum/target width, which
they will be at on a large screen or in landscape mode
3. EditTexts shrink to fit the screen if the screen is small and the
specified maximum EditText length + longest label length + margins > screen
width
I have found a number of different ways to get 2 of the 3 requirements with
different layouts (Table, Relative, Grid, & Constraint) but this was all I
could come up with to get all three. The chain with the space was to keep
it from being over-constrained, so the space can stretch as much as needed
if the EditText is at its maximum width, but lets it shrink the EditText if
the screen gets small. I can get it to mostly work with custom dimens.xml
for different screen sizes, but was hoping the ConstraintLayout would be a
cleaner solution.
-Tyler
On Mon, Mar 12, 2018 at 5:36 PM, <buganizer-system@google.com> wrote:
abusing what chains were intended for) but that was the only way I found to
meet the following requirements:
1. All EditTexts vertically left aligned to the right of the longest label
2. EditTexts each have a specified (different) maximum/target width, which
they will be at on a large screen or in landscape mode
3. EditTexts shrink to fit the screen if the screen is small and the
specified maximum EditText length + longest label length + margins > screen
width
I have found a number of different ways to get 2 of the 3 requirements with
different layouts (Table, Relative, Grid, & Constraint) but this was all I
could come up with to get all three. The chain with the space was to keep
it from being over-constrained, so the space can stretch as much as needed
if the EditText is at its maximum width, but lets it shrink the EditText if
the screen gets small. I can get it to mostly work with custom dimens.xml
for different screen sizes, but was hoping the ConstraintLayout would be a
cleaner solution.
-Tyler
On Mon, Mar 12, 2018 at 5:36 PM, <buganizer-system@google.com> wrote:
ni...@google.com
Fixed in beta 6.
ni...@google.com
#3 : A better way would be to not use chains here. A simple centered connection would be enough -- other than the fact that it uncovered a bug with Barrier :) -- this will be fixed in beta 6. But the code would be something like:
<TextView
android:id="@+id/label_1"
android:tag="48,103,136,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 1"
app:layout_constraintBottom_toBottomOf="@+id/entry_1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/entry_1" />
<EditText
android:id="@+id/entry_1"
android:tag="505,63,512,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="200sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="@+id/label_2"
android:tag="48,254,442,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 2 Is very very long"
app:layout_constraintBottom_toBottomOf="@+id/entry_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/entry_2" />
<EditText
android:id="@+id/entry_2"
android:tag="505,214,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/entry_1"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="@+id/label_3"
android:tag="48,405,218,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label Three"
app:layout_constraintBottom_toBottomOf="@+id/entry_3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/entry_3" />
<EditText
android:id="@+id/entry_3"
android:tag="505,365,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/entry_2"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<android.support.constraint.Barrier
android:id="@+id/guideline"
android:tag="490,48,0,0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:barrierDirection="right"
app:constraint_referenced_ids="label_1,label_2,label_3" />
<TextView
android:id="@+id/label_1"
android:tag="48,103,136,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 1"
app:layout_constraintBottom_toBottomOf="@+id/entry_1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/entry_1" />
<EditText
android:id="@+id/entry_1"
android:tag="505,63,512,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="200sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="@+id/label_2"
android:tag="48,254,442,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 2 Is very very long"
app:layout_constraintBottom_toBottomOf="@+id/entry_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/entry_2" />
<EditText
android:id="@+id/entry_2"
android:tag="505,214,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/entry_1"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="@+id/label_3"
android:tag="48,405,218,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label Three"
app:layout_constraintBottom_toBottomOf="@+id/entry_3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/entry_3" />
<EditText
android:id="@+id/entry_3"
android:tag="505,365,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/entry_2"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<android.support.constraint.Barrier
android:id="@+id/guideline"
android:tag="490,48,0,0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:barrierDirection="right"
app:constraint_referenced_ids="label_1,label_2,label_3" />
Description
I am attempting to set up what I thought should be a simple layout with a ConstraintLayout. I have a series of text entries, with labels whose size can change from language to language. There is a barrier to the right of the labels so the text entries stay aligned even when the label lengths change.
I want the text entries to be a nominal size (200dp for the top one and 150dp for the others in this example) but to be able to shrink as needed to fit the screen if the labels are long and the screen is small. In landscape mode, or on a larger screen, the entries should be their max size and aligned left against the barrier. To do this I made each line into a horizontal chain from the barrier to the right of parent, with an EditText and a Space.
After a lot of trial and error I got the layout attached (activity_main.xml) to work they way I wanted by setting two of the chains to "spread_inside" and the last one to "packed". Setting the entry_3 chain to spread_inside messes up the layout on the row above it (entry_2 shrinks to its minimum size). I haven't found anything in the document suggesting that multiple horizontal chains would influence each other this way, so I am not sure if this is an intended behavior or a bug (note that the entire layout looks different using 1.1.0-beta4, all EditTexts end up the same size and aligned on the right side of the screen).
Attached screenshots show the behavior with all the chains set to "all_spread" vs setting the last one to "packed".