Android constraintlayout vertical textview alignment

Question

I have following layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/dishContainer"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#0ff"
    android:clickable="true"
    android:focusable="true">

    <TextView
        android:id="@+id/one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:maxLines="3"
        android:background="#ff0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />

    <TextView
        android:id="@+id/two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        app:layout_constraintStart_toStartOf="@+id/one"
        app:layout_constraintTop_toBottomOf="@+id/one"
        app:layout_constraintBottom_toTopOf="@+id/three"
        tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

    <TextView
        android:id="@+id/three"
        android:layout_width="wrap_content"
        android:background="#f00"
        android:lines="1"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@+id/two"
        app:layout_constraintTop_toBottomOf="@+id/two"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:text="Third text that dissapears, but should not go below the parent" />

</android.support.constraint.ConstraintLayout>

The problem is that green textview takes too much space and ignores top and bottom constraints. If I set green text view height to 0dp I get this:

Which is almost what I want, but if I only have very little text I get:

Here my red textview is left at the bottom, even though green text view has enough free space to shrink and let red textview go up.

Basically I want my red view to always be bellow green view, but when red hits the bottom of parent window it should stop there and also stop green textview from expanding.

How do I achieve this?

Height is the problem, but even using contrainedHeight="true" doesn't make any difference. — SMGhost, Jun 04 '19 at 08:42
@glucaio, yes. This is for simplification, in real world it will probably be a linearlayout container — SMGhost, Jun 04 '19 at 09:40

Ferran · Accepted Answer · 2019-06-04T10:34:17.663

Try this

(I set layout_width to match_parent..., you can change it if you want)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:orientation="vertical"
    android:paddingEnd="16dp"
    android:paddingStart="16dp"
    android:layout_width="match_parent"
    android:layout_height="100dp">

    <TextView
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="3"
        android:background="#ff0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />

    <TextView
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/one"
        app:layout_constraintBottom_toTopOf="@id/three"
        app:layout_constrainedHeight="true"
        tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

    <TextView
        android:id="@+id/three"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#f00"
        android:lines="1"
        app:layout_constraintHeight_min="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/two"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:text="Third text that dissapears, but should not go below the parent" />

</android.support.constraint.ConstraintLayout>

Not working. Green textview takes up all the space even with a single line of text — SMGhost, Jun 04 '19 at 09:05
I've just did. Still same issue. Green text view fills all the space between yellow and red, even though I give it a single line of text and it should wrap it, so red textview would move up. — SMGhost, Jun 04 '19 at 09:43
No, Green text does not fill the space, it wraps. Let me check again... — Ferran, Jun 04 '19 at 09:45
Seems like it works. Probably made a mistake trying to apply the layout. Thanks! — SMGhost, Jun 04 '19 at 10:20
Let me edit again, there's a little issue with text because of TexView margins. — Ferran, Jun 04 '19 at 10:33
Done. Setting margins to ConstraintLayout instead of TextView is much better. — Ferran, Jun 04 '19 at 10:35
Nice, so the key here was `layout_constraintHeight_min`. That's tricky, but good to know. @SMGhost, I'm curious what your use case is, since you won't be able to scroll the middle view to view its contents. — , Jun 04 '19 at 10:59
@glucaio, It's just a list of shop items, where first textview can take up to three lines, then second line can take up to three lines as well, but must also account, for first textview line count and bottom textview should just follow second one, but don't go overboard:) — SMGhost, Jun 04 '19 at 11:11

score 1 · Answer 2 · 2019-06-05T10:51:58.440

While the accepted answer works, I noticed that the height of the bottom TextView will expand to fill the remaining vertical space of the container.

With the help of a Guideline, we can give the bottom TextView a fixed height regardless if it has room to expand.

dimens.xml

<dimen name="bottom_view_height">20dp</dimen>

layout.xml

<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/green"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4CAF50"
        android:maxLines="3"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@tools:sample/lorem/random"/>

    <TextView
        android:id="@+id/yellow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFEB3B"
        app:layout_constrainedHeight="true"
        app:layout_constraintTop_toBottomOf="@id/green"
        app:layout_constraintBottom_toTopOf="@id/bottom_guide"
        app:layout_constraintVertical_bias="0"
        tools:text="@tools:sample/lorem/random"
        tools:lines="100"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottom_guide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="@dimen/bottom_view_height"/>

    <TextView
        android:id="@+id/red"
        android:layout_width="match_parent"
        android:layout_height="@dimen/bottom_view_height"
        android:background="#F44336"
        app:layout_constraintTop_toBottomOf="@id/yellow"
        tools:text="@tools:sample/lorem/random"/>

</androidx.constraintlayout.widget.ConstraintLayout>

How it works:

The Guideline serves as the bottom constraint for the middle TextView, which is aligned to its top constraint via layout_constraintVertical_bias="0".

Setting layout_constrainedHeight="true" on the middle TextView ensures it never expands past the guideline. This in turn ensures that the bottom TextView will never go off screen.

Rizwan Ahmed Shivalli · Answer 3 · 2019-06-04T09:22:46.127

you could try Linear Layout

Edit New Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical">

<TextView
    android:id="@+id/one"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:maxLines="3"
    android:background="#ff0"
    android:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk"
    />

<TextView
    android:id="@+id/two"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:background="#0f0"
    android:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

<TextView
    android:id="@+id/three"
    android:layout_width="match_parent"        
    android:background="#f00"        
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:text="Third text that dissapears, but should not go below the parent" />

Stil not working. By making match parent you just made a list item very tall, but if I put enough new lines in green textview my red textview still dissapears — SMGhost, Jun 04 '19 at 09:38

score 0 · Answer 4 · answered Jun 04 '19 at 08:58

0

I would remove the app:layout_constraintBottom_toTopOf="@+id/three" constraint on TextView #2, there's no need for it and it's probably the reason why you're seeing the 2nd TextView take up the extra space.

answered Jun 04 '19 at 08:58

Mark

535
4
13

If I remove this line, green textview pushes red textview outside of screen – SMGhost Jun 04 '19 at 09:02
Ok I see what you mean - but having 2 constraints against one another can be troublesome, usually go with top -> bottom or bottom -> top on one of the elements, not both. For your problem, it may have been answered [here](https://stackoverflow.com/a/50643020/3042873) for a similar issue, what you're looking for is a maximum height that TextView #2 can grow to but not affect #3 which is the same issue described there. – Mark Jun 04 '19 at 09:19

score 0 · Answer 5 · answered Jun 04 '19 at 09:18

We should not use static value for height if content is dynamic.Don't align a view at bottom in constraint layout if you assign views in linear way

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/dishContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#0ff"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:clickable="true"
    android:focusable="true">

    <TextView
        android:id="@+id/one"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="#ff0"
        android:maxLines="3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />

    <TextView
        android:id="@+id/two"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#0f0"
        app:layout_constraintEnd_toEndOf="@+id/one"
        app:layout_constraintStart_toStartOf="@+id/one"
        app:layout_constraintTop_toBottomOf="@+id/one"
        tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

    <TextView
        android:id="@+id/three"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:lines="1"
        app:layout_constraintEnd_toEndOf="@+id/one"
        app:layout_constraintStart_toStartOf="@+id/one"
        app:layout_constraintTop_toBottomOf="@+id/two"
        tools:text="Third text that dissapears, but should not go below the parent" />

</android.support.constraint.ConstraintLayout>

If you using fixed height your some of views will overlap or content willbe hide — Rajasekaran M, Jun 04 '19 at 10:00

Android constraintlayout vertical textview alignment

5 Answers5