Let’s continue talking about the appearance part of Android apps. Super inspired by the Plaid app by Nick Butcher and all the immersive feeling around it I want to build apps like that. Let’s make apps look amazing by using as much screen as possible and removing all unnecessary controls in this post!
Continuing with amazingly looking apps, Isotope is another app which I think is the iconic material design app. Yes, most popular apps might not be the best looking. With all the hate to chemistry I want to open up this app again and again. Well done! Amazing work, that’s the way to design. Would you want your app to be just all awesome as those two above? If yes, then let’s get started to make immersive Android apps and let no pixel to be unused!
We all got those amazing high dpi displays, but how much of it do we use for apps? Status bar + toolbar + navigation bar take 17.5% of screen, if you add tabs it’s 25% on Nexus 6p, 5x, Google Pixel! And even more on smaller phones. Screens are smaller, but not your fingers, we still need the same size buttons. Yes, we collapse tabs, but it’s still 17.5%! Navigation controls, action buttons, settings are important, but not necessary to display at all times. Plus apps kinda look like boxes with them. And I think that there’s some British research that shows how we would improve user concentration and speed by hiding those distracting controls/app name.
Yeah, if you got it already, we’re going to make our app take maximum screen without removing status/navigation bars. We make them translucent and display content under them. And you might think now: Ihor, what’s so special about it? Is it really so cool looking? Yes, it is! Changes the whole experience. And it cannot be achieved just by hiding toolbar (making it collapsible).
What’s great about it is that you don’t loose any of the functionality. We just make bars translucent and draw content under them. Yes, you’re not gonna use those areas as you primary area obviously, but it makes app breathe, makes it free.
How do we make that? Just add those three lines to your styles.xml
This will make status bar translucent/be able to draw under it, remove default action bar, make navigation translucent/draw under it. And remove any android:fitsSystemWindows=”true” in your layout, if you have. This attribute doesn’t draw the content under status/navigation bars, which is not what we want.
Ok, we now draw under status bar, but you want to start normally with status bar, toolbar and when we scroll down, we draw content under it. like this
To accomplish this we just set toolbar margin to 24 dp (25dp on pre M), status bar height, because we draw content under system bars. And just make a status bar view with primary color, it’s tinted by translucent status bar. The reason I create a view for status bar is because I don’t want status bar to tint everything with blue color. In top position it’s dark blue, but when content goes under it, it’s translucent black.
Just add view 24(25) dp + actionBar height view as a header of RecyclerView and we’re done! Here we go, we’ve got a full screen immersive app which has all the controls. But there comes a down point of this simple solution – toolbar won’t appear when you scroll up. And you’ll have to have to handle clicks through the list header, to handle toolbar clicks. You’ll have to reach the very top to get to controls. That could be a funny experience. Just imagine a feed something like in Twitter where for you to get to your toolbar you would have to scroll to the very very top of this feed!
Ok, so how can we improve it? What we want is for toolbar to be gone in the same way when we scroll down and appear as soon as you scroll up. CoordinatorLayout is perfect for that. Actually, you know what. This even easier than first approach, you don’t have to write your RecyclerView header view, handle clicks through it. CoordinatorLayout handles positioning our RecyclerView under AppBar. And here’s what I got
Just as you would expect, Toolbar disappears on scrolling down, appears immediately on scrolling up. Here’s the simple layout behind it
Couldn’t get any easier than that!
As you saw from examples, we don’t loose any of the functionality with it, but we use maximum of the screen when we can. This is super flexible and absolutely fantastic, I hope you love it just as I do. It might not look as cool in those gifs. I really suggest you clone this repo and try it out by yourself!
Now where can we apply it? In just any app which has a huge feed or any kind of list. Facebook, Twitter, you name it. I truly believe apps get much better by using the whole screen. Back, home buttons are not as important to take the screen under it. And time, notification icons can live well with translucent background ether. I really believe that’s the next material design app level. And more and more apps are going to apply this design in the future.
Ok, thanks for reading and if you like to test this app out, here’s the GitHub repo. And subscribe if you want to receive weekly newsletter. Now it’s three blog posts per week!
Follow me on Twitter, LinkedIn, Facebook, Facebook page. And there’s even more content coming from YouTube in the future plus some really cool games for you guys. Can’t wait to launch my Messenger bot for this page, receiving updates from Messenger app, what can be more convenient?
Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!