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

In my case, the RecyclerView was inflated by an adapter and the adapter had correct constraints and 0dp width. However, it still didn't work.

What I ended up doing was changing the layout_width of the RecyclerView element to match_parent, rather than wrap_content.

RecyclerView

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/stepsList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

Adapter.xml

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/steps"
    android:paddingStart="10dp"
    android:paddingEnd="10dp">


    <ImageView
        android:id="@+id/stepsImg"
        android:layout_width="150dp"
        android:layout_height="80dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/stepsText"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginBottom="3dp"
        android:layout_marginStart="5dp"
        android:gravity="center"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/stepsIma"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

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.

Answer 3

Try removing

android:maxLines="2" 

attribute from textView element

Layout code:

<android.support.constraint.ConstraintLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
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">

<TextView
    android:id="@+id/tv_character_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:minHeight="100dp"
    android:paddingBottom="20dp"
    android:paddingEnd="10dp"
    android:paddingStart="10dp"
    android:paddingTop="20dp"
    android:textSize="24sp"
    android:textStyle="bold"
    android:text="Homer Test SHOW Homer Test SHOW Homer TestSHOWHomer Test SHOW Homer Test SHOW Homer Test SHOW END"
    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"
    />