How do I add padding to a bitmap and a color in a layer-list

Question

I need to create a drawable with a layer-list such that the background layer is an image and the foreground is a transparent color. I am able to do that. Where I am not succeeding is adding some padding/margin so that at them bottom a piece of the images shows without the colored layer on top of it. Here is my xml. Thanks for helping.

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

  <item>
    <shape
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" >
      <solid android:color="@color/color1" />
      <padding android:bottom="20dp" />
    </shape>
  </item>

</layer-list>

Since this configuration is not working, my guess is to put the padding in the first layer. But I am not sure how to do that with a bitmap

Solution 1

Move the bottom padding from the shape to the parent item:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <bitmap android:src="@drawable/img1" />
  </item>
  <item android:bottom="20dp">
    <shape android:shape="rectangle" >
      <solid android:color="@color/color1" />
    </shape>
  </item>
</layer-list>

See http://idunnolol.com/android/drawables.html#layer-list for more info.

Solution 2

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

    <item>
        <shape android:shape="oval">
            <solid android:color="#FFE3F5F2"/>
        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp">
        <bitmap
            android:src="@drawable/ic_link">
        </bitmap>

    </item>


</layer-list>

Solution 3

Wrap the bitmap inside an inset drawable and set your padding there

Solution 4

If you add the drawable to the same item in the layer-list you can apply properties such as android:top, android:bottom, android:left or android:right to handle padding.

I fixed my issue with the drawable being out of alignment with the TextView by simply using the android:width and android:height properties.

E.g.

<item
    android:width="26dp" android:height="26dp"
    android:drawable="@drawable/ic_person">
    <shape android:shape="rectangle" >
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

View more solutions