Limit the border of edit text to bottom or to the bottom and 25% of its sides

Question

I want to colour the border of the Edit Text and used below code:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:tileMode="mirror">
    <solid android:color="#00000000" />

    <stroke android:width="1dip" android:color="#27bd15" />
</shape>

Above code is producing below shape:

but I need something like below

I don't what the line to be extended to 4 sides but only bottom should have the line and for sides it should extend to 25% of the height..

If that is not possible I am OK if I have line only at bottom of the edit text. But not sure how to achieve this.

Answer 1

Rather than use a shape drawable for something like that, I'd use a 9-patch image as a background. Using a nine-patch, you should be able to achieve exactly what you've drawn. You just need to make sure you define your sides to be 25% of the overall height of the 9-patch and define that all the pixels up the side stretch except the one pixel at the bottom. Similarly, for stretching in the horizontal direction, you can define that only a single pixel between the two sides stretches.

If you're not familiar with 9-patch images, there is a description here.

UPDATE:

All you need to do is create a png image file with your border, which will look something like:

Then use the Draw 9-patch tool to add the borders that tell it which parts to stretch, and you'll end up with something like this:

Remember to make sure you save it with a .9.png extension e.g. background.9.png, then simply set the background of your EditText to this new file. If you've done it correctly, the black lines in the border won't show on your UI, and it will rescale as you want.

Note that I've made these images bigger than they need to be so they're more easily viewable here and show you the principle.

You can even download the second image (the 9-patch) above and just use this one to see that it works in principle - remember to save it with the .9.png extension and not just .png

Then you can make your own with your colours, etc.

Answer 2

If you want to add border at bottom only then wrap your edittext in a layout. And apply bottom padding to layout OR bottom margin to edittext.

Sample code

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="border_color_here"
    android:orientation="horizontal"
    android:paddingBottom="5dp" >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="background_color_here"
        android:text="Hello Android" >
    </EditText>
</LinearLayout>