androidandroid-layoutandroid-constraintlayout

ConstraintLayout: place TextView below ImageView


I'm faced with the seemingly simple task of having a layout with:

This is what I have

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/hamster"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_view"/>

</android.support.constraint.ConstraintLayout>

And this is what it looks like:

enter image description here

As you can see, the ImageView has a margin to the top which I do not want.

If I change the ImageView's constraints from

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

to

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

(removing the bottom constraint), the result looks like this:

enter image description here

Now the ImageView is at the very top of my layout, but the TextView has gone. Mind you, for the second variant, Android Studio 3's layout preview shows the layout exactly as I would want it:

enter image description here

What am I doing wrong and how can I fix it?

Note: The layout needs to be ConstraintLayout and the layout's height has to be wrap_content.

You can find my test project here.

EDIT: The problem seems to occur only on larger devices. I'm using the Nexus 9 emulator.


Solution

  • Yes as Akash Amin said add this two line in your ImageView

        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintVertical_bias="0.0"