How to add the bubbles to textview android?

Question

In my application, I want to set bubbles to a text view, in the text view I add the setBackgroundResource() as you can see in the code.

With this code i'm getting an image like this:

I want a bubble shape image like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
    <solid android:color="#EDF5E4" />
    <corners android:bottomLeftRadius="@dimen/corner_radius"
    android:bottomRightRadius="@dimen/corner_radius"
    android:topLeftRadius="@dimen/corner_radius"
    id:topRightRadius="@dimen/corner_radius" />

Please tell me how to make this in my setBackgroundResource() XML.

Sequin

I would use a 9-patch png. developer.android.com/reference/android/graphics/NinePatch.html – Bucksaw

Answer 1

What you need to use is essentially a 9-patch image (As already pointed out by Ken Wolf in this comment).

To get you started, I am including a set of 9-patch images from one of my apps along with a brief piece of code on how to use it when creating a layout XMl. ;-)

The 9-patch Image Set:

(These are named: bubble_white_normal_mdpi.9, bubble_white_normal_hdpi.9 and bubble_white_normal_xhdpi.9 respectively. Remove the _mdpi, _hdpi and _xhdpi from the file names after placing them in their respective drawable folders.

The XML:

<LinearLayout
    android:id="@+id/linlaUserOther"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:baselineAligned="false"
    android:orientation="horizontal"
    android:padding="2dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="top|center" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/imgvwProfileOther"
                android:layout_width="42dp"
                android:layout_height="42dp"
                android:adjustViewBounds="true"
                android:contentDescription="@string/content_desc_user_profile"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_contact_picture" >
            </ImageView>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/bubble_white_normal"
        android:gravity="top|center"
        android:orientation="vertical" >

        .... // OTHER STUFF HERE THAT IS NOT NECESSARY IN THIS CODE SNIPPET ON SO

    </LinearLayout>
</LinearLayout>

NOTE 1:

Although, I am including a working set of Images (almost spoon feeding, if you will), I would strongly urge you to create your own set of images that fit in your scheme of things. Plus, this will also equip you to build your own resources in the future. The only reason I am going the extra mile is because I personally lost 3 days getting the speech bubble looking and working right. :-(

NOTE 2:

I am setting the image as a background to a LinearLayout. You, however, will need to set it to the TextView you need looking like a Speech Bubble.

Additional Sites (Tutorials):

1. http://blog.booleanbites.com/2012/12/android-listview-with-speech-bubble.html
2. https://github.com/AdilSoomro/Android-Speech-Bubble
3. http://developer.android.com/reference/android/graphics/NinePatch.html
4. http://developer.android.com/tools/help/draw9patch.html

Unbated

Answer 2

I think you are going to have a hard time trying to do it using just shape drawables.

I would use a 9-patch png.

http://developer.android.com/reference/android/graphics/NinePatch.html

Basically you either find/buy an image or create one in your favourite drawing program. Then you define the stretchable regions using the draw9patch tool which allow it to scale properly in your View.

Here is a tutorial, it's even specific to speech bubbles!

http://adilsoomro.blogspot.co.uk/2012/11/android-how-to-use-9-patch-png.html

It takes a bit of time but it is a crucial technique in making more designed visual interfaces.

Bucksaw