Constraint Layout - Android - Avoid Overlapping

user_2579739 0
Viewed 546

I have an issue with constraint Layout overlapping. Basically, I have an image on the left and text view on the right. I am trying to have the text in the text view to appear in the centre of the screen, and it's appearing as expected. But when the text size is too big, the text view is overlapping with the image view.

If I set the TextView left constraint to the right of ImageView, the overlapping is not occurring. But when the text is small, the text is not appearing in the centre of the screen.

I tried to implement solutions from this post. But, it's not working for me. Kindly help me with this issue.

 <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imgBack"
            android:layoutWidth="wrap_content"
            android:layoutHeight="match_parent"
            android:contentDescription="@null"
            android:src="@drawable/image"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        
        <TextView
            android:id="@+id/tvUserName"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:text="I have a problem when the text is so big. It's overlapping"
            android:fontFamily="@font/proxima_nova_semibold"
            android:gravity="center"
            android:lines="1"
            android:textColor="@color/white"
            android:textSize="@dimen/header_sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
           />


    </androidx.constraintlayout.widget.ConstraintLayout>
android-constraintlayout android-xml android
2 Answers

Please try this solution.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tvUserName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/backgrounds/scenic" />

    <TextView
        android:id="@+id/tvUserName"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:ellipsize="end"
        android:gravity="center"
        android:lines="1"
        android:text="I have a problem when the text is so big. It's overlapping"
        android:textColor="@color/white"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
user_67456430

It doesn't overlap anymore:

enter image description here

<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="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvUserName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="I have a problem when the text is so big. It's overlapping"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imgBack"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Beside the issues the other user respond, i.e app:layout_constraintStart_toStartOf="parent" or wrap_content to the ImageView and the like, these attributes:

        android:layoutWidth="wrap_content"
        android:layoutHeight="match_parent"

Had typo.

user_44091130
Related