multi screen hell
DESCRIPTION
This presentation summarizes multiple screen development difficulties, optimizations for different kinds of devices and screen sizes and gives best practices to handle multi screen problems in Android.TRANSCRIPT
Multi Screen HellDevFest 2013, Ankara
/ Abdullah Cetin CAVDAR @accavdar
Why Hell?
ManufacturersAcerAsusHTCLGMotorolaSamsungSony...
Fragmentation
Device Types11.868 distinct Android devices
seen in 2013Open Signal Fragmentation Report 2013
Phones
Tablets
Laptops
TV
Set-Top-Box
Consoles
EverywhereInternet of Things (IoT)?
Behind the 'Internet of Things' Is Android and It's Everywhere
Size & Resolution2.8 in, 3.2 in, 3.5 in, 3.6 in, 3.7 in, 4.0 in, 4.3 in, 4.5 in, 4.7 in, 4.8 in, 5.0 in,
6.4 in, 7.0, 9.7 in, 10.1 in, ...
320x240 QVGA, 480x320 HVGA, 800x480 WVGA, 960x540 qHD,1280x768 WXGA, 1280x720 HD, 1920x1080 HD, ...
OrientationLandscape or Portrait?
Keep Calmand
Çare Drogba
SupportingMultiple Screens
Range of Screens Supportedsizes: small, normal, large, and xlargedensities: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)
Size and Density Group
Density-independent Pixel (dp)A virtual pixel unit that you should use when defining UI layout, to
express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a160 dpi screen (medium density)
Conversionpx = dp * (dpi / 160)
Ex: on a 240 dpi screen, 1 dp equals 1.5 physical pixels
Density IndependenceIt preserves the physical size of user interface elements when displayed
on screens with different densities
The system scales dp units as appropriate for the current screendensityThe system scales drawable resources to the appropriate size, basedon the current screen density, if necessary
Bad
Good
How to Support MultipleScreens?
Use <supports-screen>Explicitly declare in the manifest which screen sizes your application
supports
Provide different layouts fordifferent screen sizes
Provide size-specific resources: small, normal, large, and xlargeEx: layout-xlarge/
Use the sw<N>dp configuration qualifier to define the smallestavailable width (beginning API 13)
Ex: layout-sw600dp/ (at least 600dp screen width)
Provide different bitmapsBy default, Android scales drawables (.png, .jpg, .gif and .9.png files)Include alternative versions at different resolutions for differentscreen densitiesDensity-specific resources are ldpi (low), mdpi (medium), hdpi (high),and xhdpi (extra high)
Ex: drawable-hdpi/
Configuration QualifiersUsage: <resources_name>-<qualifier>
<resources_name> is the standard resource name (such as drawableor layout)<qualifier> is a configuration qualifier (such as hdpi or xlarge)
Layouts & Drawables
Alternative DrawablesYou only need to provide density-specific drawables (.png, .jpg, .gif or.9.png)Follow the 3:4:6:8 scaling ratio between the four generalized densities
36x36 for low-density48x48 for medium-density72x72 for high-density96x96 for extra high-density
See Icon Design Guideline
Relative Sizes
Tablet Layouts for Android 3.2Android 3.2 introduces a new way to specify resources for more discrete
screen sizes
New Size QualifierssmallestWidth: sw<N>dp
Ex: sw600dpAvailable screen width: w<N>dp
Ex: w1024dpAvailable screen height: h<N>dp
Ex: h720dp
Configuration Examples
Best Practises
1. Use wrap_content,match_parent, or the dp unit
for layout dimensionsUsing wrap_content, match_parent or dp units guarantees that the view
is given an appropriate size on the current device screen
PS: Use sp for font sizes
2. Do not use hard-coded pixelvalues in your application code
3. Use RelativeLayoutIt uses relative positioning to lay out its child views
For instance, you can specify that a button widget should appear "to theright of" a text widget
4. Use size and density-specificresources
PS: To avoid pre-scaling, put the resource in a resource directory withthe nodpi configuration qualifier
5. Use Nine-patch BitmapsThey are specially formatted PNG files that indicate which areas can and
cannot be stretched
Tablets&
Handsets
Basic Guideline
1. Build your activity designsbased on Fragments
FragmentIntroduced in Android 3.0 (API Level 11)It allows you to separate distinct behavioral components of your UIinto separate partsProvides modular UI developmentPS: Use Android to use fragments in older Androidversions
Support Libraries
Multiple Fragments, MultipleActivities
Handsetsres/layout/main.xml
Tabletsres/layout-large/main.xml
PS: You should also use the new minimum width size qualifiers in orderto more precisely control the screen size
How does it work?If Fragment B is in the layout, Activity A notifies Fragment B to updateitselfIf Fragment B is not in the layout, Activity A starts Activity B (whichhosts Fragment B)Important Note: Define a callback interface in each fragment class tocommunicate with host activity
2. Use the Action BarThe action bar is a window feature that Action Baridentifies the user
location, and Action Barprovides user actions and Action Barnavigationmodes
Introduced in Android 3.0 (API Level 11). However, you can use t usingAndroid Support Libraries
Why Action Bar?Android system does all the work to gracefully adapt the action bar for
different screen sizes
Tips for creating Action Bar
1. Avoid using the always valueForcing too many action items into the action bar can create acluttered UIAction items may overlap with other action bar elements such as thetitle or navigation itemsUse ifRoom for the android:showAsAction attribute
2. Provide an IconAlways provide an icon for the action itemsUse showAsAction="ifRoom|withText"
3. Provide a TitleAlways provide a titleUsers view the title as a tooltip on long-clickIt is critical for accessibility: Screen readers read aloud the item titleeven when not visisble
4. Avoid using customnavigation modes when
possibleUse the built-in tab and drop-down navigation modes when possibleSystem can adapt their presentation to different screen sizesautomatically
Ex: stacked action bar in handsets
Split Action BarAvailable in Android 4.0 (API level 14) and higherAdd uiOptions="splitActionBarWhenNarrow" to your <activity> or<application> manifest elementCall setDisplayShowHomeEnabled(false) to disable the applicationicon in the action bar
Testing
Use Emulator with differentconfigs
emulator -avd <avd_name> -scale 96dpi
Android StudioBuilt in device previews (landscape and portrait modes)
CompatibilityMost important characteristic of a compatible device is the ability to
install and correctly run an Android .apk file
Apps Availability<uses-feature> in manifest file
<uses-feature android:name="android.hardware.bluetooth" />
<uses-feature android:name="android.hardware.camera" />
The other filters for apps availability in Google Play:
<supports-gl-texture><uses-configuration><uses-library><uses-permission><uses-sdk>
Package ManagerCheck feature availabilities at runtime
PackageManager packageManager = this.getPackageManager();
if (packageManager.hasSystemFeature(PackageManager.FEATURE_NFC)) {
Log.d(TAG, "Oh yeah, NFC is available. :)");
} else {
Log.d(TAG, "Shit, no NFC. :(");
}
Business ReasonsList the countries an app is available inSelect which carrier’s users are able to access the app
Slideshttp://github.com/accavdar/MultiScreenHell
Questions?
THE ENDby Abdullah Cetin CAVDAR / @accavdar