In this talk we’ll deep dive into understanding screen resolution and density of Android Devices, in particular the Fire tablets family, share the best strategies to properly create and size the layouts and graphical resources of your app, teach you how to provide a correctly-size app icon for Fire OS 5, and how to explicitly declare support for Fire tablets in your Android app manifest

1. MARIO VIVIANI
T E C H N O L O G Y E V A N G E L I S T, A M A Z O N A P P S T O R E U K
@mariuxtheone http://www.linkedin.com/in/marioviviani
OPTIMISING APPS UI
FOR FIRE TABLETS

2. IT’S A-ME!
Mario Viviani
Technology Evangelist, Amazon Appstore UK
@mariuxtheone
Android Developer from 2010
95+ apps published
12.000.000+ downloads
Google Developer Expert 2013-15
Startup Founder, Co-Worker
Speaker at: Droidcon, Android Dev
Days, Google I/O 2015

3. ANDROID PHONES & TABLETS
FIRE TV & FIRE TV STICK
BLACKBERRYFIRE TABLETS

4. FIRE TABLET 7’’
J e f f B e zo s
Amazon Q3 Earnings, Oct 2015
FIRE SETS A NEW BAR FOR WHAT
CUSTOMERS SHOULD EXPECT FROM A
LOW-COST TABLET.
THIS IS ONE MORE STEP IN OUR
MISSION TO BRING CUSTOMERS
PREMIUM PRODUCTS AT
NON-PREMIUM PRICES.
#1 SELLING CONSUMER ELECTRONIC
DEVICE ON AMAZON.COM

5. VOICE NOTEPAD PRO (2010)
Voice Recognition
M A I N F E AT U R E S
Dictate your Notes
Internal Database
Save, Retrieve, Delete Notes
Easy, User-Friendly Interface

6. VOICE NOTEPAD PRO DOWNLOADS
0
50
100
150
200
250
300
350
400
450
2010 2011 2012 2013 2014 2015 2016
Downloads
Android 4.0
Announced
Material Design
Announced

7. TO PUSH THE BOUNDARIES,
YOU NEED TO KNOW WHERE
THE EDGES ARE.
Mark Boulton
Designer

8. U S E A F L E X I B L E L AY O U T
ConstraintLayout
RelativeLayout
FrameLayout
GridLayout
Fragments

9. UNDERSTANDING
SCREEN DENSITY

10. PIXELS
RGB

11. DOTS PER INCH

12. FIRE HD 8 FIRE HD 10
1280 X 800 PX

13. FIRE HD 8 FIRE HD 10
1’’
189 DPI 149 DPI

14. density–independent
pixels
dp (or dip)

15. dp
VIRTUAL PIXELS
MAINTAIN SCALING
OF UI COMPONENTS
MEDIUM DENSITY
DISPLAY (160 DPI)
HIGH DENSITY
DISPLAY (240dpi)
1dp
1dp
1dp
1dp

16. 160
DPI
320
DPI
1 dp
1 dp
1 px
1 px
1 dp
2 px
2 px
1 dp

17. px = dp * (DPI/160)

18. 2 = 1 * (320/160)
px = dp * (DPI/160)

19. USING
QUALIFIERS

20. SCREEN DENSITY QUALIFIERS
ldpi mdpi hdpi xhdpimdpi hdpi
FIRE 7’’
FIRE HD 10
FIRE HD 8
(tvdpi)

21. GENERAL SCREEN SIZE QUALIFIERS
small normal large xlarge
2’’ 4’’ 7’’ 10’’
FIRE 7’’
FIRE HD 8
FIRE HD 10

22. DENSITY, SCREEN SIZE…
WHAT’S THE
BEST SOLUTION?

23. SMALLEST SCREEN WIDTH QUALIFIERS
Width of the
smallest side
in dp units

24. SMALLEST SCREEN WIDTH QUALIFIERS
sw800dpsw800dp
smallest
width
width of
smallest side
in dp units

25. HOW TO CALCULATE SMALLEST SCREEN WIDTH
FIRE HD 10
1280x800 px
149 DPI
? dp

26. HOW TO CALCULATE SMALLEST SCREEN WIDTH
px = dp * (DPI/160)

27. HOW TO CALCULATE SMALLEST SCREEN WIDTH
800= dp * (149/160)
dp = 800 / 0.93
= 860.21
sw800dp

28. SMALLEST SCREEN WIDTH QUALIFIERS – FIRE TABLETS
sw600dp sw800dp
FIRE 7’’
FIRE HD 8
FIRE HD 10

29. FULLY SUPPORT
FIRE TABLETS

30. COMBINE DIFFERENT STRATEGIES

31. GRAPHICAL ASSETS
res/drawable-hdpi (Fire HD 8)
res/drawable-mdpi (Fire and Fire HD 10)
RESOURCE FOLDERS
LAYOUT FOLDERS
res/layout-sw600dp (Fire and Fire HD 8)
res/layout-sw800dp (Fire HD 10)

32. D E C L A R E S U P P O RT F O R TA B L E T S
I N A N D R O I D M A N I F E S T
<supports-screens
android:smallScreens="false"
android:normalScreens="false"
android:largeScreens="true"
android:xlargeScreens="true"
android:requiresSmallestWidthDp="600"/>

33. OPTIMIZE YOUR ICON
Fire HD 8
hdpi
xhdpi
Fire 7’’
Fire HD 10

34. TOOLS TO HELP YOU
MAKE GREAT APP ICONS
OPTIMIZE YOUR ICON
bit.ly/MakeGreatIcons
bit.ly/LauncherIconGuidelines
FIRE OS LAUNCHER ICONS
GUIDELINES

35. THANK YOU!
Mario Viviani
@mariuxtheone
@AmazonAppDev
vivianim@amazon.co.uk
developer.amazon.com/appstore bit.ly/AmazonSummitFeedback