CODEWITHSUNDEEP
androidandroid-layouttextviewandroid-constraintlayout
I.P.
I.P.

Reputation: 320

ConstraintLayout cuts off too long text in TextView

I'm trying to make a master-detail view and I have a ListView with items of following layout:

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

    <TextView
        android:id="@+id/tv_from"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/start_point"
        app:layout_constraintStart_toStartOf="@+id/tv_date"
        app:layout_constraintTop_toBottomOf="@+id/tv_date_val" />

    <TextView
        android:id="@+id/tv_to_vall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/end_point"
        android:textSize="18sp"
        android:baselineAligned="false"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_to"
        app:layout_constraintStart_toStartOf="@+id/tv_from_vall" />

    <TextView
        android:id="@+id/tv_to"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/end_point"
        app:layout_constraintStart_toStartOf="@+id/tv_from"
        app:layout_constraintTop_toBottomOf="@+id/tv_from_vall" />

    <TextView
        android:id="@+id/tv_from_vall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:gravity="center"
        android:text="@string/start_point"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_from"
        app:layout_constraintStart_toEndOf="@+id/tv_from"
        app:layout_constraintTop_toTopOf="@+id/tv_from" />

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="@string/date"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_date_val"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_date_val"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="@string/date"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="@+id/tv_from_vall"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

which produces: enter image description here

and the text of two last lines of list item on right side is cut off. I would like line break if text is too long.

I tried android:lines="4", android:singleLine = "false"

Is there a way to fix it in TextView without changing the whole layout?

Upvotes: 4

Views: 2436

Answers (2)

Shweta Chauhan
Shweta Chauhan

Reputation: 6981

you need to change

  1. Change right text view width with 0dp. You are using wrap_content and because of that this issue generate.

  2. Change top to bottom constraint to all right textview, because when text increase it will overlap in your constraint.

    enter image description here

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

<TextView
    android:id="@+id/tv_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginLeft="16dp"
    android:text="date"
    app:layout_constraintBaseline_toBaselineOf="@+id/tv_date_val"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/tv_date_val"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:gravity="start"
    android:text="date text date text date text date text date text date text date text date text"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/tv_from_vall"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tv_from"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="start_point"
    app:layout_constraintStart_toStartOf="@+id/tv_date"
    app:layout_constraintTop_toTopOf="@+id/tv_from_vall" />

<TextView
    android:id="@+id/tv_from_vall"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="8dp"
    android:gravity="start"
    android:text="start_point start_point start_point start_point start_point start_point start_point"
    android:textSize="18sp"
    app:layout_constraintEnd_toEndOf="@+id/tv_date_val"
    app:layout_constraintStart_toEndOf="@+id/tv_from"
    app:layout_constraintTop_toBottomOf="@+id/tv_date_val" />

<TextView
    android:id="@+id/tv_to"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="end_point"
    app:layout_constraintStart_toStartOf="@+id/tv_from"
    app:layout_constraintTop_toBottomOf="@+id/tv_from_vall" />

<TextView
    android:id="@+id/tv_to_vall"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:baselineAligned="false"
    android:gravity="start"
    android:text="end_point end_point end_point end_point end_point end_point end_point"
    android:textSize="18sp"
    app:layout_constraintBaseline_toBaselineOf="@+id/tv_to"
    app:layout_constraintEnd_toEndOf="@+id/tv_date_val"
    app:layout_constraintStart_toStartOf="@+id/tv_from_vall" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 5

Zain
Zain

Reputation: 40898

You can solve this by:

  1. Using a match constraints width of each TextView which is (0dp) instead of wrap_content
  2. Add end constraint to the end of the parent app:layout_constraintEnd_toEndOf="parent"

So your layout would be:

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

    <TextView
        android:id="@+id/tv_from"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/start_point"
        app:layout_constraintStart_toStartOf="@+id/tv_date"
        app:layout_constraintTop_toBottomOf="@+id/tv_date_val" />

    <TextView
        android:id="@+id/tv_to_vall"
        android:layout_width="0dp"
        android:layout_height="wrap_content"

        android:gravity="center"
        android:text="@string/end_point"
        android:textSize="18sp"
        android:baselineAligned="false"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_to"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/tv_from_vall" />

    <TextView
        android:id="@+id/tv_to"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/end_point"
        app:layout_constraintStart_toStartOf="@+id/tv_from"
        app:layout_constraintTop_toBottomOf="@+id/tv_from_vall" />

    <TextView
        android:id="@+id/tv_from_vall"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:gravity="center"
        android:text="@string/start_point"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_from"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_from"
        app:layout_constraintTop_toTopOf="@+id/tv_from" />

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="@string/date"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_date_val"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_date_val"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="@string/date"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/tv_from_vall"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 4

Related Questions