CODEWITHSUNDEEP
androidandroid-constraintlayoutmaterial-components-android
Ma2340
Ma2340

Reputation: 727

Android constraint layout positioning 1 item below other

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?

Upvotes: 0

Views: 669

Answers (1)

Fahad Nasrullah
Fahad Nasrullah

Reputation: 329

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.

Upvotes: 1

Related Questions