36

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?

onik
  • 1,922
  • 1
  • 18
  • 32
  • 9
    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. – Brad Larson Apr 08 '13 at 14:36
  • 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... – onik Apr 09 '13 at 05:16
  • You saved my day. This was very hard to debug. THANKS!!! – Matt W Nov 25 '14 at 04:30

3 Answers3

104

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

vokilam
  • 10,153
  • 3
  • 45
  • 56
  • Thanks :) But do you know why this works? Or what the bug is? – Eric Nordvik Aug 29 '11 at 12:17
  • 2
    http://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 – vokilam Aug 30 '11 at 06:58
  • @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? – karl May 06 '13 at 19:47
  • 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: http://stackoverflow.com/q/31229007/878126 – android developer Jul 05 '15 at 09:48
3

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 :)

onik
  • 1,922
  • 1
  • 18
  • 32
1

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

Fang
  • 3,652
  • 4
  • 16
  • 30