Category Archives: Tutorial

Fast splash screens on Android

In order to make an app feel fast, it’s important that the user sees something immediately when the app launches. I still see many apps that take several seconds to show anything, and it makes me wonder if the developer simply don’t know how to achieve this instant gratification. Therefore I’ve decided to write a small post explaining how to get this done. If your app needs a lighting fast splash screen then this is for you.

Splash screen example

Splash screen that loads instantaneous

Executive summary

Launch an empty activity, with a custom theme where windowBackground is set. The activity launches the main activity after a short delay and then finishes.

The git repo is available here.

You can install the example here.

Do we need a splash screen?

Some of you might be thinking: If you’re so slow that you need a splash screen you’re doing it wrong! I would normally agree, but there are two reasons why I think it’s better to have a splash screen nonetheless. Firstly, inflating a layout on Android is slow, so no matter what you do there will be a delay before the user sees it. Secondly, the main activity often does a lot of stuff, so it is hard to keep it lean.

It’s all in the theme

The splash activity is the first activity to be launched. It shows the splash screen and then, after a short delay, it starts the main activity and finishes. The splash activity has no actual content view, and the reason for this is that it takes too long to inflate even the simplest layout. Instead the splash activity uses a custom theme which defines a default windows background  drawable. We set the custom theme in the manifest.

A responsive splash Drawable

A splash screen typically consists of a background and some logos. To make a single drawable that works well across different resolutions and PPIs you need to use the LayerDrawable. The LayerDrawable is a stack of several drawables on top of each other. The stacked drawables can be of different types and can be positioned individually, and you can choose if they are scaled or not.

In my example drawable I use three bitmaps. The first one is a tiled background, the second is the product logo which is positioned a little bit above the middle, and the third one is the company logo positioned in the bottom.

Transitions and progress bar

To make the transition from the splash activity to the main activity smooth I suggest that you override the animation between them. I also suggest that you re-use elements in the splash drawable in the main activity. For example, you can re-use a header or footer. This ties the two activities more together.

If you want to display a progressbar inside the splash activity, then you can add it to the (currently) empty splash layout. It won’t inflate and be shown immediately like the background, but it will still be fairly snappy.

The good and the bad

Pocket

Pocket

Stay.com

Stay.com

If you want to try out some apps which shows good usage of splash screens then install Pocket or Stay.com. They both have splash screens that show immediately, and they have no disturbing background color which is shown before that splash screen.

Kindle

Kindle

LinkedIn

LinkedIn

If you want a slightly worse example of splash screen usage, then try out  LinkedIn.  It has a very nice splash screen, but it is not shown immediately and it shows a solid white color before the splash screen appears. This happens because they have a white background in their theme, and another in their splash layout. Another example is Kindle. They have correctly set the windowBackground, but they have the Kindle logo as part of a layout – so the logo appears slightly after the background of the splash because it needs to be inflated.

YouTube

YouTube

If you want to see a “good” example of what happens when you don’t use a splash screen at all, then try out YouTube. If you do a cold start of YouTube it takes several seconds before anything is displayed. On my S3 it takes around 3 seconds. It makes you wonder if the phone registered the tap at all.

Can we do even better?

It seems to be possible to change the window background drawable at runtime. So one idea I’ve been considering is merging the splash activity into the main activity. The main activity could start out with a custom window background that shows the splash on startup, and have the main layout invisible. It could show a spinning progressbar until it’s all done  and inflated, and then change the window background and set the main layout to visible. Leave any comments or ideas here or on Twitter / @snowpong.

Designing assets for app developers

The development of apps is becoming more professional. As a result of this specialists like graphic designers are more often the creators of the look of an app these days. However, it’s still very much the realm of the programmer to deconstruct the design – and breath life into it. As a graphic designer, you can either help or hinder the developer in this job. It all depends on the assets you provide. Here is a list of best practices for graphic designers delivering assets to mobile developers. I assume the original designs are made with Photoshop/ Illustrator/ GiMP and that the programmer prefers them as 24bit .PNGs with an alpha channel.

1. Break up your screens into UI elements

It’s a good idea to provide mock-up screens  as a reference –  but these are not the files a developer wants to work with. You need to break the design apart into its different UI elements. Any button, frame, indicator, switch, arrow, toggle that you designed needs to be provided  in a separate file. If you leave this task to the developer your design might suffer inferior Photoshop skills and you’re wasting his time.

2. USE LAYERS, align them, provide all states

In each element file you need to provide all the states and color variations as separate layers. Take a custom button as an example. It comes in three colors and has two states (normal and pressed). That means you have to provide a button.psd with  six  layers: “black_normal”, “black_pressed”, “blue_normal” … you get the idea. Make sure to provide complete sets here. If you leave out layers, you’ve left the completion of your design to the programmer.  When you have complex set of layers where it is not obvious how they interact, make it simple for people by creating Layer comps in Photoshop. Also, make sure you’ve aligned the content of the different layers to their correct positions. The programmer should be able to simply save each layer in a separate .PNG without any extra work.

3. Use a sensible naming convention

If you pick a sensible naming convention for your files the programmer can adopt them and carry them on into the code with their original names. This makes it easier for both parties when designs needs to be updated, changed or expanded. Sensible file names from a programmers perspective means:

  • follow a consistent naming pattern. Example: header_button.psd, header_gradient.psd, header_logo.psd or similar.
  • use safe characters: lowercase a-z, 0-9 and _

4. Align to pixels

This really shouldn’t need telling, but apparently still does: Align your shapes to pixels. This means, almost without exception, any shape you add to your design must have a top-left and width-height that is in full-pixel values. This can be done easily in Illustrator, and moderately easily in Photoshop (“Snap to pixels” in the Shapes dialog). Coming back to the programmer with miss-aligned half pixels  is literally like flipping him the bird.

5. Summarize your color, font and margin choices

A lot of what the programmer ends up doing is condensing your design into reusable components and variables, hopefully without compromising its look. You can help in this by providing a list of your design guidelines. Ideally this list would contain your choices of:

  • Colors: text colors, button colors, list colors, effect colors
  • Gradients: backgrounds, effects etc.
  • Fonts: list of faces used, list of sizes used, shadow effect settings
  • Margins/Paddings: numbers for guides or grids used

6. Make your graphics scalable

It is no longer realistic to believe you are designing for one resolution or platform. More likely your design will be used for developing apps on both tablets and mobile phones across multiple platforms. Your design needs to be scaleable. You should always use vector shapes, your gradients and effects should be scaleable, you should never use pixmaps, your fonts should be readily available or embedded in the file. Basically, your image should look good rasterized to any size.

7. Tips for the elite designer

If you’re already following the above guidelines you’re making most  app developer happy. But if you want to go the extra mile, here are some tips to make your programmer even happier:

  • create scripts the programmer can run to render all assets to an arbitrary resolution
  • put your designs into any sort of version control system (git / svn / rcs / perforce)  - we honestly don’t care. Anything is better than zip files over mail, dropbox or whatever.
  • pre-render the assets to our current target resolutions – we’d love you for it.

Icons by http://dryicons.com

Tabs on Android

Using a tabbar, either at the top or bottom of an interface, is a typical design pattern used in apps to navigate between segments. This is used by the Android Twitter client for example. The typical way to implement this is by using TabWidget, TabActivity, TabHost and friends. Each tab is populated with whatever activity you want and all is well.

There is a problem with this approach however. If you start a new activity the tabs (area A, B, C) all disappear and this is not always what you want. Sometimes what you want is to keep the tabbar around and have an individual backstack for each of the tabs.

Typical tab layout

Typical tab layout

I’ve published an example on github that shows how you can get the best of both worlds. It explains how to keep an individual backstack for each tab, but also how to start activities that break out of the tabs as is the traditional way on Android. The Back button still works and you can also programmatically navigate back. The behavior of back is changed to respect the backstack of each individual tab.

If you want to try it out yourself I’ve compiled an Android package for you. Navigate to http://bit.ly/stacksintabs with your Android device and install the .apk to check it out.

Navigation in the example

Navigation in the example

The design is very simple. I still use TabWidget, TabHost and TabActivity (layout here) – but instead using normal activities for each tab, I subclass FragmentActivity – and build a stack of Fragments inside each tab. The gist of the code is in the addFragment(…) function

To launch a new fragment inside a tab (area D), see the launchNewFragment() function, and to see how you break out of the tabs and launch a new activity (area E) see the function launchNewActivity(…)

The fragments and activity I use are just examples, the point is that you replace ExampleActivity and ExampleFragment with you own classes.

My initial approach at solving this problem was using Fragments exclusively, but since nested Fragments are not supported on Android I gave up.

I hope this helps some of you – it’s all available under a BSD license. The example requires API level 7 and uses the Android Support library v4. Comments and contributions are welcome. Btw: I’m also working on a comparison between QML and Android XML where I compare pros and cons, so stay tuned for more :)