CODEWITHSUNDEEP
androidtextview
Harika Choudary Kanikanti
Harika Choudary Kanikanti

Reputation: 757

How to add the Image at the end of Textview Android

I am trying to build Whatsapp like Chat bubble, for that I used TextView with android:drawableRight.

But chat bubble is inside the TextView(but at right side), below is the chat bubble image.

enter image description here

And TextView is 

         <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:maxWidth="200dp"
           android:text="Some text"
           android:drawableRight="@drawable/bubble"
           android:drawableEnd="@drawable/bubble"
           android:padding="8dp"
           android:background="#dcf8c6"
          />

How I can add chat bubble as tail for TextView which will exactly look like WhatsApp chat bubble.

Finally It should look like

enter image description here

Upvotes: 2

Views: 2043

Answers (5)

Vishal Thakkar
Vishal Thakkar

Reputation: 2127

you can achieve this like below:

<LinearLayout
    android:id="@+id/bubble_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bubble1">

    <TextView
        android:id="@+id/message_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxEms="12"
        android:layout_gravity="center"
        android:text="Hi! new message"
        android:textColor="@android:color/primary_text_light" />
</LinearLayout>

In following code bubble1 is .9.patch image with tails which you want.

for more see this link chat with bubble

Upvotes: 1

Uttam Panchasara
Uttam Panchasara

Reputation: 5865

Use 9 patch instead of using image as background or else to textView to show bubble, nine patch is better..., refer this tutorial to how to create 9-PATCH image 9patch Tutorial

To generate 9patch online click here

Upvotes: 1

AmmY
AmmY

Reputation: 1859

You have to create 9patch image for your bubble image. image extention is .9.png. you can check this link for study about 9patch image. or you can create online 9patch imasge from here.

Upvotes: 0

Kushan
Kushan

Reputation: 5984

Whatsapp actually uses a NinePatch image to make the custom shape. If you insist on using this, you can use something like:

     <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       />

       <TextView
       android:id="@+id/textview"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:maxWidth="200dp"
       android:text="Some text"
       android:padding="8dp"
       android:background="#dcf8c6"
       />

       <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toEndOf="@+id/textview"
       android:background="@drawable/bubble"
       />

    </RelativeLayout>

Upvotes: 0

Atiq Ur Rehman
Atiq Ur Rehman

Reputation: 38

you can use android:drawableBottom="" to add image to bottom of textview

Upvotes: -1

Related Questions