0

I have made this simple screen. I made like this purposely to show that constraint layout doesn't work properly in case of wrap_content. I know i can make constraint_layout parent and it won't cause the issue but I wanted to understand the reason why this doesn't work.

<FrameLayout 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"
    tools:context="com.konel.kryptapps.testapp.MainActivity">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:textSize="16sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="text view 1" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:textSize="14sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textView"
            tools:text="text view 2" />
    </android.support.constraint.ConstraintLayout>
</FrameLayout>

This xml results in the bottom textview being overlapped to the top one. Its constraint of top margin is not being honoured. But if I change the text size of the top textview to 14sp it works perfectly.

Below is the layout bound screen shot:

enter image description here

I have set the text programmatically. First text view contains 100 words from lorem ipsum. I don't understand what I could be doing wrong.

P.S. I am using com.android.support.constraint:constraint-layout:1.0.2

adnaan.zohran
  • 809
  • 9
  • 21
  • Change `TextView` height to `0dp` – Stanislav Bondar Nov 30 '17 at 11:47
  • 1
    Possible duplicate of [Problems with ConstraintLayout - vertical margin doesn't work](https://stackoverflow.com/questions/46584315/problems-with-constraintlayout-vertical-margin-doesnt-work) – Eugene Brusov Nov 30 '17 at 13:37
  • @StanislavBondar Changing height to 0dp will restrict TextView to top and bottom constraints. Since constraints can't have negative values your TextView can't have the larger height than the screen height. So your solution might work only for particular case. If you want TextView to be larger that screen size you should use wrap_content and perhaps put your TextView into ScrollView or RecyclerView. Take a look at https://stackoverflow.com/questions/46584315/problems-with-constraintlayout-vertical-margin-doesnt-work – Eugene Brusov Nov 30 '17 at 13:47

2 Answers2

1

You need to set app:layout_constraintBottom_toTopOf="@id/textView2" for textView for it to render properly

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:textSize="16sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintBottom_toTopOf="@id/textView2"
    android:text="@string/lorem"/>
Ajil O.
  • 6,562
  • 5
  • 40
  • 72
  • Why the downvote?! This **is** really one way to solve the problem. – Ajil O. Nov 30 '17 at 12:06
  • It's NOT me who downvoted it, but in addition to add app:layout_constraintBottom_toTopOf="@id/textView2" you should also add packed vertical chain. Take a look at my question https://stackoverflow.com/questions/46584315/problems-with-constraintlayout-vertical-margin-doesnt-work – Eugene Brusov Nov 30 '17 at 13:42
  • @EugeneBrusov It should work even with `spread` vertical chain which is the default `chainStyle` if not specified. In this case where height of `ConstraintLayout` is `wrap_content` any of the 3 `chainStyles` will work similarly as there **will not be** any extra space to distribute in the layout. – Ajil O. Nov 30 '17 at 13:53
  • 1
    Yes, you're right again, but spread vertical chain doesn't respect margins between views. I mean if you indicate 10dp between two views arranged vertically you're likely will have not 10dp as a result. Look at this answer and my reply https://stackoverflow.com/a/46584366/7158449 Or better look at this answer and reply https://stackoverflow.com/a/46588743/7158449 – Eugene Brusov Nov 30 '17 at 13:56
  • Hope that helps you to build pixel-perfect layouts to make designers and project managers happy ;-) – Eugene Brusov Nov 30 '17 at 14:41
  • I understand chaining or the accepted answer solves the problem. But why does the above mentioned code doesn't work? what is wrong with it? – adnaan.zohran Dec 06 '17 at 20:50
0

You may need to use the Constrain Chain.

Anjula
  • 1,690
  • 23
  • 29