Android: How to create a dynamically changing image still looking good?

Question

I wonder how to do something like Whatsapp or Telegram does in their messageboxes. They always look good no matter how big they get, related to the text you send.

I tried to do this myself, i made this picture:

Now i use this in my App: (it is saved as chat_bubble.png)

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginRight="0dp"
    android:id="@+id/list_item"
    android:gravity="right">

    <LinearLayout
        android:id="@+id/row_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
        android:layout_marginTop="5dip"
        android:background="@drawable/chat_bubble"
        android:orientation="horizontal"
        android:singleLine="false" >

        <TextView
            android:id="@+id/list_item_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:paddingLeft="5dp"
            android:text="ProgramTitle"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/messageIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="10dp"
            android:padding="2dp"
            android:src="@drawable/wait" />
    </LinearLayout>

</LinearLayout>

This is the layout for every ListItem in my ListView. It looks like this:

But if I use a longer text, the pictures gets stretched out so it doesn't look fine anymore:

Now my question is, how is it possible to not have this issue. Is there any great idea to fix this? Would be awesome.

Answer 1

You should create a 9-patch from the image.

See this tutorial on the Android Dev. site: http://developer.android.com/tools/help/draw9patch.html

In a 9-patch image you declare which parts of the image is "stretch-able", and which parts not. It's basically a .png image, where a 1 px part of the image tells to the Android, to stretch this part. You should save your image in the drawable directory, called something.9.png, and you can refer to it as @drawable/something.

The Android SDK includes a small program, to create 9-patch images from common images.