Search code examples
androidxmllayoutconstraintsoverlapping

Can't keep views from overlapping even when I use layout_margin

I can't figure out how to render my listItems correctly. Everything seems fine until the text title is too long. Looking at the pics below, I have the Title anchored on the left side of the listItem View and to the right of the imageView. I've even tried anchoring the right side to the right edge of the entire view but with no success. If the user enters a title too long the views overlap. I want the title to be centered between the imageview and the left side of the entire listItem view. I have provided pics of how this all renders. Any help would be greatly appreciated. When the title gets long enough, it wraps the text which is fine. At this point I'd even settle for the trailing ... but I would prefer to have the text wrap. I just don't want to overlap the imageview. I have also posted the xml code

enter image description here

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content"
    android:orientation="vertical"
    android:padding="5dp"
    android:id="@+id/list_item_container">

    <TextView
        android:id="@+id/match_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:textSize="16sp"
        tools:text="Match Name"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="16dp"
        app:layout_constraintRight_toLeftOf="@+id/imageView"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <TextView
        android:id="@+id/match_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Match Date"
        android:textAlignment="center"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintRight_toLeftOf="@+id/imageView"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/match_name"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"/>


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="60dp"
        android:layout_height="45dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="8dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:layout_marginRight="68dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintVertical_bias="0.484"/>

    <TextView
        android:id="@+id/match_id_hidden"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:visibility="invisible"
        tools:layout_editor_absoluteY="67dp"
        tools:layout_editor_absoluteX="24dp"/>


</android.support.constraint.ConstraintLayout>
Solution

  • Inside the ConstraintLayout try to always use "0dp" for your heights and widths and always set the app:layout_constraint..._to...Of for all 4 sides for all your views. Examine the outcome and then fine tune to get the expected result. Do this in the XML instead of in the visual editor; in my experience it is quicker and it avoids the layout_editor_absolute... settings.