LayerLists in Android: A road less travelled
Recently, I was working on an app for my college’s technical fest. The design had already been made and I was supposed to reproduce it on the screens of the people who would attend the fest. Pretty standard stuff right?
For the most part, it was. As it turns out, the only things standing between me and ‘pretty standard stuff’ were the background images being used in my app’s screens. Out of all the hard things in computer science like cache invalidation and naming, it was displaying background images which got me ;)
Here’s the mock-up of a screen in the app:
The background consisted of two parts: a gradient and a pattern consisting of translucent rounded squares. Both of which could change from screen to screen. The part which caused the issue was the pattern.
Now before you form an opinion of my skills, please read on.
When I began making the layout, I wanted to use VectorDrawables for the background pattern. For me, the benefits were pretty obvious at that time: they’re small, appear sharp on all displays and are what all the cool devs use. So, I tried using them. But for some reason, the SVGs provided to me refused to be imported into Android Studio. I and my designer tried a few solutions mentioned on the internet. Since I’m writing this story and you’re reading it, we both know that they didn’t work. Then I stumbled upon a few posts(including Google’s) warning me not to use VectorDrawables for stuff bigger than 200dp due to performance reasons. This killed my interest in using them for the background.
After a while, I relented and messaged my designer to give me PNGs of the background. Thankfully, he was offline at that time. Faced with the prospect of not being able to make any progress till he came back online and gave me the PNGs, I tried looking for alternatives.
LayerLists somehow suddenly popped into my mind. I had used them earlier for making splash screens. Suddenly, I saw my background as what it really was: a list of shapes. This eureka moment led to the following snippet of code:
I literally just made a few rounded square ShapeDrawables and positioned them using a LayerList. Voila! I got what I wanted. This code works on all devices with API Level 21+. I don’t know about earlier devices because my minSdkVersion is 21.
For those of you who don’t know what LayerLists and ShapeDrawables are, read this paragraph. Others please feel free to skip it. ShapeDrawables allow us to define basic shapes like rectangles, rings, ellipses etc, customize their properties like corner radii, stroke and fill, supply a gradient and much more. All in XML! LayerLists allow us to combine multiple Drawables into one Drawable with the ability to position each one individually. Resources on both can be found by a quick Google(or DuckDuckGo) search.
I found this solution to be pretty elegant. It avoided the increase in app size which would have been brought due to PNGs. It didn’t cause any importing issues(😑). And apparently, ShapeDrawables are faster than both VectorDrawables and raster images too.
What do you think of this solution? Do share the news if this solution actually gets used by you. If you come up with a better solution then please definitely let me know.
