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.
Read More

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.
Read More

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.
Read More

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.
Read More

main_2We’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.
Read More

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.
Read More

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.

Read More

Follow

Get every new post delivered to your Inbox.