Managing documents in the Overview

The multitasking screen has undergone some huge changes in the 5.0 release. It also has a new name: overview, with the items called documents. Before Lollipop, this screen could only display one item per app, but now it is possible to open multiple tasks per app, each of them appearing as a separate document in the overview. Moreover, the appearance of each document can be tailored to the app – this post will show you how.

Migrating to RecyclerView from ListView

Google introduced RecyclerView as a part of the support library as the next-gen ListView. It’s new, efficient and highly customisable, no wonder everyone wants to make the switch. This step-by-step guide will show you how to migrate from an existing ListView (or GridView / StaggeredGridView / ExpandableListView), replacing the implementation with a RecyclerView.

Translucent system bars + ListView done right

About a year ago, Google introduced the translucent UI in KitKat, making the system bars transparent, with a hint of black gradient. After activating, apps are able to draw under the status bar (the one on top of the screen, with the notifications) and the navigation bar (this is optional, only present devices with no hardware buttons, at the bottom of the screen, contains the back, home and app switcher keys), which can result in a slick and modern user experience if done right.

But while the UI can spread under both bars, touch events in these areas will be ignored by the app, making the items in the bottom and top partially unclickable (see the screenshot on the left). This is why the layout has to be adjusted accordingly. But what can be done with a fullscreen ListView to keep the neat scrolling effect where items go under the status and nav bars, while the first and last items remain clickable?

A look at the Palette class

Back in February, Chris Banes’ two excellent blog posts (color matching part one and part two) showed us how can we extract the dominant colors from a bitmap. This can be a powerful asset to the user experience of your app: think about a dynamically colored ActionBar (and also the status bar in L), or a filter based on the dominant color of your bitmap. For example, the current version of iTunes paints the background with the most frequent color of the albumarts, resulting in a really cool user experience. The Palette class from the new Support Library announced at Google I/O does the same.

ParallaxViewPager: parallax background effect for the ViewPager

The so-called parallax effect is common in both web design and in mobile apps, it can be found on the major platforms, from Windows Phone to iOS through Android. According to Wikipedia, Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth (…). A popular, but not over-used effect, which goes well with a ViewPager and can do wonders with the user experience. The Android SDK doesn’t provide a built-in way to achieve the effect, so I created my own interpretation.

There are already a few solutions to the problem online, but none of them was a perfect match for my needs. GitHub user ChrisJenx’s Paralloid library is a good one, but it doesn’t work with the ViewPager. Most solutions available are based on a custom PagerTransformer, but I tried a different approach by extending the ViewPager and implementing a custom onDraw logic. I wrapped the whole thing into a custom view called ParallaxViewPager, which is available at GitHub and to be used as a Gradle dependency.

How to dim bitmaps with RenderScript

RenderScript was introduced with Honeycomb, aka API level 11. It is an API designed for performance intensive computations by executing native code on the device. These segments run either on the CPU or the GPU – this is not for the developer to decide, it is determined in runtime. I won’t go into more detail since there are a lot of comprehensive articles out there, for more info check out the documentation at the end of the post.

This short tutorial is about how to write RenderScript code for simple image manipulation tasks. These problems can be highly parallelized, because (at least in this example) the same chunk of code is executed independently on each and every pixel. The runtime takes care of parallelizing and scheduling the most efficient way for the current device.

A lot of useful built-in scripts (called intrinsics) are available in out of the box, but some use cases require a different solution. The following section will show you how to create a script for dimming a bitmap by a specific percentage. It is more like a guideline on how to implement these sort of functions – the basics are given, writing your own requires only an algorithm.

Playing around with the SwipeRefreshLayout

The pull to refresh is a UI pattern long since present in mobile applications – it makes the user able to refresh the current view with a vertical swipe. It’s most commonly used in iOS apps, although it can also be found in quite a few Android apps. Not long ago Google made an Androidified version (first appeared in Google Now), where the refresh indicator is built into the ActionBar. Although a great library was available for a couple of months now (ActionBar-PullToRefresh by Chris Banes), Google added an official way to to achieve this effect to the Support Library v19.1.0, called SwipeRefreshLayout.

Creating custom notification cards with the Android Wear Developer Preview

We’re working on an app that aggregates the most recent interactions associated with the caller and shows them as cards when the phone is ringing. While the ringer screen gives a great way to get an idea of why they’re calling, it is obviously limited: if you don’t pick up in 5-6 seconds, they’ll hang up for sure. This is why we’ve been actively working on the concept of a second-screen experience since day one, mostly thinking about tablets as the secondary source of information. However, a smartwatch makes much more sense: you can see the caller-related information not only on your phone before a call, but while you’re talking, and you don’t have to carry an extra tablet around.

So naturally we got excited when Google presented Android Wear, we started to experiment with the Developer preview, and while at this time we’re limited to using only notifications (since currently, there is no real Android Wear SDK), the results are surprisingly good. This example will show you how to create a horizontally swipeable, card-like notification for Android Wear.

Creating View reflections

Although it looks like the age of skeuomorphism and over-designed apps is finally over, you shouldn’t forget everything you’ve learned in that era. One of the effects is reflection, which can be good and bad at the same time: overusing can make your UI look cheesy and bloated, but sometimes it’s the right thing to use to boost the UX. This tutorial will show you how to create the faded reflection of any View subclass.

How to enable the translucent status and navigation bar

Android 4.4 (also known as KitKat) introduced a way for developers to make the background of the status and navigation bars translucent and draw under them. This is the effect that can be seen in the homescreen of the Nexus 5 (or rather the Google Experience launcher): the status bar and the navigation bar are both translucent, with part of the background showing behind them. These features can also be used in apps, allowing developers to further enhance the look-and feel.