Android - Image Right of Text Overlaps Screen Horizontally

I'm trying have an image to the right of a TextView with a single line. When the text is short it works fine. The problem is when the text is too big and is truncated. The text fills the LinearLayout and the image is off screen

Short text:
short text

Long text:
long text

The code:

<?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="match_parent">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="32sp"
            android:ellipsize="end"
            android:maxLines="1"
            tools:text="Lorem ipsum dolor sit amet, consectetur"/>

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/ivInfectedDevOtherInfoIcon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="8dp"
            app:layout_constraintTop_toTopOf="@+id/ivInfectedDevOtherName"
            app:layout_constraintStart_toEndOf="@+id/ivInfectedDevOtherName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:srcCompat="@drawable/ic_tv" />

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

When the text is long how can I make the Image dock to the right so that it does not overlap?

Answers 1

  • Simply make the below changes to your xml layout:

    1.In LinearLayout add:

    android:layout_width="wrap_content"
    app:layout_constraintHorizontal_bias="0"
    

    2.In TextView add:

    android:layout_weight="1"
    

    3.In AppCompatImageView add:

    android:layout_weight="0"
    

    Final xml layout will be like below:

    <?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="match_parent">
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHorizontal_bias="0">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="32sp"
                android:ellipsize="end"
                android:layout_weight="1"
                android:maxLines="1"
                tools:text="Lorem ipsum dolor sit amet, consectetur "/>
    
            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/ivInfectedDevOtherInfoIcon"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginStart="8dp"
                android:layout_weight="0"
                app:layout_constraintTop_toTopOf="@+id/ivInfectedDevOtherName"
                app:layout_constraintStart_toEndOf="@+id/ivInfectedDevOtherName"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0"
                app:srcCompat="@drawable/ic_tv" />
    
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    Result for Long Text:

    long_text

    Result for Small Text:

    small_text


Related Articles