How to add the bubbles to textview android?

廉价感情. 提交于 2019-11-27 18:50:57
Siddharth Lele

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

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!