When you want to use an image as a view object background, for example, you need to use a bubble chat image as a chat app text message background, you can find that the text message maybe stretch the background image unwanted as below.

Android studio provide tools for you to resolve such problem. You can use that tool to change the background image to nine patch format image. Then you can get the correct stretched image like below.

This article will show you how to use the android studio nine patch tool to create and use the nine patch image.

1. What Is Nine Patch Image.

Nine patch image is an android special image format which can make the background image scaled correctly. So the image can be used in different size android devices such as mobile phone, android pad etc.

The nine patch image should be a png image. And only support that format image. You can not change an image suffix from jpg to png to make it possible.

Nine patch image suffix is .9.png. You can not change a png file suffix manually to make that image nine patch, you need to use android studio provided nine patch image convert tool. Otherwise, you may encounter unexpected error.

2. How To Create A Nine Patch Image.

1. First add an png image to the android project drawable folder. You can read How To Add Images In Android Studio Drawable Folder to learn more.
2. After that, right click the original png image. Click Create 9-Patch file in popup menu list.
   
3. After that you will find a same name png image with .9.png suffix is created in drawable folder.
   
4. Double click the newly created image, there are two panels opened. Left panel is the adjustable 9 patch image, the right panel is the result image after left panel image is adjusted.
5. The first image in right panel shows vertical direction adjust result. The second image in right panel shows horizontal direction adjust result. The third image shows both direction adjust result.
6. To adjust image stretchable area, you can first click a black point in the left panel image border, then you can drag the black point to specify the border stretchable area. Then the right panel will show the adjust result immediately.
   

3. Nine Patch Image Example.

Main Layout Xml File.

activity_nine_patch_image.xml

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bubble_chat">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is a nine patch image test.I need two line text to verify two direction border scratch."
        android:textSize="20dp" />
</LinearLayout>

Activity Java File.

NinePatchImageActivity.java

package com.dev2qa.example;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class NinePatchImageActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_nine_patch_image);

        setTitle("dev2qa.com - Android Nine Patch Example");
    }
}

Example 1 :

Stretch two border straight line for the 9 patch image.

Example 1 result.

Example 2 : 

Stretch two corners for the 9 patch image.

Example 2 result.

Example 3 :

Stretch one corner for the 9 patch image.

Example 3 result.

4. Nine Patch Image Frequently Meet Exceptions.

Duplicate Resources Exception.

Some times you may encounter below exception when build android project after create 9 patch image.

You need to delete the original png image after create the 9 patch png image to resolve this problem.

 Error:Execution failed for task ':app:mergeDebugResources'.
> [drawable/bubble_chat] C:\WorkSpace\dev2qa.com\Dev2qaExampleProjects\AndroidExampleProject\Example\app\src\main\res\drawable\bubble_chat.9.png [drawable/bubble_chat] C:\WorkSpace\dev2qa.com\Dev2qaExampleProjects\AndroidExampleProject\Example\app\src\main\res\drawable\bubble_chat.png: Error: Duplicate resources

File Crunching Failed Exception.

This is commonly because the 9 patch file is not created correctly. You usually need to adjust at least two side for the nine patch image to make it not damaged to resolve this issue.

Error:Execution failed for task ':app:mergeDebugResources'.
> Error: Some file crunching failed, see logs for details

If above method do not take effect, you can first delete the nine patch file, then click File —> Invalidate Caches / Restart menu, then create the nine patch image again after android studio restart.