Style bottom Line in Android

Question

I need to create an android shape so that only the bottom has stroke (a dashed line). When I try the following, the stroke bisects the shape right through the center. Does anyone know how to get it right? the stroke needs to be the bottom line/border. I am using the shape as a background to a TextView. Please, never mind why I need it.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item>
        <shape android:shape="line" >
            <padding android:bottom="1dp" />

            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

Solution 1

It's kind of a hack, but I think this is probably the best way to do it. The dashed line will always be on the bottom, regardless of the height.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

Explanation:

The second shape is transparent rectangle with a dashed outline. The key in making the border only appear along the bottom lies in the negative margins set the other sides. These negative margins "push" the dashed line outside the drawn area on those sides, leaving only the line along the bottom. One potential side-effect (which I haven't tried) is that, for views that draw outside their own bounds, the negative-margin borders may become visible.

Solution 2

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:bottom="0dp">

        <shape android:shape="rectangle">
            <solid android:color="#88FFFF00"/>
            <stroke
                android:width="5dp"
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>

Solution 3

This does the trick...

<item >
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
    </shape>
</item>

<item android:bottom="1.5dp">
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BG_COLOR"/>
    </shape>
</item>

Solution 4

I feel it is straightforward, without all this negative paddings or storks.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/main_bg_color"/>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="5dp"/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>

Solution 5

This answer is for those google searchers who want to show dotted bottom border of EditText like here

Create dotted.xml inside drawable folder and paste these

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

Then simply set the android:background attribute to dotted.xml we just created. Your EditText looks like this.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Some Text"
    android:background="@drawable/dotted" />

View more solutions

Comments

[Cote Mounyo]

my stroke is a dashed line

[Jose_GD]

This works, the only caveat is when the view gets resized too small, the shape gets invisible

[Jose_GD]

Clever indeed. It took me some time to figure out that what makes this work is the difference in 1 dp (in absolute value) between top, right and left and the stroke width :)

[Jongz Puangput]

There are two rectangle overlap each other and add bottom space to show another color as a line. so, you can apply this to do other way

[source.rar]

This works perfectly, but could someone please supplement the answer with an explanation of the math in this (for poor souls like me and anyone else who arrives here in the days to come) :)

[Dacker]

Works great. And you can even use a selector that points to layer-list xmls depending on state. I had to figure that one out and it works too.

[Lester]

Good answer but with redundant overdraw

[Sviatoslav Zaitsev]

In this case your line will be in the center, not bottom

[Overclover]

If you don't need a special background, you can remove the <item android:drawable="@color/main_bg_color"/>

[D-rk]

and will also not work when you have colors with alpha

[Vlad]

You should always be careful not to introduce unnecessary overdraw.

[Vlad]

Don't introduce unnecessary overdraw. I think @Anonan solution is better. Try modifying that one to your needs.

[Ridcully]

Works with Android 27, doesn't work with Android 19 ... didn't test other versions.

[devconsole]

It requires API level 23 (Marshmallow).