Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 237
Lyubomyr Dutko Avatar asked Aug 15 '09 23:08

Lyubomyr Dutko


People also ask

What is padding in layout?

Padding is the space inside the border, between the border and the actual view's content. Note that padding goes completely around the content: there is padding on the top, bottom, right and left sides (which can be independent).

What is shape in XML?

The Shape Drawable is an XML file that defines a geometric shape, including colors and gradients. This is used to create a complex shape that can then be attached as the background of a layout or a view on screen.

How does padding of a view differ from the view's margin?

What is the difference between a View's Margin and Padding? Padding is inside of the border, margin is outside.


2 Answers

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.

like image 168
Lyubomyr Dutko Avatar answered Sep 20 '22 23:09

Lyubomyr Dutko


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:

  • DustinB's comment
  • Yahel's answer
  • user924's comment
  • How to add padding to gradient <shape> in Android?
like image 38
TheIT Avatar answered Sep 20 '22 23:09

TheIT