CODEWITHSUNDEEP
androidandroid-constraintlayout
VolodymyrH
VolodymyrH

Reputation: 2019

Two elements in ConstaintLayout overlap each other

I want to create a list item using ConstraintLayout. Just one line, one View on left and on on the right. But if the first one it too long it overlap another. How to avoid it? Is it possible to make left View be in two lines or make ... before the right one?

Code:

<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="match_parent"
    tools:context="com.holodynskyi.v.test.MainActivity">

    <android.support.constraint.ConstraintLayout
        android:layout_margin="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="8dp"
            android:text="Text111111111111111111111111"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginEnd="8dp"
            android:text="Text2"
            app:layout_constraintEnd_toEndOf="parent" />
    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

Upvotes: 1

Views: 877

Answers (3)

Abhinav Gupta
Abhinav Gupta

Reputation: 2265

<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="match_parent"
    tools:context="com.holodynskyi.v.test.MainActivity">

        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="any text"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="center"
            android:text="any text 2"
            app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

Upvotes: 0

tanni tanna
tanni tanna

Reputation: 724

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_marginEnd="10dp"
        android:layout_height="wrap_content"
        android:text="abcdefghijklmnopqrstuvwxyzhhjkjhjkhadlkhjajsdlkjalkdjlkajdlkjaldkjaljljadjaldjaljd"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/text2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="2"
        android:layout_height="wrap_content"
        android:text="abcdefghijklmnopqrstuvwxyzhhjkjhjkhadlkhjajsdlkjalkdjlkajdlkjaldkjaljljadjaldjaljd"
        app:layout_constraintStart_toEndOf="@+id/text1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

modify app:layout_constraintHorizontal_weight value to your requirement

Upvotes: 1

Louis
Louis

Reputation: 2023

I would use a Guideline to define an invisible limit between TextView1 and TextView2.

<android.support.constraint.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">

        <TextView
            android:id="@+id/text1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginStart="8dp"
            android:text="Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1Text1"
            app:layout_constraintEnd_toStartOf="@id/endOfText1"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginEnd="8dp"
            android:text="Text2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/endOfText1" />

        <android.support.constraint.Guideline
            android:id="@+id/endOfText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.75" />

    </android.support.constraint.ConstraintLayout>

Upvotes: 1

Related Questions