Align left of the largest view with constraint layout

Question

Hi i'm trying to do a view of a schedule. If the user as is setting into display 24H or not the format of the opening hours change. And Someday the shop is close. The string Closed is dynamic, it can happend everyday it come from VM.days.get(X).time

So here's what i got for the moment:

i want to align the closed to the left of the hour.

Here's my ConstraintLayout

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/base_space">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/small_space"
        android:text="@{VM.title}"
        android:textStyle="bold"
        tools:text="Heures de la semaine" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="first_time,second_time,third_time,fourth_time,fifth_time,sixth_time" />

    <TextView
        android:id="@+id/first_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(0).day}"
        android:textColor="@{VM.days.get(0).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(0).isBold}"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:text="Sunday" />

    <TextView
        android:id="@+id/first_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(0).time}"
        android:textColor="@{VM.days.get(0).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(0).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/first_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/first_day"
        tools:text="8:30 AM - 9:00 PM" />

    <TextView
        android:id="@+id/second_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(1).day}"
        android:textColor="@{VM.days.get(1).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(1).isBold}"
        app:layout_constraintTop_toBottomOf="@id/first_day"
        tools:text="Monday" />

    <TextView
        android:id="@+id/second_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(1).time}"
        android:textColor="@{VM.days.get(1).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(1).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/second_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/second_day"
        tools:text="Closed" />

    <TextView
        android:id="@+id/third_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(2).day}"
        android:textColor="@{VM.days.get(2).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(2).isBold}"
        app:layout_constraintTop_toBottomOf="@id/second_day"
        tools:text="Tuesday" />

    <TextView
        android:id="@+id/third_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(2).time}"
        android:textColor="@{VM.days.get(2).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(2).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/third_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/third_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/fourth_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(3).day}"
        android:textColor="@{VM.days.get(3).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(3).isBold}"
        app:layout_constraintTop_toBottomOf="@id/third_day"
        tools:text="Wednesday" />

    <TextView
        android:id="@+id/fourth_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(3).time}"
        android:textColor="@{VM.days.get(3).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(3).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/fourth_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/fourth_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/fifth_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(4).day}"
        android:textColor="@{VM.days.get(4).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(4).isBold}"
        app:layout_constraintTop_toBottomOf="@id/fourth_day"
        tools:text="Thursday" />

    <TextView
        android:id="@+id/fifth_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(4).time}"
        android:textColor="@{VM.days.get(4).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(4).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/fifth_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/fifth_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/sixth_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(5).day}"
        android:textColor="@{VM.days.get(5).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(5).isBold}"
        app:layout_constraintTop_toBottomOf="@id/fifth_day"
        tools:text="Friday" />

    <TextView
        android:id="@+id/sixth_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(5).time}"
        android:textColor="@{VM.days.get(5).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(5).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/sixth_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/sixth_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/seventh_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(6).day}"
        android:textColor="@{VM.days.get(6).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(6).isBold}"
        app:layout_constraintTop_toBottomOf="@id/sixth_day"
        tools:text="Saturday" />

    <TextView
        android:id="@+id/seventh_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(6).time}"
        android:textColor="@{VM.days.get(6).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(6).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/seventh_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/seventh_day"
        tools:text="8:00 - 21:00" />


</android.support.constraint.ConstraintLayout>

I try to put all the timeUI width to 0dp and start at barrier, to parent. But if all the timeUI have thoses constraint they all disapears

Answer 1

You could also use a Barrier.

With a Barrier, you could align Start <-> Barrier <-> End and then in the barrier you'll put all the ids of the views you want to align with the barrier, and then set the Barrier's direction to the start of all those views:

  <androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="textView1,textView2,..." />

Answer 2

Removed the right/end constraint from the "closed" view. That will left-align it:

<TextView
        android:id="@+id/second_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(1).time}"
        android:textColor="@{VM.days.get(1).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(1).isBold}"
        app:layout_constraintBottom_toBottomOf="@id/second_day"
        app:layout_constraintStart_toStartOf="@id/barrier"
        app:layout_constraintTop_toTopOf="@id/second_day"
        tools:text="Closed" />

Also, decide using between left/right and start/end constraints. Having both is redundant. Furthermore, when you're referencing a view, there's no need to include the "+" sign in its name.

Answer 3

There is many solutions for this:

1- Use a FrameLayout with 2 vertical LinearLayouts (positions start and end)

2- If you insist on using constraint layout, you can try to give a width to the textviews (specially on the right)

3- I am really not sure what will happen but you can try to make the closed one width match_parent instead of wrap_content