Android layout broken with 9-patch background

Question

I encountered this problem when updating my background to use a 9-patch image. The layout is fine on different screens using different sizes of the same image, but when I change the image to be a 9-patch it breaks the entire layout mysteriously.

The previous layout looks like this:

Original layout http://onik.org/android/layoutOk.png.

When changed to 9-patch:

9-Patch image http://onik.org/android/layoutError.png.

The XML file remained the same, just the PNG files were altered.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg">

    <TextView 
        android:text="@string/title"
        android:id="@+id/login_title"
        android:layout_width="fill_parent"
        android:layout_height="40px"
        android:textSize="30px">
    </TextView>

    <View
        android:id="@+id/login_underline"
        android:layout_width="wrap_content"
        android:layout_height="2px"
        android:background="#aaaaaa">
    </View>

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:stretchColumns="1"
        android:gravity="center"
        android:paddingLeft="10px"
        android:paddingRight="10px">

        <TableRow>
            <TextView
                android:id="@+id/login_usernameLabel"
                android:text="@string/login_usernameLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="5px">
            </TextView>

            <EditText
                android:text=""
                android:id="@+id/login_username"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:lines="1"
                android:nextFocusDown="@+id/login_password">
            </EditText>

        </TableRow>

        <TableRow>

            <TextView
                android:id="@+id/login_passwordLabel"
                android:text="@string/login_passwordLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            </TextView>

            <EditText
                android:text=""
                android:id="@+id/login_password"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:nextFocusDown="@+id/login_login"
                android:inputType="textPassword">
            </EditText>

        </TableRow>

        <TableRow android:gravity="right">

            <Button
                android:text="@string/login_login"
                android:id="@+id/login_login"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
            </Button>   


     </TableRow>

        <TableRow>

            <CheckBox
                android:id="@+id/login_remember"
                android:text="@string/login_remember"
                android:layout_span="2">
            </CheckBox>

        </TableRow>

 </TableLayout>


</LinearLayout>

Any ideas? Or other solutions to get non-scaled, centered background?

Milliliter

Could you re-upload the images here as inline images? They're currently missing from your site, which renders this question a little less readable. – Busboy

Oh, sorry, I forgot they were linked here. I'll try to see if I have old backups at home, but I think they're gone... – Milliliter

You saved my day. This was very hard to debug. THANKS!!! – Moscow

Answer 1

it means just add attribute

android:padding="0dip"

to your layout tag

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg"
    android:padding="0dip">

Update:

Android Docs has the exact explanation:

"You can also define an optional drawable section of the image (effectively, the padding lines) by drawing a line on the right and bottom lines. If a View object sets the NinePatch as its background and then specifies the View's text, it will stretch itself so that all the text fits inside only the area designated by the right and bottom lines (if included). If the padding lines are not included, Android uses the left and top lines to define this drawable area."

To ignore this default behavior we need to set padding attribute explicitly in XML layout

Requite

Thanks :) But do you know why this works? Or what the bug is? – Impersonal

developer.android.com/guide/developing/tools/draw9patch.html right and bottom sides define padding inside 9-patch image. You should set these paddings either in 9-patch image or explicitly in xml layout – Requite

@Vokilam, I just found this response. What about for using it as the background of a layout container? I'm using it for a LinearLayout, but the subviews aren't respecting the content area. They're going all the way to the edge. Any thoughts? – Donovan

How do I use the background yet keep its aspect ratio? I need it for a ViewPager that shows its pages only inside an image. Here's the thread about it: https://mcmap.net/q/427159/-how-to-set-9-patch-background-for-viewpager-that-will-put-the-pages-inside-and-keep-aspect-ratio/878126 – Creight

Answer 2

Solved the problem, my padding area on the 9-patch wasn't suitable. When I drew the padding area as the inverse of the stretchable area, the image started to work. I just thought this would have been automatic if no padding area was present :)

Milliliter

Answer 3

Use 9-patch set the content line(right and bottom)!

Berkly