Why is the text in the text view cut off in the recycler view?

Question

I'm trying to make an items with just an image and a title below it in a recycler view. For some reason my text view's that hold the title are getting cut off on the bottom.

See below:

I've tried setting the text view height to wrap_content but that will result in my images being pushed up and not consistently the same size across all items. Also I find it odd that the text view size & positioning doesn't even match the preview layout in android studios.

Any suggestions?

My view holder layout:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:background="@drawable/thumbnail_frame"
        android:paddingLeft="16dp"
        android:paddingTop="12dp"
        android:paddingRight="16dp"
        android:paddingBottom="12dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:weightSum="100"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="5:4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/thumbnail_item"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="80"
                android:background="@color/dark_red"
                android:scaleType="centerCrop" />

            <TextView
                android:id="@+id/thumbnail_title"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="20"
                android:ellipsize="end"
                android:maxLines="2"
                android:padding="8dp"
                android:text="@string/title_place_holder"
                android:textColor="@color/white"
                android:textSize="12sp" />

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Answer 1

I believe I have found the problem and it's the weight you're using in your LinearLayout. Depending on the ImageView height (80) you have determined TextView height (20). Because of that TextView cannot wrap, so text is being cut from the bottom.

Solution 1: remove weight in linear layout and set image height to fixed height, and TextView to wrap_content. Just like below:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="5:4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/thumbnail_item"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/dark_red"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/thumbnail_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:padding="8dp"
            android:text="@string/title_place_holder"
            android:textColor="@color/white"
            android:textSize="12sp" />
    </LinearLayout>

Solution 2: You can remove padding in the TextView or set it to smaller one, but the problem might reoccur on smaller screens.

Answer 2

Why did you created a linear layout inside a constraint layout?

You can remove linear layout an put your ImageView and TextView directly inside constraint layout and constraint TextView top to bottom of ImageView

and instead of using weight you can use layout_constraintHeight_percent just like below:

app:layout_constraintHeight_percent="0.2"

But I recommend you not to use height_percant or weight and also avoid sizing the views width/height statically. it can cause problems on different screens

I think its better to remove LinearLayout and also remove weight and add this line to your ImageView:

app:layout_constraintDimensionRatio="H,5:4"

Write your TextView and ImageView like below:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:background="@drawable/thumbnail_frame"
    android:paddingLeft="16dp"
    android:paddingTop="12dp"
    android:paddingRight="16dp"
    android:paddingBottom="12dp">

        <ImageView
            android:id="@+id/thumbnail_item"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/dark_red"
            android:scaleType="centerCrop"
            app:layout_constraintDimensionRatio="H,5:4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/thumbnail_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:padding="8dp"
            android:text="@string/title_place_holder"
            android:textColor="@color/white"
            android:textSize="12sp" 
            app:layout_constraintTop_toBottomOf="@id/thumbnail_item"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

Make the weight of imageview to 60 and the weight of textview to 40. In short keep adjusting the weight attr value in order to solve your problem. Use thia solution only when you really need weight attr in your code. Or else, just remove weight and set the height to wrap_content for both of them.