how to align bottom between two view and align top to parent at the same time?

user_4873720 0
Viewed 449

I am trying to align bottom between two view and align them to the top of parent. It fails when either of them is taller than the other one. Seems like app:layout_constraintBottom_toBottomOf="@id/rightText" and app:layout_constraintTop_toTopOf="parent" contradict each other.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/leftText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        app:layout_constraintBottom_toBottomOf="@id/rightText"
        app:layout_constraintEnd_toStartOf="@id/rightText"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Header Header Header Header Header Header Header Header" />

    <TextView
        android:id="@+id/rightText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/leftText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/leftText"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="RightHeader RightHeader RightHeader RightHeader" />

</androidx.constraintlayout.widget.ConstraintLayout>

actual:
enter image description here

expect:
enter image description here enter image description here

android-constraintlayout android
3 Answers

Use verticalBias attribute to set the right header at the bottom otherwise, it will be at the centre of the parent's top and left's bottom. Set verticalBias = 0 (to align with top) or 1 (to align with bottom).

user_84838430

Connect the top of the two views to parent and connect the bottom of each of the two views to each other and then make the vertical bias in the two texts equal to one

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/leftText"
        style="@style/TextAppearance.Body"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        app:layout_constraintBottom_toBottomOf="@+id/rightText"
        app:layout_constraintEnd_toStartOf="@id/rightText"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        tools:text="Header asd da asd sda ads dsa dsa ads sda dsa das dsa das dsa dsda s dssdanksadasdjadsasbdjadskbjsdkbajdsbjasdkbjkadsbjkadsbjkasdbjkaskbjasdbjkasdbjkasdbjkasdbjkasdkbjasbjkasdkbjasdbjkasdbjkHeader Header Header Header Header Header Header" />

    <TextView
        android:id="@+id/rightText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/leftText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/leftText"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        tools:text="RightHeader RightHeader RightHeader RightHeader" />

</androidx.constraintlayout.widget.ConstraintLayout>
user_101382080

Wrap it in a wrap_content ConstraintLayout and align both views to bottom of parent. This is one way to it

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
<TextView
    android:id="@+id/leftText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/rightText"
    app:layout_constraintHorizontal_weight="3"
    app:layout_constraintStart_toStartOf="parent"
    tools:text="Header Header Header Header Header Header Header Header" />

<TextView
    android:id="@+id/rightText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/leftText"
    tools:text="RightHeader RightHeader RightHeader RightHeader" />
</androidx.constraintlayout.widget.ConstraintLayout>
user_41686070
Related