constraint layout textview not shown

Question

I'm creating a simple recycler view item layout with an image and textview inside a constraint layout. I'm setting constraint for image to be on the left side and text starts from the right of the image and to the end of the parent. However, when I do the text view is not shown on the screen. Can someone please help me out. Thanks in advance.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">

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

    <TextView
        android:id="@+id/tv_character_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:minHeight="100dp"
        android:paddingBottom="20dp"
        android:paddingEnd="10dp"
        android:paddingStart="10dp"
        android:paddingTop="20dp"
        android:textSize="24sp"
        android:textStyle="bold"
        tools:text="Homer"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/img_character_photo"/>

    <ImageView
        android:id="@+id/img_character_photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@color/colorAccent"
        android:padding="5dp"
        app:layout_constraintStart_toStartOf="parent"
        />

</android.support.constraint.ConstraintLayout>
</layout>

And If I remove the app:layout_constraintEnd_toEndOf="parent" from textView the I get following result.

Answer 1

I would suggest you to connect at least one point in both the axis for each view when using ConstraintLayout i.e. you should connect at least one point vertically and one point horizontally to get it right. Also, if you read about how to use ConstraintLayout properly, it tells the same. I believe this would solve your problem (and you would also see all your views on the actual device).

Do something like this:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_character_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:minHeight="100dp"
        android:paddingBottom="20dp"
        android:paddingEnd="10dp"
        android:paddingStart="10dp"
        android:paddingTop="20dp"
        android:textSize="24sp"
        android:textStyle="bold"
        tools:text="Homer Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum"

        app:layout_constraintStart_toEndOf="@id/img_character_photo"
        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintEnd_toEndOf="parent" />

    <ImageView
        android:id="@+id/img_character_photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@color/colorAccent"
        android:padding="5dp"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Screenshot (of the above code):

For screen size - 7.0 inch (1200 x 1920 pixels) [Device: Nexus 7]

For more information, please go through: https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#7

I hope, this helps you.