Android 9-Patch scaling issue

Question

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

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.

Answer 1

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

---

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

---

Modified image, but with a non stretchable height.

---

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