Designen voor Android: DP, DPI en resolutie uitgelegd

[Totaal: 3   Gemiddelde:  3.3/5]

Ontwerpen voor Android kan soms wel lastig zijn. In tegenstelling tot iOS moet je bij Android rekening houden met verschillende resoluties en screen densities. Daarom zal ik in dit artikel uitleggen hoe je zonder veel moeite kunt ontwerpen voor Android.

Van iOS naar Android

Wanneer je ontwerpt voor iOS, dan heb je te maken met 3 (enkel iPhone) of 5 (met iPad) verschillende resoluties. Voor de iPhone zijn dat 320×480 (3GS), 640×960 (4 en 4S) en 640×1136 (5 en 5S) en voor de iPad 1024×768 (non-Retina) en 2048×1536 (Retina) pixels. Dus je weet van te voren al voor welke schermresoluties je gaat ontwerpen. Op Android werkt dit helaas anders.
Om te beginnen is het belangrijk dat je bekend raakt met een aantal termen en afkortingen die je vaak tegen zult komen.

Screen Size
Dit is de fysieke schermgrootte van een toestel, diagonaal gemeten en aangegeven in inches. De Galaxy S4 is bijvoorbeeld 5 inch. Android verdeelt de verschillende schermgroottes in de volgende categorieën: Small, Normal, Large en Extra Large.
Wordt aangegeven in: inch of mm

Screen Density
De hoeveelheid pixels binnen een fysiek gebied op het scherm. De gebruikte eenheid hiervoor is DPI (Dots per Inch) of PPI (Points per Inch). Android heeft vier verschillende groepen hiervoor: Low, Normal, High en Extra High density. Een low density scherm heeft minder pixels in een bepaald gebied dan een high density scherm.
Wordt aangegeven in: dpi of ppi

Orientation
Hiermee wordt de oriëntatie van het scherm t.o.v. de gebruiker aangegeven. Dit kan landscape of portrait zijn.

Resolution
Totaal aantal fysieke pixels op een scherm. 1 pixel is gelijk aan één fysiek punt op een scherm.
Wordt aangegeven in: px of pixels

Density-independent pixel
Dit is een virtuele pixel-eenheid. De density-independent pixel is gelijk aan 1 fysieke pixel op een 160dpi scherm, waarbij 160dpi de basis is voor een normal density scherm. Dus op een scherm met 160dpi is 1dp gelijk aan 1pixel.
De formule om van een aantal dp het aantal fysieke pixels te berekenen is px = dp * (dpi / 160)
Wordt aangegeven in: dp of dip

Klinkt het ingewikkeld? Zie het zo: De Samsung Galaxy S4 heeft een schermresolutie van 1080×1920 op een scherm van 5 inch. Hiermee komt de screen density van dit toestel op 441 dpi. Wanneer je dus een element moet ontwerpen van 40dp, dan moet dit een resolutie hebben van 40 x (441/160) = 111 pixels. Als je hetzelfde element voor bijvoorbeeld de HTC One moet ontwerpen, een telefoon met dezelfde resolutie maar met een hogere dpi (468), dan kom je uit op een ander getal: 40 x (468/160) = 117 pixels.

Nu is je vraag, moet ik rekening houden met de dpi van elk scherm? Het antwoord is gelukkig nee. Waar je op moet letten is dat je een aantal basis screen densities ondersteunt en Android zorgt voor de rest. Deze screen densities vind je hieronder in de tabel.

Van DP naar pixels?

Google werkt dus met dp (density-independent pixels) in plaats van pixels. Density-independent pixel is dus een virtuele pixel-eenheid. Maar hoeveel pixels is 1dp? Het antwoord op deze vraag is lastig te geven omdat het per apparaat kan verschillen. De dp is namelijk afhankelijk van de ppi van het toestel. En de ppi van een toestel is afhankelijk van de grootte en de resolutie van het scherm.

Om het voor ons makkelijker te maken heeft Google de verschillende Android-apparaten verdeeld in groepen op basis van hun schermgrootte en hier een minimale dp aan gekoppeld.

android-screen-ranges

Type DP
Small 426dp x 320dp
Normal 470dp x 320dp
Large 640dp x 480dp
XLarge 960dp x 720dp

Welke screen densities moet ik ondersteunen?

Dit hangt af van je doelgroep en budget. Als je weet dat je doelgroep geen high-end toestellen gebruikt, dan is het verstandig om ook de lagere screen densities te ondersteunen. Mocht dit niet belangrijk voor je zijn, dan kun je deze overslaan. Android zal alsnog je afbeeldingen omzetten naar de lagere densities en je app draaien op low-end toestellen. Probleem hiermee is wel dat je app er minder mooi uit zal zien wanneer je afbeeldingen omgezet worden.

Een uitgebreid lijst met verschillende toestellen en hun dpi’s kun je vinden op de volgende Wikipedia-pagina: List of displays by pixel density

Google heeft ook een ontwikkelaarspagina waar je een aantal interessante statistieken kunt bekijken. Hier kun je naast het marktaandeel van de verschillende Android-versies ook de meest voorkomende screen densities en schermgroottes vinden. Aan de hand van deze gegevens kun je zien dat de volgende combinaties het meeste voorkomende zijn:

Schermgrootte / Screen density
normal/mdpi (15.1%)
normal/hdpi (33.4%)
normal/xhdpi (22.2%)
small/ldpi (9.2%)
xlarge/mdpi (4.4%)
large/mdpi (3.6%)

Van iOS naar Android

Omdat elke app die ik ontwerp ook een iOS-versie heeft, ontwerp ik eerst voor iOS en zet ik deze om naar Android. Uiteraard hou ik daarbij wel rekening met de human interface guidelines van Android maar daar zal ik het nu niet over hebben. Ook het ontwerpen voor iOS laat ik nu achterwege omdat ik dit in een ander artikel zal behandelen.

Laten we de retina-versie van iOS als basis nemen en die omzetten naar Android. De resolutie die ik dan gebruik is 640×960 pixels. Voor Android moet mijn canvas dan als volgt ingesteld worden:

LDPI (120dpi) MDPI (160dpi) HDPI (240dpi) XHDPI (Retina) (320dpi) XXHDPI (480dpi) XXXHDPI (640dpi)
240 pixels 320 pixels 480 pixels 640 pixels 960 pixels 1280 pixels
360 pixels 480 pixels 720 pixels 960 pixels 1440 pixels 1920 pixels
0,75 x mdpi baseline 1,5 x mdpi 2 x mdpi 3 x mdpi 4 x mdpi

De Retina variant van Android is dus XHDPI met 320dpi en MDPI is gelijk aan de non-Retina versie. Mijn advies is om ook voor XXHDPI te ontwerpen omdat high-end toestellen met full-hd schermen rond deze dpi zitten (Galaxy S4 is 441dpi en HTC One is 468dpi). Een knop van 100 pixels breed op Retina zou dan de volgende formaten hebben op Android.

LDPI (120dpi) MDPI (160dpi) HDPI (240dpi) XHDPI (Retina) (320dpi) XXHDPI (480dpi) XXXHDPI (640dpi)
38 pixels 50 pixels 75 pixels 100 pixels 150 pixels 200 pixels
0,75 x mdpi baseline 1,5 x mdpi 2 x mdpi 3 x mdpi 4 x mdpi

Conclusie

Het is wel even wennen maar als je het eenmaal doorhebt is het ontwerpen van Android-apps niet zo moeilijk. Probeer voor elke screen density apart te ontwerpen en laat het schalen niet over aan Android omdat je dan betere resultaten bereikt.

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.