Compound drawable for image placeholders

By | October 30, 2018
Questions:

I want to create a drawable that I can pass Glide to use as placeholder if there is an error loading the original image, or if there is no image at all. The problem is I want to use the same drawable throughout the app, but sometimes images are small squares, sometimes they are big rectangles, etc.

I created this drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/white"/>
            <stroke android:width="1dp" android:color="@color/chipBorder" />
        </shape>

    </item>

    <item
        android:gravity="center"
        android:height="16dp"
        android:width="16dp"
        android:bottom="16dp"
        android:left="16dp"
        android:right="16dp"
        android:top="16dp"
        android:drawable="@drawable/emptystate_uploadimage" />
</layer-list>

The problem is this drawable looks like this in a square:

enter image description here

but like this in a big rectangle:

enter image description here

And i dont mean the scaletype, if you look at the borders you will see that they are stretched. What I want is that the rectangle looks the same than the square: a small icon in the middle, and a 1dp border around. So the part that needs to stretch is the one inside but not the icon…

Answers:

Leave a Reply

Your email address will not be published. Required fields are marked *