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>

Check this answer https://stackoverflow.com/questions/17044081/how-to-add-imageview-inside-textview-or-add-textview-inside-imageview-android — Psirogiannis Dimitris, Apr 07 '22 at 11:49
@PsirogiannisDimitris I have already read this question, but I don't need to add imageView inside textView, I want to add text with an image on its right side and also at the bottom position of the imageView without text-indent. — Ameer Hamza, Apr 07 '22 at 12:10

score 0 · Answer 1 · edited Apr 13 '22 at 07:03

0

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

android:gravity="start|center_vertical"

edited Apr 13 '22 at 07:03

Rumit Patel

8,830
18
51
70

answered Apr 13 '22 at 06:24

Dhruv Sakariya

792
4
10

I have mentioned earlier in my question, that I want to display text on the right side and at the **exact bottom** position of an image. By using android:gravity="start|center_vertical" text is displayed at the right side and at the **bottom** position of the text itself, not at the exact bottom position of the image, A blank area will show under the image as text lines increases and text will not show at the exact bottom position of an image. as this is what I'm [Getting](https://i.stack.imgur.com/OpehE.png) **getting** but What I [Need](https://i.stack.imgur.com/CYDhU.jpg). – Ameer Hamza Apr 14 '22 at 06:28

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

1 Answers1