CODEWITHSUNDEEP
androidlistviewandroid-constraintlayout
lost baby
lost baby

Reputation: 3268

Why is my android constraintLayout losing its bottom row of textviews?

I am trying to use this layout as a header in a listview but the bottom row of textviews below the inner constraintlayout is not visible - it's like its height has collapsed to zero.
In the xml the inner constraintlayout declaration has a red line under it with a popup message "This view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint..." (jump to the LEFT? does that even make sense?) and I have tried to add vertical constraints like

app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"

but what happens is the whole layout loses its height.

I also find it very confusing when the design editor changes my xml without asking or warning me. It seems to like to set layout_width and height elements to "0dp" alot and also setting the guidelines width and height to

android:layout_width="wrap_content" android:layout_height="wrap_content".

Back when the only elements were the bottom row of textviews I did not set layout_width and layout_height as the constraints seemed to do the work. But now that I have added the top part "leaderinfo", the designer has added them as "0dp". I know I can reset them to be "wrap_content" and then the textviews will reappear but why should that be necessary - doesn't the designer set them to "0dp" for a good reason?

Thanks for any help !

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"

android:background="@color/listheaderbg"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:id="@+id/leaderinfo"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:background="@color/subsection1background"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="8dp">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:layout_constraintStart_toStartOf="@+id/guideline01"
        android:id="@+id/iv_profilepic"
        android:src="@drawable/ic_flag"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="2dp"
        tools:layout_editor_absoluteX="21dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_username"
        tools:text="@string/username"
        android:paddingStart="10dp"
        android:paddingLeft="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@+id/iv_profilepic"
        app:layout_constraintTop_toTopOf="@+id/iv_profilepic"
        tools:layout_editor_absoluteX="150dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_firstname"
        tools:text="@string/first_name"
        android:paddingStart="10dp"
        android:paddingLeft="10dp"
        android:layout_marginTop="5dp"
        app:layout_constraintStart_toEndOf="@+id/iv_profilepic"
        app:layout_constraintTop_toBottomOf="@+id/tv_username"
        tools:layout_editor_absoluteX="150dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_lastname"
        tools:text="@string/last_name"
        android:paddingStart="10dp"
        android:paddingLeft="10dp"
        android:layout_marginTop="5dp"
        app:layout_constraintStart_toEndOf="@+id/iv_profilepic"
        app:layout_constraintTop_toBottomOf="@+id/tv_firstname"
        tools:layout_editor_absoluteX="150dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:elevation="0dp"
        app:elevation="0dp"
        app:fabSize="mini"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toStartOf="@+id/guideline04"
        app:srcCompat="@android:drawable/ic_input_add"
        app:layout_constraintTop_toTopOf="parent"
        android:tint="#FFFFFF"
        app:backgroundTint="@color/submitbuttoncolor_hotpink"
        tools:layout_editor_absoluteX="351dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@+id/guideline01"
        android:id="@+id/iv_weight"
        android:src="@drawable/ic_scale"
        android:layout_marginTop="10dp"

        app:layout_constraintTop_toBottomOf="@+id/iv_profilepic"
        android:tint="@color/tealicon"
        tools:layout_editor_absoluteX="21dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_weight"
        tools:text="@string/_225"
        android:padding="5dp"
        app:layout_constraintStart_toEndOf="@+id/iv_weight"
        app:layout_constraintTop_toTopOf="@+id/iv_weight"
        app:layout_constraintBottom_toBottomOf="@+id/iv_weight"
        tools:layout_editor_absoluteX="62dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/guideline02"
        android:id="@+id/iv_height"
        android:src="@drawable/ic_height"
        app:layout_constraintTop_toTopOf="@+id/iv_weight"
        android:tint="@color/tealicon"
        tools:layout_editor_absoluteX="206dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_height"
        tools:text="@string/_0_0"

        app:layout_constraintStart_toEndOf="@+id/iv_height"
        app:layout_constraintTop_toTopOf="@+id/iv_height"
        android:padding="5dp"
        app:layout_constraintBottom_toBottomOf="@+id/iv_height"
        tools:layout_editor_absoluteX="248dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@+id/guideline01"
        android:id="@+id/iv_age"
        android:src="@drawable/ic_age"
        app:layout_constraintTop_toBottomOf="@+id/tv_weight"
        android:layout_marginTop="10dp"
        android:tint="@color/tealicon"
        tools:layout_editor_absoluteX="21dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_age"
        tools:text="23"
        app:layout_constraintStart_toEndOf="@+id/iv_age"
        app:layout_constraintTop_toTopOf="@+id/iv_age"
        android:padding="5dp"
        app:layout_constraintBottom_toBottomOf="@+id/iv_age"
        tools:layout_editor_absoluteX="62dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@+id/guideline02"
        android:id="@+id/iv_country"
        android:src="@drawable/ic_flag"
        app:layout_constraintTop_toTopOf="@+id/iv_age"
        android:tint="@color/tealicon"
        tools:layout_editor_absoluteX="206dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_country"
        tools:text="CA"
        app:layout_constraintStart_toEndOf="@+id/iv_country"
        app:layout_constraintTop_toTopOf="@+id/iv_country"
        android:padding="5dp"
        app:layout_constraintBottom_toBottomOf="@+id/iv_country"
        tools:layout_editor_absoluteX="248dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv_followers"
        android:src="@drawable/ic_followers"
        app:layout_constraintStart_toStartOf="@+id/guideline01"
        app:layout_constraintTop_toBottomOf="@+id/tv_age"
        android:layout_marginTop="10dp"
        android:tint="@color/tealicon"
        tools:layout_editor_absoluteX="21dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/MyTextView.thin"
        android:id="@+id/tv_followers"
        tools:text="223"
        app:layout_constraintStart_toEndOf="@+id/iv_followers"
        app:layout_constraintTop_toTopOf="@+id/iv_followers"
        android:padding="5dp"
        app:layout_constraintBottom_toBottomOf="@+id/iv_followers"
        tools:layout_editor_absoluteX="62dp" />



    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline01"
        app:layout_constraintGuide_percent="0.05"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="81dp"
        tools:layout_editor_absoluteX="21dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline02"
        app:layout_constraintGuide_percent="0.5"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="81dp"
        tools:layout_editor_absoluteX="206dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline03"
        app:layout_constraintGuide_percent="0.69"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="81dp"
        tools:layout_editor_absoluteX="284dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline04"
        app:layout_constraintGuide_percent="0.95"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="81dp"
        tools:layout_editor_absoluteX="391dp" />

</android.support.constraint.ConstraintLayout>

<TextView
    android:id="@+id/text1"
    style="@style/MyTextView"
    android:gravity="center"
    android:text="@string/exercise"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/leaderinfo"
    android:layout_marginBottom="2dp"
    android:layout_marginTop="2dp"
    android:background="@color/listheaderbg"
    android:layout_height="0dp"
    android:layout_width="0dp" />

<TextView
    style="@style/MyTextView"
    app:layout_constraintStart_toEndOf="@+id/guideline1"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    android:gravity="center"
    android:text="@string/rm1"
    android:id="@+id/text2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/leaderinfo"
    android:layout_marginBottom="2dp"
    android:layout_marginTop="2dp"
    android:background="@color/listheaderbg"
    android:layout_height="0dp"
    android:layout_width="0dp"
    tools:layout_editor_absoluteX="213dp" />

<TextView
    style="@style/MyTextView"
    app:layout_constraintStart_toEndOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    android:gravity="center"
    android:text="@string/rm1bw"
    android:id="@+id/text3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/leaderinfo"
    android:layout_marginBottom="2dp"
    android:layout_marginTop="2dp"
    android:background="@color/listheaderbg"
    android:layout_height="0dp"
    android:layout_width="0dp"
    tools:layout_editor_absoluteX="310dp" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/guideline3"
    app:layout_constraintEnd_toEndOf="parent"
    android:id="@+id/iv_rank"
    android:src="@drawable/ic_rank"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/leaderinfo"
    android:visibility="gone"
    android:background="@color/listheaderbg"
    tools:layout_editor_absoluteX="376dp" />

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline1"
    app:layout_constraintGuide_percent="0.44"
    android:orientation="vertical"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="181dp" />

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline2"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.71"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="292dp" />

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline3"
    app:layout_constraintGuide_percent="0.83"
    android:orientation="vertical"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="341dp" />

Upvotes: 0

Views: 2137

Answers (1)

Cheticamp
Cheticamp

Reputation: 62831

For the first issue about the inner layout needing a vertical constraint, you just need to constrain the top like this:

app:layout_constraintTop_toTopOf="parent"

The bottom does not need a constraint since the height is wrap_content.

Concerning the bottom text views, you have the outer constraint layout as wrap_content, so if the text views also have a height of wrap_content, then the layout can determine the appropriate size of the outer container which is the height of the inner constraint layout + the height of the text views.

But if the text views are set to 0dp which means to match the constraints, then there is a dependency that cannot be resolved. In other words, the size of the height of the text views depend upon the size of the outer constraint layout (match constraints) but the size of the outer constraint layout depends on the size of its contents which include the height of the text views but that can't be determined without knowing the size of its container. It can't be both, so the designer is trying to help you out of this dilemma by making the changes that you mention.

The bottom line is to constrain just the top of the inner layout and to specify a height size for the text views. If you make those changes, then it should work.

Upvotes: 1

Related Questions