designing for tablet - patterns and best practices
TRANSCRIPT
MAR IO V IV IAN IT 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
@mariux theone http://www. l inke d in .com/ in/ mar iov iv ian i
OPT IM I S ING APPS U I
FOR F IRE TABLETS
IT ’S A -ME!
Mar io V iv ian i
Technology Evangelist, Amazon Appstore UK
@mariuxtheone
Android Developer from 201095+ apps published12.000.000+ downloadsGoogle Developer Expert 2013-15Startup Founder, Co-WorkerSpeaker at: Droidcon, Android Dev Days, Google I/O 2015
ANDROID PHONES & TABLETS
FIRE TV & FIRE TV STICK
BLACKBERRYFIRE TABLETS
FIRE TABLET 7’’
J e f f B e z o s
A m a zo n Q 3 Ea r n i n g s , O c t 2 0 1 5
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
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
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
TO PUSH THE BOUNDARIES, YOU NEED TO KNOW WHERE THE EDGES ARE.
M a r k B o u l t o n
D e s i g n e r
U S E A F L E X I B L E L AY O U T
ConstraintLayout
RelativeLayout
FrameLayout
GridLayout
Fragments
UNDERSTANDING
SCREEN DENSITY
PIXELS
RGB
DOTS PER INCH
FIRE HD 8 FIRE HD 10
1280 X 800 PX
FIRE HD 8 FIRE HD 10
1’’
189 DPI 149 DPI
density–independent
pixels
dp (or dip)
dpVIRTUAL PIXELS
MAINTAIN SCALING
OF UI COMPONENTS
MEDIUM DENSITY
DISPLAY (160 DPI)HIGH DENSITY
DISPLAY (240dpi)
1dp
1dp
1dp
1dp
160
DPI
320
DPI
1 dp
1 dp
1 px
1 px
1 dp
2 px
2 px
1 dp
px = dp * (DPI/160)
2 = 1 * (320/160)
px = dp * (DPI/160)
USING
QUALIFIERS
SCREEN DENSITY QUALIF IERS
ldpi mdpi hdpi xhdpimdpi hdpi
FIRE 7’’
FIRE HD 10
FIRE HD 8
( tvdpi )
GENERAL SCREEN S IZE QUALIF IERS
small normal large xlarge
2’’ 4’’ 7’’ 10’’
FIRE 7’’
FIRE HD 8FIRE HD 10
DENSITY, SCREEN SIZE…
WHAT’S THE
BEST SOLUTION?
SMALLEST SCREEN WIDTH QUALIF IERS
Width of the
smallest side
in dp units
SMALLEST SCREEN WIDTH QUALIF IERS
sw800dpsw800dpsmallest
width
width of
smallest side
in dp units
HOW TO CALCULATE SMALLEST SCREEN WIDTH
FIRE HD 10
1280x800 px
149 DPI
? dp
HOW TO CALCULATE SMALLEST SCREEN WIDTH
px = dp * (DPI/160)
HOW TO CALCULATE SMALLEST SCREEN WIDTH
800= dp * (149/160)
dp = 800 / 0.93
= 860.21
sw800dp
SMALLEST SCREEN W IDTH QUAL IF I ERS – F IRE TABLETS
sw600dp sw800dp
FIRE 7’’
FIRE HD 8
FIRE HD 10
FULLY SUPPORT
FIRE TABLETS
COMBINE D IFFERENT STRATEGIES
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)
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"/>
OPTIMIZE YOUR ICON
Fire HD 8
hdpi
xhdpi
Fire 7’’
Fire HD 10
TOOLS TO HELP YOU
MAKE GREAT APP ICONS
OPTIMIZE YOUR ICON
bit.ly/MakeGreatIcons
bit.ly/LauncherIconGuidelines
FIRE OS LAUNCHER ICONS
GUIDELINES
THANK YOU!
Mario Viviani@mariuxtheone
@AmazonAppDev
developer.amazon.com/appstore bit.ly/AmazonSummitFeedback