RecyclerView items go off screen

Question

I have a RecyclerView with elements in it, I want the delete button for the element to be on the right side. When I test it on an emulator or look at the look of it in Android Studio, it looks fine, but when I launch the application on a real device, the button goes beyond the borders of the screen. My question is how to set the right alignment for button, and do so the text does not overlapping the button, but ends with an ellipsis or wraps on the next line.

On the emulator and in Android Studio: On emulator In Android Studio

But on my real device: On Samsung Galaxy Grand Prime VE Duos SM-G531H/DS

My list_item_view.xml file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="72dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:padding="8dp"
    android:paddingStart="16dp"
    android:paddingEnd="16dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/text_list_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="ExampleList" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|end"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:drawable/ic_menu_delete" />

</androidx.constraintlayout.widget.ConstraintLayout>

I would like to do something like this regarding text and buttons: List in Mail app

Answer 1

When the text length of your TextView will increase then your delete image will overlap with text. So put the vertical guideline.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="72dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="8dp">


<TextView
    android:id="@+id/text_list_item"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:textSize="24sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Hello example" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center|end"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/guideline2"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@android:drawable/ic_menu_delete" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="56dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Try it using a Relative layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="72dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:padding="8dp"
    android:paddingStart="16dp"
    android:paddingEnd="16dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/text_list_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="24sp"
        tools:text="ExampleList" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_gravity="center|end"
        app:srcCompat="@android:drawable/ic_menu_delete" />

</RelativeLayout>

If you want it like the last image you've posted then you can use this code, have refined your above code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="8dp"
    android:paddingStart="16dp"
    android:paddingEnd="16dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_list_item_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginBottom="5dp"
            android:textSize="22sp"
            tools:text="ExampleList" />

        <TextView
            android:id="@+id/text_list_item_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textSize="18sp"
            tools:text="Example List Description" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|end"
            android:layout_marginBottom="5dp"
            android:text="15 m"
            app:srcCompat="@android:drawable/ic_menu_delete" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|end"
            app:srcCompat="@android:drawable/ic_menu_delete" />

    </LinearLayout>

</RelativeLayout>