Doing More with the ActionBar
I love the look and functionality of the ActionBar. I find my thumb has more dexterity at the top of the screen than it does at the bottom when I’m holding my phone with one hand. And so I’m happy to see that the interface is evolving while retaining that valued real estate. Play Music is one app that show off that evolution. The app allows you to see the background at the top of the page, but then fades the ActionBar background color in as you scroll down the page, becoming opaque after you’ve scrolled past the Artist artwork. This image shows that. No, I don’t have any artist artwork, but you can see that the Action bar is clear to start, then becomes orange as I scroll down. It’s a pretty neat animation trick which you can use in your own apps.
Cyril Mottier wrote a guide back in November that shows how you can animate the ActionBar. In his demonstration he makes the background fade through several ranges of color (see the video below). Once you know how it’s done, you can make it do a lot more. Play Music is simply mating the alpha with the scroll location, which I would assume is very easy on the processor. Cyril saw this demonstrated at IOIO and wrote a follow-up article that augments his earlier explanation. But I also like the idea from a comment in the November article mentioning it would be technically possible to turn the ActionBar into a progress indicator. I suppose this could be as easy as resizing a bounding box to match a percentage, but I’ll let you work out all the details.
Want more posts like this delivered to your inbox? Enter your email to be subscribed to our newsletter.