Strange behavior of Android 9 patch image

Question

I am developing a chat application for that I am using 9 patch bubble

Function for displaying the bubble on screen

 static void showMessage(String message, boolean leftSide) 
    {
        Log.d("abc","show");
        final TextView textView = new TextView(activity);
        textView.setTextColor(Color.BLACK);
        textView.setText(message);

        int bgRes = R.drawable.left_message_bg;

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);



        if (!leftSide) 
        {
            bgRes = R.drawable.right_message_bg;
            params.gravity = Gravity.RIGHT;


        }

        textView.setLayoutParams(params);

        textView.setBackgroundResource(bgRes);

         messagesContainer.addView(textView);

                // Scroll to bottom
         if (scrollContainer.getChildAt(0) != null) 
                  {

                    scrollContainer.scrollTo(scrollContainer.getScrollX(), scrollContainer.getChildAt(0).getHeight());

               }

                scrollContainer.fullScroll(View.FOCUS_DOWN);

            }

XML Layout

<?xml version="1.0" encoding="utf-8"?>


<EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/messageEdit"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:autoText="true"
        android:hint="message text"
        android:layout_alignParentRight="false"
        android:layout_toLeftOf="@+id/sendButton"
        android:layout_marginRight="10dp"/>
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        android:id="@+id/sendButton"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>

<ScrollView
        android:id="@+id/scrollContainer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_marginBottom="20dp" android:layout_above="@+id/messageEdit"
        android:layout_below="@+id/meLabel" android:layout_marginTop="10dp">
    <LinearLayout
            android:id="@+id/messagesContainer"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
    </LinearLayout>
</ScrollView>
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/headerforchat"
        android:text="Me"
        android:id="@+id/meLabel" android:layout_gravity="left|center_vertical" android:singleLine="false"
        android:textSize="20dp"/>
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/headerforchat"
        android:text="Friend"
        android:id="@+id/friendLabel" android:layout_alignParentRight="true" android:textSize="20dp"/>

</RelativeLayout>

But is giving strange behavior when tested on android 2.3.Its looking nice in Samsung Glaxy S3

1st one isGalaxy S3 screenshot. 2nd one Android 2.3 screenshot.Blue bubble is showing weird in android 2.3

left_message_bg-->The orange bubble which will display after sending message

right_message_bg-->The blue bubble which will display after receiving message

9 patch images

Any help will be appreciated

Answer 1

My guess is that you've placed the 9-patch in only one drawable folder (drawable-xhdpi). When placed on a device that's not xhdpi, it gets scaled down (including the defining outer black pixels) and is no longer able to be interpreted as a 9-patch, so it fails. Either make a scaled mdpi and hdpi version, or place it in drawable-nodpi.