CODEWITHSUNDEEP
androiduser-interface
Lyubomyr Dutko
Lyubomyr Dutko

Reputation: 4526

Padding doesn't affect <shape> in an XML Layout

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>

Upvotes: 121

Views: 102649

Answers (5)

Yahel
Yahel

Reputation: 8550

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>

Upvotes: 33

Witoldio
Witoldio

Reputation: 951

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>

Upvotes: 38

TheIT
TheIT

Reputation: 12219

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:

Upvotes: 109

riverlet
riverlet

Reputation: 379

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.

Upvotes: 10

Lyubomyr Dutko
Lyubomyr Dutko

Reputation: 4526

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.

Upvotes: 129

Related Questions