Produktion af grafik til en Android app

Android platformen har haft god vind i sejlene det sidste år. Som det kan ses af denne illustration fra analysefirmaet Nielsen, har 56% af de smartphones, der er blevet solgt i sommerens løb været Android telefoner — nøjagtigt dobbelt så mange som iPhones.

Succesen har har naturligt nok affødt en stigende efterspørgsel på apps til Android hos Greener Pastures, og vi er kommet godt fra start med bl.a. Aftensmad, Studier KU og Radio24syv.

En af de interessante udfordringer ved Android platformen i forhold til iOS er den enorme spændvide i hardware. Hvor iPhonen siden sin lancering “kun” har eksisteret i 5 forskellige modeller, er der i dag over 600 forskellige modeller Android telefoner registreret i Android Market.

Dette gør det selvfølgelig til en større opgave at sikre sig, at en app fungerer godt på de fleste devices “i marken”. Hvor man på en time eller to kan teste alle iPhone modeller, er den manøvre praktisk taget umuligt på Android, uanset hvor meget tid man afsætter.

Heldigvis bliver langt de fleste hardware-forskelle håndteret automatisk af Android operativsystemet, og er altså ikke noget, der giver problemer i udviklingssammenhæng. Men, der er navnlig ét sted, hvor den store variation skal indtænkes fra start: Skærmopløsningen.

Jeg har forsøgt at håndgribeliggøre variationen i skærmopløsning på Android med denne illustration af de forskellige iPhone og Android skærmopløsninger, der findes — jeg har endda udeladt et par Android variationer!

På iPhone siden er der kun 2 forskellige opløsninger. Disse udmærker sig ved, at iPhone 4 er nøjagtig dobbelt så høj opløsning på hver led, end de tidligere modeller. Det betyder, at en grafisk designer kan arbejde med brugergrænsefladen inden for et kanvas med velkendte proportioner og nemt kan klippe grafikken op direkte i Photoshop.

På Android siden er der et virvar af forskellige opløsninger og propertionsforhold. Ikke alene skal man, hvis man ønsker at understøtte hele spektret af devices optimalt, producere grafikken i 4 forskellige opløsninger (I Android-termer kaldet LDPI, MDPI, HDPI og XHDPI). Forholdet mellem disse 4 opløsninger er illustreret hér.

Variationen i størrelse og proportionsforhold gør også, at det i praksis er umuligt at specificere placering og marginer præcist i pixels: man må istedet ty til “procentdele af skærmbredden” eller såkaldte “device independent pixels” og den slags abstrakte begreber, der kan give enhver æstetiker med bare en smule kontrol-behov hovedpine.

I praksis er det heldigvis ikke helt så slemt som det lyder: For det første er der kun et meget lille antal ‘LDPI’ telefoner i marken, og dette er typisk ældre modeller. Vi anbefaler derfor vores kunder ikke at bekymre sig om denne opløsning, eftersom app’en stadig vil kunne benyttes, men blot have en mere gnidret grafik. ‘MDPI’ svarer til iPhone 3, og XHDPI til iPhone 4, hvorfor der er en stor grad af genbrug.

9-patches

Dertil kommer, at Android i stort omfang benytter sig af et smart type grafik kaldet ‘9-patches’ til at håndtere variationen i proportioner. Formattet er i sin enkelthed en .png fil, hvor den yderste række af pixels angiver, hvor en grafik må “strækkes”, når den eksempel vis skal fylde hele bredden eller højden af skærmen (husk på at højden og bredden i praksis er en ukendt størrelse på en Android telefon!).

Lad os som eksempel forestille os, at vi skal lave en fejl-boks, der glide frem, når der ikke er net-forbindelse. Vi vil gerne have, at den fylder hele bredden af skærmen, men ved i sagens natur ikke hvor mange pixels det er.

Ved hjælp af 9-patches kan et passende grafik-element fremstilles således:

Som det fremgår er det angivet med sorte pixels, at grafikken skal strække området under og til højre for cirklen med udråbstegnet, men ikke selve cirklen. Til højre kan man se resultatet af at strække grafikken til hhv. dobbelt bredde og højde. I 9-patch’ens højre og nederste rand kan man endvidere angive hvor teksten skal placeres, hvis grafikken bruges som baggrund for em tekst som hér.

System er utroligt fleksibelt, og selvom en grafiker typisk er nødt til at folade sin “comfort zone” for at kunne levere det nødvendige materiale til en Android app, tager det ikke længe, før man forstår systemet.

Afslutningsvis er her en liste af ting, du skal huske på, hvis du som kunde ønsker selv at påtage dig arbejdet med at klargøre grafik til en Android app:

  • Du kan ikke angive størrelser og marginer eksakt i pixels, men må ty til relative mål som procent af bredden eller ‘Device Independent Pixels’ (“cirka-pixels”).
  • Udover de opløsninger, i forbindelse med iPhone 3 (MDPI) og iPhone 4 (XHDPI) skal der altid laves en opløsning midt imellem, kaldet HDPI — 1,5 gange større end MDPI.
  • Næsten alle grafik-elementer, der skal fylde hele (eller dele af) skærmens højde/bredde skal konverteres til 9-patch format.

Hvis du som kunde hellere er fri for det ekstra arbejde med at gøre grafikker strækbare, er det selvfølgelig også noget vi gerne hjælper med.

Du kan læse om håndtering af de mange skærmopløsninger på Android, til du bliver grøn i hovedet i Android’s officielle dokumentation hér: http://developer.android.com/guide/practices/screens_support.html

Endvidere er der em mere omfattende introduktion 9-patches på engelsk hér: http://radleymarx.com/blog/simple-guide-to-9-patch/

Skriv en kommentar

 
Af Michael Nexø
michael@greenerpastures.dk
+45 70 26 00 69