Shape drawable as background, a line at the bottom

Question

I am using a drawable as a background of a TextView just to have a divider line below the text. A achivied it with this drawable-xml:

<?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="#FFDDDDDD" />
            <gradient 
                android:angle="0"
                android:startColor="#FFAAAAAA"
                android:endColor="#FFEEEEEE"
                />
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape 
        android:shape="rectangle">
            <solid android:color="#FF000000" />
        </shape>
    </item>

</layer-list>

But this method draws a colored rectangle above a black rectangle. I would like to have just the line at the bottom of the shape with no black rectangle because black is not transparent. How could I achieve that?

Same applies - how will I add a thin line at the bottom of that view? — ZoolWay, Mar 28 '12 at 21:29
Ah okay, so thats not a background, it is a very thin View wich will be the line itself! Will try out later. Nevertheless it would be nice to know how to bottom align something in a drawable xml. — ZoolWay, Mar 29 '12 at 06:35
In general, I try to mess as little as possible with backgrounds unless absolutely necessary, since doing so overrides the default background colors that have states for focused, pressed, etc. — dmon, Mar 29 '12 at 14:06
For the lack of answers I guess there is no solution to do what I want with a drawable xml. So @dmon just sum up you advise against it because of default background plus view and I will accept it as answer ;) — ZoolWay, Mar 30 '12 at 14:55

score 221 · Answer 1 · edited Nov 22 '18 at 21:04

221

This is how I got a line at the bottom for mine. Draw a stroke but then shift the item up and to the sides to get the top and sides to not show the stroke:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-8dp" android:left="-8dp" android:right="-8dp">
        <shape> 
            <solid android:color="#2b7996"/>
            <stroke android:color="#33b5e5" android:width="6dp"/>
        </shape>
    </item>
</layer-list>

edited Nov 22 '18 at 21:04

Chitrang

5,097
1
35
58

answered Jan 02 '14 at 20:20

Go Rose-Hulman

2,677
2
15
10

I sounded like the OP wanted to avoid having color in the solid area. It that's the case. Instead of #2b7996, the solid could be transparent with #00000000. An 8 digit hex value specifies the alpha with the first two digits. – Joey Harwood Sep 18 '15 at 19:35
I like this solution, It is useful in RecyclerView as a divider of items, can reduce a layer of layout. – Spark.Bao Oct 08 '15 at 09:12
3

Getting rid of the `` gave me the desired results, with just the underline (on Galaxy S4 (Kit Kat) at least...not sure about other devices). – sotrh Sep 06 '16 at 20:36
What if I wanted color = transparent – DJphy Jan 09 '17 at 12:46
its work fine but how to achieve radius of corners :( – Darshan Khatri Jun 21 '18 at 06:21
@HendraWD increase negative margin to make it compatible with api 28 and above. – Chitrang Nov 22 '18 at 20:55
@Chitrang So now we will have 2 different xml files for this solution. One for api level >= 28 and one for api level < 28 – HendraWD Nov 24 '18 at 07:03

score 56 · Answer 2 · answered Apr 28 '17 at 07:15

56

I think it's better solution:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:gravity="bottom">
        <shape>
            <size android:height="1dp" />
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

answered Apr 28 '17 at 07:15

Dmitry Velychko

1,505
16
14

3

This solution works for almost all devices except Samsung Lollipop ones. The whole view is drawn with the color provided in `solid` tag. This should not be ignored because of Samsung share of the market. – R. Zagórski May 18 '17 at 12:35
This solution does not work on Nexus 4 / API 22 and Emulator / API 19 too. Probably only supported since API 23. – gmk57 Jul 05 '19 at 13:50

dmon · Accepted Answer · 2012-04-13T17:12:01.687

32

In general, I try to mess as little as possible with backgrounds unless absolutely necessary, since doing so overrides the default background colors that have states for focused, pressed, etc. I suggest just using an additional view (in a vertical LinearLayout) that is as thick as you need it to be. For example:

 <View 
       android:background="#FF000000" 
       android:layout_height="2dp" 
       android:layout_width="fill_parent"/>

edited Apr 13 '12 at 17:12

answered Mar 30 '12 at 19:30

dmon

30,048
8
87
96

8

hmmm I am not very convinced about your solution, for it needs an additional layout and an additional view, both are heavy objects just for an horizontal line... If you guys are allergic to backgrounds why not override onDraw() and just draw a line? – rupps May 08 '13 at 18:03
ahahahahaha very simple, very brillant. I have tried without success do a simple bottom line background. Why i dont think this? thank you – pablobaldez Dec 30 '14 at 20:17
Yeah, no. You should use as few views as possible, adding one only for a view background is extremely inefficient and should only be used in trivial cases where there is almost nothing on the screen. – Teovald Feb 06 '15 at 10:17
Overriding backgrounds can be a nice solution, as long as you also use a selector to draw the most important states such as pressed or selected. – Benjamin Piette Feb 23 '15 at 15:49

score 7 · Answer 4 · answered Jul 19 '17 at 13:24

Usually for similar tasks - I created layer-list drawable like this one:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
    </shape>
</item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

The idea is that first you draw the rectangle with underlineColor and then on top of this one you draw another rectangle with the actual buttonColor but applying bottomPadding. It always works.

But when I needed to have buttonColor to be transparent I couldn't use the above drawable. I found one more solution

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom" android:height="2dp"/>
</layer-list>

(as you can see here the mainButtonColor is transparent and white_box is just a simple rectangle drawable with white Solid)

`android:gravity="bottom"` needs min API 23 to work. – Dominikus K. Nov 20 '17 at 08:04 — Dominikus K., Nov 20 '17 at 08:04

score 3 · Answer 5 · edited May 04 '18 at 07:52

With this solution where ever you require different line you can. My requirement was underline only. Even you can give different colors to the layout. You can see in below picture, white line

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

    <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/white" android:width="5dp"/>
        </shape>
    </item>

    <item android:top="-5dp" android:bottom="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:width="5dp"/>
        </shape>
    </item>

    <item android:bottom="-5dp" android:left="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:width="5dp"/>
        </shape>
    </item>

    <item android:top="-5dp" android:left="-5dp" android:bottom="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:width="5dp"/>
        </shape>
    </item>

    <item android:bottom="2dp" android:left="5dp" android:right="5dp" android:top="5dp">
        <shape>
            <solid android:color="@color/colorPrimary"/>

            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp" />
        </shape>
    </item>
</layer-list>

score 2 · Answer 6 · answered Nov 14 '19 at 18:51

This is a slightly lighter variant of the above.

/drawable/rect_highlight.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="1px" android:color="@color/colorHighlight"/>
</shape>

/drawable/underline.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="-1px" android:insetRight="-1px" android:insetTop="-1px" android:drawable="@drawable/rect_highlight"/>

Usage:

<TextView ... android:background="@drawable/underline"/>

It's not mine, somebody smarter than I came up with it. If I was smarter, I would have asked who. :)

score 1 · Answer 7 · answered Jan 21 '22 at 23:48

This solution worked for most of the cases that I needed something like that.

<?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="@android:color/transparent" /> <!--background color of box-->
        </shape>
    </item>

    <item
        android:height="2dp"
        android:gravity="bottom">
        <shape>
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

score -1 · Answer 8 · answered Aug 30 '19 at 06:45

A simple solution is extending a TextView, then override the onDraw.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint paint = new Paint();
    paint.setColor(ContextCompat.getColor(getContext(),R.color.colorTextUnderLine));
    paint.setStrokeWidth(10);
    canvas.drawLine(0.0f,canvas.getHeight(),canvas.getWidth(),canvas.getHeight(),
            paint);
}

Shape drawable as background, a line at the bottom

8 Answers8

Linked