NinePatch two text fields with one image

Question

I want to implement this image

text box area1 and nine-text box2

How can I fix this?

Answer 1

There is one limitation with the 9 patch for Android: the content area defined by the right and bottom borders must be continuous (i.e. you can have only one segment on the right and bottom borders).

On the other hand, you can have several stretchable areas defined by segments on the top and left borders.

In your case:

for stretch areas:

• draw one segment on the left border

• draw two segments (of the same length) on the upper border (symmetrically around the vertical divider, but do not include the vertical divider in them).

for content area:

• draw one segment on the bottom border.
• draw one segment on the right border.

For content:

• define a horizontal linear layout with 2 TextViews in it (width = 0dp and weight = 1.0 for both)
• use nine patch images as background

I hope for this help.

----------------------------------------------- --- --------------------------

Result:

I use your plan, but the result

when my text increases the height of the text field does not increase

How to fix it?

----------------------------------------------- --- --------------------------

I do not think this is due to the 9-patch image. It is rather related to textView.

try: on textView

android:layout_height="WRAP_CONTENT" 

on a linear layout

 android:layout_height="WRAP_CONTENT" 

Answer 2

LinearLayout allows LinearLayout to specify the delimiters between its children. Therefore you need to:

• Place your TextView in a horizontal LinearLayout
• Set the rounded rectangle to 9-patch without a separator as the LinearLayout background
• Add separators to LinearLayout : android:divider="drawable_resource"
android:showDividers="middle" android:divider="drawable_resource"
android:showDividers="middle"

This layout is also more flexible - you do not need to do another 9 patch if you want 3 or more TextView s