Android

Chet and I gave a talk entitled “Material Witness” at Google I/O today. I am happy to announce that the entire talk is now available on YouTube. I have also published the following resources:

Google I/O 2014 demo

Google I/O 2014 Slides and Demo

Android’s Font Renderer

Android’s OpenGL font renderer explained

I left the Android team a couple of months ago but there are still many visual effects and demos I would like to write for that platform. Since I am currently on vacation I was able to find some spare time to write a new demo that I hope will teach you a couple of new development tricks.

This new demo is called Road Trip USA and demonstrates how to implement path tracing. The video below shows what this effect looks like:

Path tracing is used in several places in the application: to draw the map of the USA, to draw the outline of each state, to draw the name of the states and to draw the drag indicator when loading is complete. The progress indicator briefly shown a the beginning (with moving chevrons) is implemented using a technique very similar to path tracing.

(more…)

Android Recipe #4, path tracing

Devoxx 2013

I just came back from Devoxx where Chet Haase and I gave a few talks on Android. The slides are now available online:

You can also download the Keynote versions of these presentations if you want to watch the embedded videos.

Devoxx 2013 presentations

Android applications running with hardware acceleration turned on can greatly benefit from using hardware layers. The point of this article is not to discuss hardware layers in details but to explain how you can quickly ensure you are not using them in a way that negatively affects performance. If you want to know more about layers, please refer to the Google I/O 2011 talk I gave with Chet Haase.

A view backed by a hardware layer can be rendered in a very efficient manner by the GPU. Updating a hardware layer adds quite a bit of overhead though. Every time a view backed by a hardware layer invalidates, the layer is cleared, the view is redrawn into the layer and the layer is then drawn on screen. This means the amount of work, in terms of fill-rate, is effectively doubled.

Layer updates are perfectly acceptable but should be kept to a minimum, particularly during animations. If a large layer updates multiple times during an animation you may see a drop in frame-rate. Android offers a developer option to help you track down this potential issue: Settings → Developer options → Show hardware layers updates.

Optimizing hardware layers

(more…)

Optimizing Hardware Layers

Android IO

Google I/O 2013 is almost over but a lot of sessions are already available online. I gave three talks this year and you can watch them today on YouTube:

In addition you can download the slide for the Android Graphics Performance talk:

And the slides for A Moving Experience:

If you have a copy of Keynote I recommend you choose this format to get both the notes and all the animations on the slides. Enjoy!

Android sessions at Google I/O 2013

I recently discovered MyColorScreen where Android users publish their beautiful home screen setups. I am impressed by the work and care that people put in customizing their home screen and I am also proud to see this because it’s exactly what we intended when we decided users could replace the default Launcher with their own.

Since some of you asked to see my own setup, here it is. It’s basic and boring but very efficient for me.

Launcher

Launcher

This third recipe is a new take on the popular sliding menu. You can find sliding menus in many applications including Path, Evernote, Falcon Pro, Google+, etc. Very often the sliding menu is just that, a simple sliding menu. Some applications go a little farther and add a dimming effect: when you open the menu, the menu is slowly revealed by fading out a black layer. All the implementations I’ve seen, the SlidingMenu library for instance, simply draw a translucent rectangle on top of the menu. This is not only expensive because it causes overdraw but it’s also fairly limited.

Today’s demo uses a different effect. Instead of simply dimming the layer, I’m turning it from black and white to full colors. The demo’s menu is a simple image but the effect with arbitrarily complex view hierarchies. To follow along you can download the source code and a binary to run on your device. Note that I have only tested this demo on Nexus 7. You will need the SlidingMenu library to build the demo yourself.

Sliding menu

If you cannot (or don’t want to) run the demo application you can see what the effect looks like in motion in this video. I captured this video in the Android emulator and the frame rate of my capture program was capped at 30fps so it doesn’t look as nice as it does on a device:

(more…)

Android Recipe #3, sliding menu, layers and filters

In this second recipe I will show you how to implement something that won’t be commonly used but fun nonetheless. It will however teach you how to implement advanced visual effects using Android’s animation engine and a very simple drawing trick. The picture below shows the effect: an animated spotlight slowly reveals an arbitrarily complex set of views (in this example, an image and two labels.) This effect can be used for splash screens (even though I dislike those on mobile) or highlight particular sections of your apps; for a tutorial for instance.

To follow along you can download the source code and a binary to run on your device. Note that I have only tested this demo on Nexus 7 and Nexus 10. You can replay the animation by changing the orientation of your device. You will be able to alternate between two different photos and see how the code adapts to both orientations.

Spotlight animation

If you cannot (or don’t want to) run the demo application you can see what the effect looks like in motion in this video. I captured this video in the Android emulator and the frame rate of my capture program was capped at 30fps so it doesn’t look as nice as it does on a device:

(more…)

Android Recipe #2, fun with shaders

I would like to try and start a new series of articles focused on giving you small recipes you can use in your applications to achieve very specific visual effects. For this first installment, I will show you how to draw a bitmap with rounded corners. Many people have asked me how to achieve this effect and I often see developers use a much more complicated solution than is necessary.

(more…)

Android Recipe #1, image with rounded corners

I recently wrote an article explaining how to track down and fix performance issues in Android application. This article was by no means a complete reference on how to solve all performance issues and focused on a particular set of issues caused by overdraw.

To help you better understand how to fix overdraw issues, I would like to invite you to download a small Android application I wrote (click File > Download to download the entire archieve.)

Your goal will be to use the tools described in my previous article to find and fix the 3 main overdraw issues in the app. If you do it right, you should turn the image on the left to the image on the right:

Android Performance in Practice

Note: this article is also available as a stand-alone document.

(more…)

Android Performance Case Study

I was delighted to find these two applications on Android Market today. The first, Magic Hour is a great camera/photo editing application. I could write at length about its user interface and editing features, but it’s the built-in filters market that makes Magic Hour so interesting and fun to use. Magic Hour is now my photo-taking application of choice, and the first Android application to make me abandon Vignette.

The second application is a game by Konami called X-Men. This game was originally released in the arcades in 1992. The game is a lot of fun but don’t expect to be able to easily finish it without abusing the continue system.

A fantastic camera application for Android
The Android port of the 1992 arcade original

Android apps: Magic Hour and X-Men

I had the chance to spend two full days at Google I/O 2011 earlier this week and I enjoyed spending so much time talking with many Android developers. You guys are doing an amazing job and I can’t wait to download and use some of the apps you showed me!

Google I/O was also the occasion for me to give two presentations about Android with my friend and colleague Chet Haase: Honeycomb Highlights and Android Accelerated Rendering. I am happy to announce that the slides for both these sessions are now available.

(more…)

Android presentations at Google I/O 2011

Android 3.0 animation demo

I published last week a video of a simple Android 3.0 animation demo and I promised I would publish the source code as soon as possible. I am happy to tell you that it is now available on Google Code.

(more…)

Source code for Android 3.0 animation demo

Watch in full 720p. This is a very simple demo that shows how to use some of the new Android 3.0 APIs.

Android 3.0 animations demo

Android 2.3 is finally out! I recently mentioned changes to default bitmaps and windows formats we made in Gingerbread and I would like to explain why these changes were made. I will also show you the difference between Android’s various bitmap formats and why you must use them carefully.

(more…)

Bitmap quality, banding and dithering

I recently published the slides of two Android talks Chet Haase and I gave at Devoxx in November. One slide in particular got a lot of interest from various Android web sites:

Image quality in Gingerbread
(more…)

Gingerbread and 32 bits windows

Chet Haase and I recently gave several presentations at Devoxx and the San Francisco Android user group. We’ve just posted the slides for two of these presentations:

These two presentations will teach you about development techniques we use every day on the Android team. The second one in particular shows what tools we use to track down performance issues. The videos of these two presentations are available on Parleys for registered users and will be available for free later next year.

Android Graphics, Animations and Tips & Tricks

As I mentioned a few days ago, I would like to present you Android applications I find interesting, useful, impressive or generally noteworthy. It’s not secret that I like photography, it should therefore not be surprising to some of you that I will start with a camera application.

Retro Camera by Urbian follows a recent trend in photography. Modern cameras, including entry-level point and shoot cameras, produce gorgeous and near perfect photos. Unfortunately, these pictures are often boring. That’s why more and more photographers use processing techniques to make their photos appear as if they had been taken with crappy cameras, often referred to as “toy cameras.” Retro Camera lets you take crappy yet artsy/interesting photos right away and saves you time in Photoshop, Lightroom, Aperture… The application sports a very realistic user interface centered around film photography. When you launch it, you almost feel like you are actually using a camera, and not a cell phone:

Turn your phone into a camera

(more…)

Android app: Retro Camera

I recently asked my Twitter followers what their favorite Android application was. I got a lot of replies and I was happily surprised by the wide variety of apps mentioned. I often mention apps and games I like on Twitter but this little experiment convinced me it would be nice to do the same on this blog and spend more time to talk about each app. Don’t expect full reviews or ratings, just thoughts about applications and games I enjoy using or I find useful. I will probably talk about some apps I found about thanks to your awesome replies to my Twitter question.

To open this new series of articles, I would like to start by showing you my home screen. I use an unmodified version of “stock” Android running on a NexusOne (and I won’t tell you which version I am running.)

My Android home screen

Among these various applications and games, the ones I use the most these days are Gmail, Talk and TweetDeck. Since I work at Google the first two are hardly surprising. I was using the official Twitter application until I saw so many people recommend TweetDeck yesterday. Aside from a few bugs and a couple of minor gripes I really like it so far.

Noteworthy Android applications

ScrollView is one of Android’s most commonly used widget and is also one of the easiest to use. When something is too big to fit on screen, drop it inside a ScrollView and you’re done. You can’t even get it wrong since a ScrollView accepts only one child at a time. There is, however, one use case a bit trickier to get right; unless you’ve carefully read the documentation.

Let’s imagine that your application needs to display a piece of text and a couple of buttons. The length of the text can vary and be longer or shorter than the screen. You want to put the text inside a scroll view and you want the buttons to scroll along with the text, probably to encourage the user to read the text before clicking any of the button. Depending on the length of the text, your application would look like one of the following screenshots:

(more…)

ScrollView’s handy trick

Android 2.2 was unveiled a few days ago at Google I/O and the SDK is now available for download. Android 2.2 offers numerous improvements and new features and there is one I would like to talk about in detail, the new Capture PSD tool.

Capture PSD can be found in HierarchyViewer and requires an emulator or phone running at least Android 2.2. If you are not familiar with HierarchyViewer, I encourage you to give it a try right now. It is an extremely useful tool to inspect and debug user interfaces on Android devices. The screenshot below shows where you can access this new feature; after loading a view hierarchy, simply press the Capture PSD button in the toolbar:

HierarchyViewer and the new Capture PSD feature

With Capture PSD you can generate a Photoshop file from a running Android application. The generated document contains every view that draws as a separate layer. This can be very useful to quickly see what your UI would look like if you moved things around for instance. It is also an easy way to work with designers and let them try out new concepts in existing user interfaces. Of course, it is also a fine way to see how other applications are put together and understand how to achieve similar UI patterns. In the following examples, I exported a PSD file from the Android Market application and changed the UI a little bit to see what it would look like with the tabs at the top:

Android Market as a PSD file

Each layer is named either after the id of the corresponding view, or after the class name of the view. Views in the invisible state are exported but their layers are hidden by default, as shown in the following screenshot:

Photoshop layers for Android Market

The exported files are kept as simple as possible to ensure compatibility with as many applications as possible. For instance, recent versions of GIMP can open the generated documents without any problem. Finally, know that the generated files are not compressed and can therefore be quite large.

Android to Photoshop

Green Ice Android

Ice Android

Sculpting Android

Android Party