Android: How to display text at the left/right side and also at the bottom position of an image?

Question

Thanks in advance... I'm learning Android development with best practices, but I'm facing some issues regarding the development, I hope this community will guide me to become professional android developer.

What I Want: I want to display text on the right side and also at the bottom position of an image.

What I have Tried: I have used flow to manage the views virtually, I have also tried various scenarios of constraint layout, but in vain...

Problem Faced: Text is displayed totally on the right side of the icon, but I want to display the text with the icon and after a line break, the text should display at the exact bottom of the icon, not at the right side of the icon consistently.

Output: Obtaining Output

What I Need: Wants to get Output

My Code:

<androidx.cardview.widget.CardView
    android:id="@+id/quote_layout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:visibility="gone"
    app:cardBackgroundColor="@color/receiver_reply_bg_color"
    app:cardCornerRadius="8dp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:visibility="visible">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/contact_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:textColor="@color/reply_heading_color"
            android:textStyle="bold"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/view"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Device" />

        <androidx.constraintlayout.helper.widget.Flow
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="11dp"
            android:layout_marginEnd="8dp"
            app:flow_horizontalGap="2dp"
            app:flow_wrapMode="none"
            app:flow_horizontalStyle="packed"
            app:flow_verticalStyle="spread_inside"
            android:orientation="horizontal"
            app:constraint_referenced_ids="doc_image,message_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="@id/contact_name"
            app:layout_constraintTop_toBottomOf="@id/contact_name" />

        <ImageView
            android:id="@+id/doc_image"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_marginTop="4dp"
            android:longClickable="false"
            android:scaleType="fitXY"
            android:src="@drawable/ic_file"
            android:visibility="gone"
            app:layout_constraintStart_toStartOf="@id/container"
            app:layout_constraintTop_toTopOf="@id/message_content"
            app:layout_constraintVertical_bias="0.0"
            app:tint="@color/colorOrangeDark"
            tools:visibility="visible" />

        <TextView
            android:id="@+id/message_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintTop_toBottomOf="@+id/contact_name"
            android:textColor="@color/receiver_reply_text_color"
            android:textStyle="italic"
            app:layout_constrainedWidth="true"
            tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis mollis risus, ut egestas sapien. Curabitur cursus, libero sit amet feugiat gravida, metus felis vehicula risus, ut fermentum augue augue id turpis. Donec lacinia est sit amet justo pretium commodo. Quisque rutrum diam elit, porta interdum magna auctor et. Proin nec ipsum sed ex pulvinar egestas. Praesent vel sapien massa. Maecenas elit diam, efficitur ac nibh eget, scelerisque scelerisque neque."/>

        <View
            android:id="@+id/view"
            android:layout_width="3dp"
            android:layout_height="0dp"
            android:background="@color/reply_heading_color"
            app:layout_constraintBottom_toBottomOf="@+id/message_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:visibility="visible" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Answer 1

Add this to TextView. and make TextView width to match_parent.

android:gravity="start|center_vertical"