Designing for Multiple Screen Sizes and Aspect Ratios on Android

Post on 31-Aug-2014

252 views 3 download

Tags:

description

From our meetup presentation - http://www.meetup.com/Kansas-City-Mobile-App-Developers-Group/events/56754822/- Number of Android devices out there with different resolutions and pixel densities, screen sizes, and aspect ratios.- Understanding Android layouts- Writing adaptive layouts to handle any resolution, future proofing it as much as possible.

Transcript of Designing for Multiple Screen Sizes and Aspect Ratios on Android

DESIGNING FORANDROID

A WINNING STRATEGY

A WINNING STRATEGY

KUNJANSHAH

PRESENTEDBY

ASHOKAMARAN

ORGANIZEDBY

DESIGNING FORANDROID

DISCLAIMER

I ❤ ANDROID

[ REGARDLESS OF WHAT YOU SEE IN THE FOLLOWING SLIDES ]

ANDROID LAYOUTS

ISSUES

MULTIPLESCREEN SIZES

MULTIPLEASPECT RATIOS

MULTIPLESCREEN DENSITIES

MULTIPLEANDROID VERSIONS

MULTIPLEDEVICES

?

NUMBER OF ANDROID DEVICES

TAKE A WILD GUESS.

NUMBER OF ANDROID DEVICES

NOT EVEN KIDDING.

1135

PHYSICAL SCREEN SIZES

TOSHIBA HAS A 13” ANDROID TABLET. NO, REALLY.

2 TO 5.3 INCH FOR PHONES

7 TO 13 INCH FOR TABLETS

SCREEN SIZES

SOME WON’T FIT IN YOUR HAND.

PHONES TABLETS

2.55 3.6 72.6 3.7 7.92.8 4 8

3 4.2 9.73.1 4.27 10.1

3.14 4.3 133.2 4.53.3 4.653.4 4.83.5 5.3

SCREEN RESOLUTIONS

I PROBABLY MISSED SOME.

PHONES 480 X 800 800 X 600240 X 320 480 X 854 1024 X 600240 X 400 540 X 960 1024 X 768240 X 432 640 X 960 1280 X 720240 X 640 1280 X 800 1280 X 800320 X 480 1600 X 900340 X 480 TABLETS360 X 640 480 X 800480 X 640 480 X 854

ASPECT RATIOS

STUFF WILL GET SQUASHED!

1.33 1.60 1.771.41 1.66 1.801.50 1.70 2.66

ANDROID VERSIONS

OUR SUGARY OVERLORDS.

1.5 2.2 2.3.3 3.1 4.0.21.6 2.3 2.3.7 3.2 4.0.32.1 2.3.2 3.0 4.0

SCREEN DENSITIES

NEXT UP: XXHDPI

LDPI MDPI HDPI XHDPI

COPING

IT HELPS TO TALK TO YOUR PSYCHIATRIST AS WELL.

18SCREEN

SIZES

9ASPECT RATIOS

4SCREEN

DENSITIES

14ANDROID

VERSIONS

1135ANDROID DEVICES

1

2

3N

WRITE LAYOUT

TESTDEVICE N

TESTDEVICE 1

BUILDAPK

N+1

TESTDEVICE N+1

HOW TO WIN

RE

LETS GO WIN !SMART DESIGN SMART XML SMART IGNORING

STRATEGIES

Design XML that will work on wide variety of Android devices, various techniques follow.

Ignore old Android versions,. Ignore devices that have less market share. Smartly ignore devices based on business needs and app focus.

Design your UI/UX in a way that will translate to multiple layouts. Design like the web, responsive.

UI widgets on Android have different colors, gradients and backgrounds on different versions, and manufacturers.

UI CONSIDERATIONS

SMART DESIGN

WYSIWYDG

4”2.3

4”4.0

3.7”2.0

4.3”2.3.4

ASOP

ASOP

ASOP

HTC

UI widgets on Android have different colors, gradients and backgrounds on different versions, and manufacturers.

MULTIPLE RESOURCES

SMART DESIGN

HIRE MORE PHOTOSHOP MONKEYS.

WRITE IT LIKE HTML

SMART XML

WYSIWYDG

BACK TO 1999

SMART XML

YOU DON’T NEED A TIME MACHINE.

IT STILL WORKS!

OKAY-ISH.

SMART IGNORING

IGNORANCE IS BLISS.

IGNORE DEVICES WITH LOW MARKET SHARE.

IGNORE OLDER ANDROID VERSIONS WITH LOW MARKET SHARE.

IGNORE ANDROID VERSIONS RUSHED TO MARKET.

1.5 1.6 2.1 2.2 2.3-2 2.3.3-7 3.0 3.1 3.2 4.0/4.0.2 4.0.3

2.40.52.210.1

63.2

0.5

23.1

60.70.3

SMART IGNORING

IGNORANCE IS BLISS.

SMART IGNORING

(YOU DON’T WANT CRAPPY PICTURES TAKEN BY YOUR APP ANYWAYS.)

IGNORE DEVICES/ANDROID VERSIONS OUTSIDE YOUR APP FOCUS.

AN APP WITH FOCUS ON PICTURES CAN IGNORE DEVICES WITH

CRAPPY CAMERAS.

IF ALL ELSE FAILS...

YOU DON’T WANT TO BE HERE.

WRITE SEPARATE LAYOUT XML FILES FOR SPECIFIC DEVICES.

USE SVG FOR GRAPHICS ASSETS.

DONT CARE MODE.

FACEBOOKWWW.FACEBOOK.COM/QUARKSTUDIOS

TWITTERWWW.TWITTER.COM/QUARKSTUDIOS

GET IN TOUCH WITH US

WWWQUARK STUDIOSWWW.QUARKSTUDIOS.COM

WWW JMA ITWWW.JMAIT.COM

THANK YOUFOR YOUR ATTENTION.

WWW.QUARKSTUDIOS.COM

QUARK STUDIOS & JMA-IT

SECURING APPSFOR THE GOVERNMENT & ENTERPRISE

RSVP TODAY!

NEXT...