How to get gravity 'bottom' working on a drawable in xml

Question

I have a simple aim. I want a light grey background on my FrameLayout with a black dividing line underneath it (only undernearth, not all around). So far I have this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" android:gravity="center">
            <solid android:color="#EEEEEE" />
        </shape>
    </item>
    <item>
        <shape android:shape="line" android:gravity="bottom" >
            <stroke android:width="1dip" android:color="#010101"/>
        </shape>
    </item>
</layer-list>

But it draws the line through the centre, i.e. ignores the gravity='bottom' bit. How can I fix this?

EDIT: This question is very old. The selected answer may or may not be in-line with current APIs, etc. You are encouraged to start your own question rather than add to this one, which is no longer monitored.

score 30 · Answer 1 · edited Oct 23 '17 at 10:53

I've struggled a lot with this as well. Basically, to create a border at the bottom, you have to think in opposite direction from what you expect. You start with a rectangle with your Border color. On top of that, you draw the actual color, with an offset from the bottom. I use this:

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

    <!-- CREATE A RECTANGLE WITH YOUR BORDER COLOR -->
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#fff"/>
        </shape>
    </item>

    <!-- NOW DEFINE THE NORMAL COLOR-->
    <item android:bottom="BOTTOM_BORDER_THICKNESS E.G. 4dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ccc"/>
        </shape>
    </item>
</layer-list>

Or, as Juan Pablo Saraceno suggested :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item> 
        <color android:color="YOUR_BORDER_COLOR" /> 
    </item> 
    <item android:top="YOUR_BORDER_THICKNESS"> 
        <color android:color="YOUR_BG_COLOR" /> 
    </item> 
</layer-list>

This is a really good answer and deserves to be better positioned IMHO. I think is a bit of a shame that android doesn't support gravity the proper way and forces one to do this. It worked for me even using tags instead of rectangle, shapes, so even more simple. — Juan Pablo Saraceno, Oct 23 '13 at 16:01
The only problem is that i generates overdraw, because you are drawing a full rectangle with the color of your border only to overdraw it with the actual rectangle. Without real gravity still 9-patch wins. — Marcin Koziński, May 17 '14 at 08:02
This wont work if you need a translucent top part and a solid bottom part. So I guess I will *have* to work with a nine-patch? — A. Steenbergen, Dec 14 '14 at 16:45

score 18 · Answer 2 · edited Apr 28 '16 at 05:44

Unfortunately I have not found a way to get the gravity working for drawables, but I found how you can achieve what you want with pure xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-2dp"
        android:left="-2dp"
        android:right="0dp"
        android:bottom="1dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#EEEEEE"/>
            <stroke android:width="1dp" android:color="#010101"/>
        </shape>
    </item>
</layer-list>

Good luck:)

score 5 · Accepted Answer · answered Jan 12 '12 at 15:42

5

I'd recommend using a nine-patch image for this - here's an example that should do the job:

Example nine-patch image

(It's only tiny but it is there!)

If you place this in your drawable folder and set your FrameLayout's background to it then you should get the desired result. The content will go in the grey area and the #010101 pixel will be stretched horizontally to form a line at the bottom. Just make sure to keep the .9.png extension to ensure it gets loaded as a nine-patch.

Hope that helps you

answered Jan 12 '12 at 15:42

kingraam

1,521
11
18

1

That's a good point, I could do it that way. In fact, I will but I'd still be interested to know hot to get the gravity tag working for that line - seems a lot nicer solution to me but thanks for your suggestion. – ac_ Jan 13 '12 at 11:49
1

No mention of the gravity tag [here](http://developer.android.com/reference/android/graphics/drawable/ShapeDrawable.html). I can't see any way to achieve this using pure xml, you could create the ShapeDrawable in code and set its bounds based on the bounds of the layout? – kingraam Jan 13 '12 at 13:08

score 4 · Answer 4 · answered Mar 03 '15 at 05:02

4

This works!

<item>
      <bitmap
         android:gravity="left|bottom"
         android:src="@drawable/myDrawable" />
 </item>

answered Mar 03 '15 at 05:02

M. Usman Khan

3,689
1
59
69

2

Nop it doesn't for ShapeDrawable because it is a drawable, not a Bitmap. – nsvir Apr 27 '16 at 15:15

MertNYuksel · Answer 5 · 2018-05-04T13:18:27.023

I know it's pretty old question but given answers didn't work for me. Turns out in order to gravity property work you just need to add size tag in drawable item.

So following will work as expected:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="#EEEEEE" />
        </shape>
    </item>
    <item
        android:gravity="bottom">
        <shape android:shape="line">
            <size android:height="2dp"/>
            <stroke android:width="1dip" android:color="#010101"/>
        </shape>
    </item>
</layer-list>

ps. this feature added in api level 23 https://developer.android.com/reference/android/graphics/drawable/LayerDrawable#setLayerGravity%28int,%20int%29

score 1 · Answer 6 · answered Apr 28 '14 at 17:29

<?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="@color/Black" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/White" />
        </shape>
    </item>

</layer-list>

score 1 · Answer 7 · answered Nov 30 '17 at 20:30

1

Well, it's pretty old question, but none of the answers seem to answer the actual question (how to make gravity working) so here's a working example:

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

    <item>
        <color android:color="#2196F3"/>        <!-- Background color -->
    </item>

    <item android:gravity="bottom">
        <shape>
            <size android:height="10dp" />      <!-- I would suggest 1dp -->
            <solid android:color="#F50057" />   <!-- Line color -->
        </shape>
    </item>
</layer-list>

By analogy, if you want to use gravity left or right change attribute height to width

answered Nov 30 '17 at 20:30

Michał Pawlik

756
1
9
17

This solution works like a charm, because using the "put a rectangle covering the stroke of the other rectangle" solution left me sometimes with a tiny 1 pixel border on the right of the text boxes. – DrGrijando Apr 24 '18 at 09:26
2

Doesn't work for API 21. Bottom line just got stretched to full height – Leo DroidCoder Dec 07 '18 at 09:54
Just tested on API 22 and it doesn't work. Looks properly in the Android Studio Preview panel though. – Andrzej Zabost Jul 22 '19 at 11:54

How to get gravity 'bottom' working on a drawable in xml

7 Answers7

Linked