CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Harsh Vardhan
Harsh Vardhan

Reputation: 665

Wrap text in ConstraintLayout

I have to make a layout with following image using Constraint Layout (ver 1.1.2) enter image description here

This is done, but there is an issue. When the value of any of the field is larger then the width available it get something like this: enter image description here

I want to keep the alignments while warping the value text in consequent lines. Here is the code for one row:

        <android.support.constraint.ConstraintLayout
        android:id="@+id/top_application_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        app:layout_constraintWidth_default="wrap"
        android:padding="5dp"
        android:background="@drawable/bg_white_header"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/top_client_container"
        >
        <TextView
            android:id="@+id/top_application_label"
            style="?gsTrafficHistoryClientDetailLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:text="@string/top_application"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
        <TextView
            android:id="@+id/top_application"
            style="?gsTrafficHistoryClientDetailValue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="20dp"
            android:text="YouTube.com YouTube.com YouTube.com"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/top_application_label"
            app:layout_constraintTop_toTopOf="parent"
            />
    </android.support.constraint.ConstraintLayout>

Now I have tried Relative Layout but I want to do it using Constraint Layout. Really appreciate any pointers.

Upvotes: 0

Views: 4885

Answers (5)

SAHIL PRAVINBHAI HAMIRANI
SAHIL PRAVINBHAI HAMIRANI

Reputation: 141

Change Your TextView Width to match_constraint, the problem is wrap_content.

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/top_application_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_white_header"
android:padding="5dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/top_client_container"
app:layout_constraintWidth_default="wrap">

<TextView
    android:id="@+id/top_application_label"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    style="?gsTrafficHistoryClientDetailValue"
    android:layout_marginBottom="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp"
    android:text="@string/top_application"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/top_application"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    style="?gsTrafficHistoryClientDetailValue"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="20dp"
    android:text="YouTube.com YouTube.com YouTube.com"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/top_application_label"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Upvotes: 4

Abilash
Abilash

Reputation: 343

Try using the concepts of chains in the constraint layouts using which I have achieved the layout you wanted as follows

<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/tv_left1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:padding="20dp"
        android:text="Most active client"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_right1"
        app:layout_constraintEnd_toStartOf="@+id/tv_right1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/tv_right1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_left1"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/tv_left2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:padding="20dp"
        android:text="Most active client"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_right2"
        app:layout_constraintEnd_toStartOf="@+id/tv_right2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_left1"
        />

    <TextView
        android:id="@+id/tv_right2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_left2"
        app:layout_constraintTop_toBottomOf="@+id/tv_right1"
        />

    <TextView
        android:id="@+id/tv_left3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:padding="20dp"
        android:text="Most active client"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_right3"
        app:layout_constraintEnd_toStartOf="@+id/tv_right3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_left2"
        />

    <TextView
        android:id="@+id/tv_right3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_left3"
        app:layout_constraintTop_toBottomOf="@+id/tv_right2"
        />

</android.support.constraint.ConstraintLayout>

**Note:**Besides this you can use the concepts of the barrier which you can find here

Upvotes: 1

Pawel Laskowski
Pawel Laskowski

Reputation: 6346

Add app:layout_constrainedWidth="true" attribute to the TextView which is going to expand (id/top_application) to allow for wrap_content and enforce constraints at the same time.

Upvotes: 4

Nabil
Nabil

Reputation: 672

Try using constraintWidth_default & constraintWidth_percent like:

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="top_application"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".5" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".5" />

</android.support.constraint.ConstraintLayout>

Upvotes: 0

Milan Pansuriya
Milan Pansuriya

Reputation: 2559

replace with below code

<android.support.constraint.ConstraintLayout
    android:id="@+id/top_application_container"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constrainedWidth="true"
    app:layout_constraintWidth_default="wrap"
    android:padding="5dp"
    android:background="@drawable/bg_white_header"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/top_client_container"
    >
    <TextView
        android:id="@+id/top_application_label"
        style="?gsTrafficHistoryClientDetailLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:text="@string/top_application"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <TextView
        android:id="@+id/top_application"
        style="?gsTrafficHistoryClientDetailValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginStart="10dp"
        app:layout_constraintStart_toEndOf="@id/top_application_label"
        app:layout_constraintTop_toTopOf="parent"
        />
</android.support.constraint.ConstraintLayout>

Upvotes: 0

Related Questions