CODEWITHSUNDEEP
androidbackgroundscalenine-patch
Graham Baitson
Graham Baitson

Reputation: 600

Android 9-Patch scaling issue

I am having scaling problems when using the 9-patch images for the background of EditText fields. I have a table which stretches the entire width, inside here I have the following tablerow which fills the width of the table.

The problem is that I am using a 9-patch image as the background but the edit text field is not stretching to the entire width, it only stretches to the width of the hint text.

<TableRow
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|center_horizontal" >

    <EditText
        android:id="@+id/et_username"
        android:contentDescription="@string/hint_enterUsername"
        android:hint="@string/hint_enterUsername"
        android:singleLine="true"
        android:textSize="@dimen/edittext_textsize"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"                    
        android:gravity="center_horizontal|center_vertical"
        android:background="@drawable/background_field_top" />

</TableRow>

I can see in the graphical view that the width of the row does stretch but the EditText field does not, as shown in the attached image

Graphical View

Has anyone any ideas on how to make the edittext stretch to the entire size? The following is the 9-patch image I'm using.

9-patch image

Upvotes: 3

Views: 4558

Answers (3)

TouchBoarder
TouchBoarder

Reputation: 6492

From Android Developers documentation on TableRow

A layout that arranges its children horizontally. A TableRow should always be used as a child of a TableLayout. If a TableRow's parent is not a TableLayout, the TableRow will behave as an horizontal LinearLayout.

@Nipun Gogia answer is not correct, why put a TableRow (behaving like a Horizontal LinearLayout) inside a LinearLayout with only one EditText child?

You should instead place the EditText view as a direct child of the TableLayout, it will then be displayed as a single row that spans all the table columns. And you can add more TableRow's and Columns if you want.

Stretch a background image of a EditText View with Nine-Patch:

You need to edit the 9-patch rule of the 9.png file setting the stretchable area of the image, place the top rule (black 1px line) in the middle of the image, now it is only stretching at the transparent end leaving the image un stretched. Learn how to her: http://developer.android.com/tools/help/draw9patch.html

Importent! remember to save the image with the extension .9.png

Nine-patch Image saved with file extension: background.9.png

enter image description here

Modified smaller image, it will look the same as the above because of the nine-patch rules.

modified image

Modified image, but with a non stretchable height.

enter image description here

Note: if downloading the images above with "save image as..", remember to add .9.png to the file name for it to work.

Upvotes: 2

Nipun Gogia
Nipun Gogia

Reputation: 1856

your is working fine for me ..i am using my own 9 patch... here is my code :

        <LinearLayout
            android:id="@+id/layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical|center_horizontal" >

                <EditText
                    android:id="@+id/et_username"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/areanumber"
                    android:gravity="center_horizontal|center_vertical"
                    android:singleLine="true"
                    android:text="hello" />
            </TableRow>
        </LinearLayout>

here areanumber is my 9 patch image... just try to wrap your code inside linearlayout i implemented your 9 patch image and its also working fine

enter image description here

Upvotes: 1

yoah
yoah

Reputation: 7230

Make sure that your image file name is background_field_top.9.png (make sure that the .9. is there) I made small changes to your image, so that the corner rounding is smoother, but that is not the core issue. suggsted image If this does not help, check if the background works well without the table, to isolate if the issue is the layout or the background image.

Upvotes: 1

Related Questions