Android Nine Patch Image Example

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 may stretch the background image unwanted as below.

linear-layout-background-picture-is-not-nine-patch-result-release

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

nine-patch-image-stretch-two-border-result

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.

  1. Nine patch image is an android special image format that can make the background image scaled correctly. So the image can be used in different size android devices such as mobile phones, android pads, etc.
  2. 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.
  3. Nine patch image suffix is .9.png. You can not change a png file suffix manually to make that image nine-patch format, you need to use the android studio nine-patch image tool to convert it. Otherwise, you may encounter an unexpected error.

2. How To Create A Nine Patch Image.

  1. First, add a .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 ( bubble_chat_icon.png ). Then click the Create 9-Patch file… menu item in the popup menu list.
  3. After that, you will find the same name .png image with .9.png suffix ( bubble_chat_icon.9.png ) is created in the drawable folder.
  4. Double click the newly created image, there are two panels opened. The left panel is the adjustable 9 patch image, the right panel is the resulting image after the left panel image is adjusted.
  5. The first image in the right panel shows the vertical direction adjusted result. The second image in the right panel shows the horizontal direction adjusted result. The third image shows both directions adjusted results.
  6. To adjust the 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 adjusted result immediately. You can see this step demo video on youtube URL https://youtu.be/0eEt6XHmKS4.

3. Nine Patch Image Example.

3.1 Main Layout XML File.

  1. 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>

3.2 Activity Java File.

  1. 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");
        }
    }

3.3 Nine Patch Image Example 1.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/E_KzW9KKw5Q

  1. This example stretches two border straight lines for the 9 patch image.
  2. Example 1 result.
    nine-patch-image-stretch-two-border-result

3.4 Nine Patch Image Example 2.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/kfEoFrRl1vU

  1. This example stretches two corners for the 9 patch image.
  2. Example 2 result.
    nine-patch-image-stretch-two-corner-result

3.5 Nine Patch Image Example 3.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/jISn_kq5-ms

  1. This example stretches one corner for the 9 patch image.
  2. Example 3 result.
    nine-patch-image-stretch-one-corner-result

4. Nine Patch Image Frequently Meet Exceptions.

4.1 Duplicate Resources Error.

  1. Sometimes you may encounter the below exception when building an android project after creating 9 patch images.
     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
  2. You need to delete the original png image after create the 9 patch png image to resolve this problem.

4.2 File Crunching Failed Error.

  1. The file crunching failed error is because the 9 patch format file is not created correctly. You usually need to adjust at least two sides 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
  2. If the above method does not take effect, you can first delete the nine-patch file, then click the File —> Invalidate Caches / Restart… menu, then create the nine-patch image again after android studio restart.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.