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

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>