AppDisc
AppDisc

Reputation: 1

Constraint Layout for textview wrap for single and multiple line with icon

I have a constraint layout which contains a textview and a info icon (clickable) and value text next to it. I want to reduce the gap to 4 px between text and icon. I can reduce the gap by set the constraints to the text and icon either single line or multiple lines text. But I want to set the gap for the both single/less text and multiple lines. The icon should be near to the text without gap. Please refer the code below.

<?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:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"\>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/titleLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/compValue"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    
        <TextView
            android:id="@+id/compTitle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="start|center"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/text_icon_gl"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Test for single and multi line info icon" />
    
    
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/text_icon_gl"
            android:layout_width="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".9"
            android:layout_height="wrap_content"/>
    
        <ImageView
            android:id="@+id/compInfoIcon"
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:contentDescription="@string/accessibility_tooltip_str_collapsed"
            android:padding="2dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@id/compTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/text_icon_gl"
            app:layout_constraintTop_toTopOf="@id/compTitle"
            tools:visibility="visible"
            tools:src="@drawable/ic_info" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    
    <TextView
        android:id="@+id/compValue"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center|end"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/titleLayout"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="1.92" />

</androidx.constraintlayout.widget.ConstraintLayout\>
**Actual behavior Single line**
| Sample text android        (icon)  $1.90 |

**Actual behavior multiple line**
| Sample text android multi (icon)   $1.90 |
| line text android                        |

**Expected behavior:**
| Sample text android (icon)         $1.90 |

| Sample text android multi (icon)   $1.90 |
| line text android                        |

Help needed here. Thanks in advance.

Tried setting different constraints to icon and text. either single line or multi line works not both.

Upvotes: 0

Views: 21

Answers (0)

Related Questions