Designing for Tablet - Patterns and Best Practices
1 like1,239 views
Mario Viviani, a technology evangelist at Amazon Appstore UK, discusses optimizing app UI for Fire Tablets and highlights the popularity of their low-cost devices. He outlines key features of the 'Voice Notepad Pro' app and delves into screen density and size qualifications necessary for Android development. The document emphasizes strategies for resource management and app optimization on various Fire tablet models.
Designing for Tablet - Patterns and Best Practices
- 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
- 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
- 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
- 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