Optimise Your App UI for Amazon Fire Tablets

We’ll deep dive into understanding screen resolution and density of Android Devices, in particular the new line of Fire tablets, disclose 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.

Transcript

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 BLACKBERRY FIRE 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 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 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 xhdpi mdpi 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 sw800dp sw800dp 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