[ANDROID] How to create a background shape with a double border / rounded border with a drop shadow

Usually we use <shape> objects in our .xml drawables meant for the backgrounds of buttons or other View objects.

I came across a situation where such object should appear as if it had been previously selected, and the graphic design choice was to put a thick rounded stroke around the container, while at the same time showing a hint of a dropped shadow.

Android <shape>’s only allow us to define rectangles, curve their <corners>, fill them up with <solid> colors, and to give them a single <stroke> around (dashed or solid). Therefore we can’t think of using 2 strokes.

Luckily drawable resources to be used as View backgrounds can be created using not just shapes, or bitmaps, but <layer-list>’s.

For creating the selected button below

android-how-to-make-background-with-2-borders-gubatron

this is what I did (after over an hour of playing around until I was happy, for some reason UI code takes me the longest to get it right, am I the only one?)

 

android-how-to-make-background-with-colored-border-and-shadow-with-shape

Leave a Reply

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