How to add padding to gradient in Android?

Question

I have a shape with a gradient that I'm using as a divider between ListView items. I've defined it as follows:

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

<gradient
    android:startColor="#ccd0d3"
    android:centerColor="#b6babd"
    android:endColor="#ccd0d3"
    android:height="1px"
    android:angle="0" />

</shape>

I would like to add 6 pixels of padding on either side of the gradient, so that it doesn't extend from edge to edge of the screen.

However, no matter where I put an android:left="6px" and android:right="6px", it doesn't seem to take effect. I can put it in the <shape> element, the <gradient> element, or in a separate <padding> child of <shape>, and it doesn't change anything.

How can I add padding on the left and right of my list divider?

I've updated all the answers to use dp not px since most of the time developers should be using dp to take into account different screen densities: http://developer.android.com/guide/practices/screens_support.html — Intrications, Feb 10 '13 at 11:51
In addition to comments and solutions saying not to use px, use dp - I would like to add that gradient has no height attribute and is useless in this case. Height should be applied as an attribute of a element. — prodaea, Mar 14 '13 at 14:46
Possible duplicate of [Padding doesn't affect in an XML Layout](http://stackoverflow.com/questions/1283085/padding-doesnt-affect-shape-in-an-xml-layout) — tir38, Jul 22 '16 at 17:27

score 141 · Answer 1 · edited Feb 10 '13 at 11:50

141

I guess you could combine it like this:

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

    <item android:left="6dp"
          android:right="6dp">

        <shape android:shape="rectangle">
            <gradient android:startColor="#ccd0d3"
                      android:centerColor="#b6babd"
                      android:endColor="#ccd0d3"
                      android:height="1px"
                      android:angle="0"/>
        </shape>
    </item>
</layer-list>

edited Feb 10 '13 at 11:50

Intrications

16,782
9
50
50

answered Aug 28 '10 at 00:46

anon

1,411
2
9
2

1

This solution is better because it only uses one file. – Caspar Harmer Jun 20 '11 at 09:49
1

Works wonderfully with the slightest change: android:right="6px" /> should be android:right="6px" > – OrhanC1 Mar 15 '12 at 16:52
Note: The padding does not affect the content of the view. If you use this for an editText, the edge will overdraw the 1st letter of the text. – Loda Aug 07 '13 at 12:35
Great, now, how can I use this with my selector? – Behnam Jan 09 '14 at 12:10
3

@Martin unless you are using a height of 1px for a list divider. see http://stackoverflow.com/questions/3979218/android-listview-divider – mpellegr May 08 '14 at 17:42
what if I also want top and bottom padding? – Singed May 27 '15 at 12:18
This actually adds a Margin not Padding. – AlexVPerl Dec 08 '15 at 20:06
1

@Martin gonna look, how bulky your dp-defined separator will look like at the low-density screen. – Fattum Apr 07 '16 at 07:09

score 54 · Answer 2 · edited Feb 10 '13 at 11:50

54

Another solution using inset:

<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="6dp"
    android:insetRight="6dp" >

    <shape   
        android:shape="rectangle">

    <gradient
        android:startColor="#ccd0d3"
        android:centerColor="#b6babd"
        android:endColor="#ccd0d3"
        android:height="1px"
        android:angle="0" />

    </shape>

</inset>

edited Feb 10 '13 at 11:50

Intrications

16,782
9
50
50

answered Dec 06 '12 at 18:19

Wayne

6,361
10
46
69

@ntrications: no need to edit, I use px instead dp here because the questioner want that. – Wayne Feb 19 '13 at 02:07
1

This way, you could have it in the selector file as well. – elimirks Sep 10 '13 at 16:39
perfect. just what I needed. – Izak Sep 14 '20 at 19:32

score 23 · Accepted Answer · edited Feb 10 '13 at 11:48

23

One solution seems to be to "wrap" my drawable with another drawable that specifies the appropriate padding.

For example, list_divider.xml would be:

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

    <item
        android:left="6dp"
        android:right="6dp"
        android:drawable="@drawable/list_divider_inner" />

</layer-list>

And then list_divider_inner.xml would be the original drawable:

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

<gradient
    android:startColor="#ccd0d3"
    android:centerColor="#b6babd"
    android:endColor="#ccd0d3"
    android:height="1px"
    android:angle="0" />

</shape>

This results in two files to specify a simple divider though. I don't know if there's a way to do it with only one file though.

edited Feb 10 '13 at 11:48

Intrications

16,782
9
50
50

answered Oct 25 '09 at 22:57

emmby

99,783
65
191
249

1

px will look *great* an a modern xhdpi phone. — Don't use px **ever**. Use **dp** for graphics and **sp** for font sizes instead. Read: http://developer.android.com/guide/practices/screens_support.html – Martin May 02 '12 at 13:15
1

@Martin I've updated the answer to use dp to avoid copy and pasting of bad practices. – Intrications Feb 10 '13 at 11:49
7

This question was about using a fine divider between list view items. For this particular situation, i did specifically want to use a single pixel divider no matter what the resolution of the device, so px was correct. – emmby Feb 11 '13 at 01:52
This is the best solution i'v looking for! I'v just needed to add padding to native divider, thus I wrap `"@android:drawable/divider_horizontal_dark"` into layer-list container. Thanx! – Johnny Doe Jun 24 '13 at 15:11
Thanks For some reason inset doesn't work in android 4.2.2. Only this solution works. – Abhishek V Mar 21 '16 at 06:05

How to add padding to gradient in Android?

3 Answers3

Linked

Related