0

I have a constraint layout and the layout looks like this -

enter image description here

As you see the item Pasta and 10:10 are aligned one below other. My layout for the same looks like this -

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 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:id="@+id/food_item"
    style="@style/cardViewStyle"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/margin_16dp">

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/food_name_label"
            style="@style/cardViewTextTitle"
            android:text="@string/food_name"
            app:layout_constraintBaseline_toBaselineOf="@+id/food_name_value"
            app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/food_name_value"
            style="@style/cardViewTextSubTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.39"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Pasta" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/food_intake_label"
            style="@style/cardViewTextTitle"
            android:text="@string/food_intake_time"
            app:layout_constraintBaseline_toBaselineOf="@+id/food_intake_value"
            app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/food_intake_value"
            style="@style/cardViewTextSubTitle"
            app:layout_constraintStart_toEndOf="@id/food_intake_label"
            app:layout_constraintTop_toBottomOf="@id/food_name_value"
            tools:text="10:10" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

I have the id food_name_value horizontally aligned start and end to the parent.

My question is am I aligning the food_name_value and food_intake_value correctly one below the other because the label Intake Time is much longer than the label Name or what is the best way to align in my case?

Marcin Orlowski
  • 67,279
  • 10
  • 112
  • 132
Ma2340
  • 287
  • 6
  • 17
  • if your values need to be at a specific distance you can constraint each of them together. also you can use `guide` to maintain a specific distance. – ruben Nov 22 '20 at 18:31

1 Answers1

1

Surely you need a Barrier here, with barrierDirection="end" and constraint_referenced_ids="food_name_label,food_intake_label", Then align your food_name_value, food_intake_value with this barrier. Perfect explanation can be found at here.

Fahad Nasrullah
  • 271
  • 1
  • 5