How to remove border only from one side of the element?

Question

I have:

<stroke android:width="1px" android:color="#A6ACB1"/>

I'd like to remove this border from the bottom (for example) of the element. Is it possible? (Eclipse suggests me only: color, width, dashWidth and dashGap).

Answer 1

This is a bit of a hack, but its possible to remove one or more borders using an inset drawable with negative values. Wrap the shape in an inset and apply a negative android:insetTop, android:insetBottom, android:insetLeft, or android:insetRight with abs value equal to the stroke width.

For example, to remove the bottom border from a rectangle with a 4dp stroke, use a android:insetBottom value of -4dp.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="-4dp">

    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF" />
        <stroke android:width="4dp" android:color="#000000" />
        <corners android:radius="4dp" />
    </shape>

</inset>

This seems to work well as long as the shape's corners have a radius that is less than equal to the stroke width. Otherwise use the larger of the two values (the radius) when applying the inset in order to completely hide the rounded portions of the adjacent borders.

Answer 2

As far as I understand it, there isn't an easy way of doing it. but if you use layer-list with an item that has the border and then one that doesn't with an offset from all the sides for which you want a border equal to the border width, you'd achieve that.

Let me make the xml for you representing the borderless bottom..

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- Border -->
    <item>
        <shape>
            <solid android:color="#f000"></solid>
        </shape>
    </item>
    <!-- Body -->
    <item android:left="2dip"
          android:top="2dp"
          android:right="2dp">
        <shape>
            <solid android:color="#ffafafaf"></solid>
        </shape> 
    </item>
</layer-list>

As you can see, I'm telling the second item to be inset of the first one by two dp's on all sides except bottom (hence the no-border result on the bottom), there you go:

So essentially this isn't a border per-se, it's the shape from below (although you could add a border if you need dashed or dotted or whatever) being covered by a second item with would be the body of the button. All in the same drawable :)

This can be applied to any border you want to remove, by changing the values that the item is inset, for example, if I change the right in the Body item to bottom, the missing border would the right one since it's the one without the inset