Designer’s Guide to Supporting Multiple Android Device Screens

Author Nick August
Unlike iPhones, Android devices do not have the same company developing both the software and hardware.

This leads to different combinations of screen sizes, resolutions and DPIs and creates quite a challenge when designing and developing for these devices. While the iPhone 3G/S and iPhone 4 have different resolutions and DPI, they share the same screen size and the resolutions follow the same aspect ratio. Therefore, an image can be created to fit the iPhone 4’s specifications and be nicely down-scaled to the iPhone 3G/S. Credit to Steve Jobs for planning ahead and designing his phone with developers in mind.

For some reason, manufactures using the Android OS on their phones did not give us the same luxury. This leaves businesses with two choices – they can either choose not to develop for Android, and willfully miss out on a quarter of the market, OR push forward and learn. Sounds like a necessary evil, doesn’t it? But don’t worry! There is common ground when designing & developing for the extremely versatile world of Android.


Image representing Android as depicted in Crun...
Image via CrunchBase
Author Nick August
Unlike iPhones, Android devices do not have the same company developing both the software and hardware.

This leads to different combinations of screen sizes, resolutions and DPIs and creates quite a challenge when designing and developing for these devices.  While the iPhone 3G/S and iPhone 4 have different resolutions and DPI, they share the same screen size and the resolutions follow the same aspect ratio.  Therefore, an image can be created to fit the iPhone 4’s specifications and be nicely down-scaled to the iPhone 3G/S.  Credit to Steve Jobs for planning ahead and designing his phone with developers in mind.

For some reason, manufactures using the Android OS on their phones did not give us the same luxury.  This leaves businesses with two choices – they can either choose not to develop for Android, and willfully miss out on a quarter of the market, OR push forward and learn.  Sounds like a necessary evil, doesn’t it?  But don’t worry!  There is common ground when designing & developing for the extremely versatile world of Android.

Diving into the Problem

We can spend all day comparing “Apples to Androids”, but instead let’s jump right into what we’re dealing with here.  If you’re already aware of the problem at hand and would prefer to jump straight into how to handle it, go ahead and jump down to The Solution.  Or stay with us for a more detailed explanation.

Popular Android Devices
I thought it best to share a list of the most popular Android devices out in the market today and a few of their specifications.

popular android devices

Looking at this list, two things should jump out at you.  First, that Google’s Nexus One is highlighted with an ugly, pale red. This is because this phone has been discontinued.  However, even though it is no longer in production, there are still a hefty amount of owners out there.  Second, do you notice some inconsistencies between screen sizes and resolutions?  They’re not exactly following a perfect pattern.  Take special note of how our friend’s at Motorola throw us a curve ball by adding a few extra pixels in their Droid line.  Thanks guys.

Screen Resolutions & Densities

Below is a diagram showing the comparison of screen resolutions in Android Devices.

screen resolutions

Because there are devices with different screen sizes that share the same resolution, we run into different densities (DPI/PPI).  Refer back to the popular device list and compare the HTC Evo and HTC Droid Incredible to see this difference.  The inconsistencies between the two aren’t so large that it’ll ruin the design one way or the other, but it does give you a good idea as to what DPI to choose when you begin designing.  So will Android Developers Page.

Some of you right now are probably thinking, “This is old news.  We have been dealing with this issue on desktops and laptops for years.”  True, but the Android Platform gives us a few nifty tools to solve it this time.  Segue!

The Solution

The good news is that most of the problem solving can be done by application developers.  Not to delve too far into the technical side of things, the Android Platform provides the ability to use Density Independent Pixels (dip, as opposed to px) to define sizes of elements.  Making sure developers use these units will ensure that anything rendered through code will scale dynamically, ensuring a perfect fit no matter which screen is being used.  There are a few more suggestions on units like this; if you’re curious you can check them out on the Supporting Multiple Screens documentation on the Android Developer’s page.

But what about pre-rendered assets, like images?  There are a few choices:

  1. Use code for everything – Easy solution?  Depends on the complexity of the design.  Result in beautiful, eye-catching apps? Probably not.  Limited?  Oh yeah!
  2. Render separate images for all device/density scenarios – This is the easy way out.  Sure it’s the simplest way to make sure your images work on multiple screens, but it also increases the size of the application and slows it down.
  3. Design everything with the idea of Nine-Patch or tiled images in mind – An ideal solution for developers, but very limiting for designers.  See below for information on Nine-Patching.
  4. Render images for most used resolutions with the ability to stretch/tile cleanly – This is the most versatile solution.  Because the resolutions of Android devices do not share the same aspect ratio, using the same image for all devices will not work perfectly.  So, we worry about the most common, 240×340, 320×480, and 480×800.  Then we use Nine-Patch or tiled to make sure these images will fit properly for taller/wider screens.

Nine-Patch Images

Nine-Patch is a tool that comes with the Android Development kit that allows us to specify which areas of our images are safe to stretch.

The easiest way to understand this concept is through examples.  Here is an example of nine-patch in action.

9-patch

The corners and logo stay intact as the rest of the image is stretched.  An important thing to remember is that you’re not limited to the perfect grid I used in the example; you can be creative with your nine-patching.  Nine patches can be as skewed as necessary to accommodate your design.  To learn more about Nine-Patch images, see the Draw 9-Patch documentation on the Android Developer’s page.

9-patch2The image remains intact regardless of the screen size because we’ve protected the corners and center logo.

I’m not going to get into tiling images, since the point of this article is to give designers an understanding of things to keep in mind when designing for Android’s multiple screens, not a “How-To” guide.

Even though all of these solutions will work, I strongly discourage rendering images for every possible screen size unless there is no possible way to nine-patch or tile your images.  If you can somehow work around the design limitations of solutions #1 or #3, that would be utopia for developers and the clients who want their app(s) on as many screens as possible.  With that, happy Android App designing!

Enhanced by Zemanta

Autor: Gabriel Catalano - human being | (#IN).perfección®

Lo importante es el camino que recorremos, las metas son apenas el resultado de ese recorrido. Llegar generalmente significa volver a empezar!

2 opiniones en “Designer’s Guide to Supporting Multiple Android Device Screens”

  1. Pingback: Bitacoras.com

Comentarios cerrados.

GENTE COSMO

LIFESTYLE - by Esther Herrero

Being Your Brand

Branding and Strategy for Business and Life

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

imagination is the key

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Poesías, relatos, diario de sueños

Unencumbered by Facts

Taking unsubstantiation to new levels

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

BLOGTEC

Noticias de Tecnologia.

T a l e n t o  en  E x p a n s i ó n

Gestión de personas y transformación digital para las organizaciones líderes de la Era del Conocimiento

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Ideas para la clase

Experiencias creativas en la clase de español.

Little Grey Box

#TravelWell

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea Growth Hacking

Expertos en estrategia y auditoria de marketing

The Coaching Alliance

El camino hacia el éxito

Erick Lovera

Mi Pasión en un Blog

Estampas de México.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Escritora y formadora en comunicación

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

be.blog

be. Intelligent Multimedia Education

~~Mente en Gravedad~~

************************************************************************************************************

The Xtyle

Fashion Blog - Un Blog de Moda y Tendencias by Bárbara Sanz Esteban

aníbal goicochea

Tecnologías de la Información y Estrategia

A Waterfall of Sound

"Poetry is when an emotion has found its thought and the thought has found words." Robert Frost

Health & Family

A healthy balance of the mind, body and spirit

Style & Design

Fashion Trends and News

U.S.

News, Headlines, Stories, Video from Around the Nation

A %d blogueros les gusta esto: