Android

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

You are probably aware that our new Nexus One Android phone comes loaded with live wallpapers. I had the chance to work on some of them and I wanted to share with you high-resolution images of Grass and Galaxy. These two wallpapers were prototyped as desktop applications and you can see below what they look like.

I’ll try to see if I can get these two desktop apps released, hopefully with the code. The desktop versions run on Mac OS X, Linux and Windows.

Galaxy
Grass Night
Grass Sunset

Nexus One live wallpapers

Now that Nexus One is available, I can share with you the high resolution versions of several of the wallpapers that ship on the phone. The photos are available in resolutions up to 22 Mpixels. Enjoy!

romainguy - View my 'Nexus One Wallpapers' set on Flickriver

Nexus One wallpapers

I will be at Devoxx from November the 16th to the 20th to talk about Android. My session will explain how to write resolution independent applications. I will also introduce you to a new exciting graphics technology we’ve been working on.

Android at Devoxx 09

Google I/O and JavaOne are finally over and it’s a good thing, because after 5 sessions and 1 keynote, I was getting a bit tired :) The good news for you is that all of the Android sessions we gave at Google I/O are available online. You can watch the entire video recording of each session and download the slides as PDF files. The JavaOne sessions will probably be posted online later this summer.

Enjoy!

Google I/O videos available

Android’s drawables are extremely useful to easily build applications. A Drawable is pluggable drawing container that is usually associated with a View. For instance, a BitmapDrawable is used to display images, a ShapeDrawable to draw shapes and gradients, etc. You can even combine them to create complex renderings.

Drawables allows to easily customize the rendering of the widgets without subclassing them. As a matter of fact, they are so convenient that most of the default Android apps and widgets are built using drawables; there are about 700 drawables used in the core Android framework. Because drawables are used so extensively throughout the system, Android optimizes them when they are loaded from resources. For instance, every time you create a Button, a new drawable is loaded from the framework resources (android.R.drawable.btn_default). This means all buttons across all the apps use a different drawable instance as their background. However, all these drawables share a common state, called the “constant state.” The content of this state varies according to the type of drawable you are using, but it usually contains all the properties that can be defined by a resource. In the case of a button, the constant state contains a bitmap image. This way, all buttons across all applications share the same bitmap, which saves a lot of memory.

The following diagram shows what entities are created when you assign the same image resource as the background of two different views. As you can see, two drawables are created but they both share the same constant state, hence the same bitmap:

This state sharing feature is great to avoid wasting memory but it can cause problems when you try to modify the properties of a drawable. Imagine an application with a list of books. Each book has a star next to its name, totally opaque when the user marks the book as a favorite, and translucent when the book is not a favorite. To achieve this effect, you would probably write the following code in your list adapter’s getView() method:

Book book = ...;
TextView listItem = ...;

listItem.setText(book.getTitle());

Drawable star = context.getResources().getDrawable(R.drawable.star);
if (book.isFavorite()) {
  star.setAlpha(255); // opaque
} else {
  star.setAlpha(70); // translucent
}

Unfortunately, this piece of code yields a rather strange result, all the drawables have the same opacity:

This result is explained by the constant state. Even though we are getting a new drawable instance for each list item, the constant state remains the same and, in the case of BitmapDrawable, the opacity is part of the constant state. Thus, changing the opacity of one drawable instance changes the opacity of all the other instances. Even worse, working around this issue was not easy with Android 1.0 and 1.1.

Android 1.5 offers a very way to solve this issue with a the new mutate() method. When you invoke this method on a drawable, the constant state of the drawable is duplicated to allow you to change any property without affecting other drawables. Note that bitmaps are still shared, even after mutating a drawable. The diagram below shows what happens when you invoke mutate() on a drawable:

Let’s update our previous piece of code to make use of mutate():

Drawable star = context.getResources().getDrawable(R.drawable.star);
if (book.isFavorite()) {
  star.mutate().setAlpha(255); // opaque
} else {
  star. mutate().setAlpha(70); // translucent
}

For convenience, mutate() returns the drawable itself, which allows to chain method calls. It does not however create a new drawable instance. With this new piece of code, our application now behaves correctly:

If you want to learn more cool techniques, come join us at Google I/O. Members of the Android team will be there to give a series of in-depth technical sessions and answer all your questions.

Drawable mutations