How we created Spectrum Android App Loading?

Vipul Asri
Squareboat Blog
Published in
2 min readOct 10, 2017

Spectrum provides a clean and simple UI for your AWS CloudWatch metrics like, CPU load, disk utilization, memory utilization etc. and has the capability to add custom metrics as well. It shows real time data from CloudWatch on a single screen, even for multiple servers or websites.

Spectrum Animated Vector Drawable

We used an awesome tool by Alex Lockwood called ShapeShifter, which enabled us to create Animated Vector Drawable for the Spectrum loading icon.

Spectrum loading using Shape Shifter

Shape Shifter makes it so easy for developers to create animated vector drawable for Android. Shape Shifter also supports path-morphing animations which helps create morph-able shapes.

Do keep in mind while exporting the project to Animated Vector Drawable(AVD), Shape Shifter doesn’t provide the code to repeat itself.

In order to achieve repeatable behavior on Android, you have to do it programmatically (Because you are animating single path from SVG and each have their own ObjectAnimator). Use Android Support Compat Library to properly support AVD back to API 14.

--

--

Vipul Asri
Squareboat Blog

Google Certified Android Developer | Open-sourced Timeline-View and Ticket View 🎟 .