119

I am trying to set padding in a <shape> declared within an XML file/layout. But whatever I set, nothing changes related to padding. If I modify any other properties, I see the effects on the UI. But it doesn't work with padding. Could you please advise on the possible reasons for which this might occur?

Here is the XML Shape I am trying to style:

 <shape xmlns:android="http://schemas.android.com/apk/res/android" 
      android:shape="rectangle">

    <stroke android:width="1dp" 
            android:color="#ffffff" 
            android:dashWidth="2dp"/>

    <solid android:color="@color/button_white_cover"/>

    <corners android:radius="11dp"/>

    <padding android:left="1dp" 
             android:top="20dp"
             android:right="20dp" 
             android:bottom="2dp"/>
 </shape>
Alp Altunel
  • 3,324
  • 1
  • 26
  • 27
Lyubomyr Dutko
  • 4,486
  • 7
  • 32
  • 39

5 Answers5

128

I have finally resolved my problem with padding.

So padding here will have no effect on the shape. Instead of this, you will have to apply padding in other drawable that will use it. So, I have a drawable that uses the shape and there I do following:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/shape_below"/>
   <item android:top="10px" android:right="10px" android:drawable="@drawable/shape_cover"/>
</layer-list>

So, as you can see in the second <item>-element I set padding (top and right). And after this everything works.

Thanks.

Lyubomyr Dutko
  • 4,486
  • 7
  • 32
  • 39
  • 1
    Hi, I don't understand how to apply this solution to the problem. I have a button that uses the shape and setting adnroid:top and android:right has no effect. How would I solve this? Thanks. – icecream Oct 18 '10 at 07:08
  • 2
    I THINK what Lyubomyr is saying is to do something like this, which works for me, but then the corners always have an opaque white background, causing display issues (sorry for format in comments!): – DustinB Feb 18 '11 at 22:12
  • Also off-topic but might be useful: if your drawable used is just a color, you can write like android:drawable="@color/divider" as well. BUT this breaks on older devices. I tested it on 2.2 and it was broken. Not sure at which level it became acceptable. – Pijusn Jan 08 '13 at 08:48
  • Actually, `` accepts child drawables (although it is not explicitly documented). That's how you can achieve this behavior within single xml. – Alex Cohn May 11 '15 at 19:30
  • 6
    This answer seems to be correct even seven years later. What on earth is `` *for*? – David Lord Dec 25 '16 at 10:52
105

As a couple of comments have alluded to, the best approach is to wrap the <shape> in an <item> element and set the padding there instead. There are however other options available which are detailed in the link below. eg

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="8dp"
        android:right="8dp"
        android:top="8dp"
        android:bottom="8dp">

        <shape android:shape="rectangle">
            ...
        </shape>
    </item>
</layer-list>

Depending on your needs, instead of using a layer-list, you could use any of the following drawable types:

  • layer-list
  • selector
  • level-list
  • transition

For more information about the available drawable types see this android documentation

Sources:

TheIT
  • 11,919
  • 4
  • 64
  • 56
  • yeah, you didn't mention `` – user924 Aug 31 '17 at 13:25
  • @user924 I'm not sure what your point is. One can include the item inside a if that serves one's purposes, but it's not necessary for the original question nor for conveying the general solution which is to nest the content inside an with padding – TheIT Aug 31 '17 at 23:15
  • 3
    I mean it's better to give an example which you can copy and run without editions, but in this case wouldn't be resolved (because it should be inside ) – user924 Sep 01 '17 at 07:59
  • 2
    @user924 I see what you mean now, thanks a lot for pointing out the issue and helping improve the answer. I've updated the code sample and added a comment about the available drawable types – TheIT Sep 03 '17 at 22:42
38

You can try insets:

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

    <shape android:shape="rectangle">

        <stroke
            android:width="1dp"
            android:color="#ffffff"
            android:dashWidth="2dp" />

        <solid android:color="@color/button_white_cover" />

        <corners android:radius="11dp" />
    </shape>

</inset>
Witoldio
  • 811
  • 9
  • 12
33

The answer by Lyobomyr works, but here is the same solution applied but without the overhead of creating a new drawable, hence minimizing the file clutter :

https://stackoverflow.com/a/3588976/578746

Copy/Paste of the anwser by anon on the SO answer above :

<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>
Yahel
  • 8,522
  • 2
  • 24
  • 32
  • 1
    Thanks for this answer Yahel, but remember to not post link only answers. Always provide all the necessary information in your answer as link content may change or become invalid. – TheIT Jun 30 '16 at 00:33
  • Edited the answer – Yahel Sep 25 '18 at 14:59
  • above snippet is not correct. You still need a layer-list around the tag "item". – Henry Apr 20 '21 at 07:27
10

I solved this problem like this:

<shape android:shape="oval"  >
    <stroke android:width="4dp" android:color="@android:color/transparent" />
    <solid android:color="@color/colorAccent" />
</shape>

just added a transparent stroke to it.

riverlet
  • 369
  • 2
  • 11