bust the android fragmentation myth
DESCRIPTION
Designers and developers have been afraid of the variety of Android flavors for way too long. Android borrows a lot of concept from the web, and we can use the same techniques to cater to the different OS versions and form factors. Be responsive. Forget about absolute coordinates. Embrace the relative, use resource folders to differentiate among screen sizes, much like CSS media queries. Be progressive. Take advantage of the latest Android functionalities, but gracefully fall back to the basics when you are on older OS versions. Remember the days when not all browsers have javascript?TRANSCRIPT
Bust the Android Fragmentation Myth
Chiu-Ki Chan@chiuki
@chiuki@chiuki
So many devices!
@chiuki@chiuki
Infinite screen sizes!
@chiuki@chiuki
Responsive+
Progressive
Hello World
@chiuki
@chiuki
@chiuki
@chiuki
@chiuki
@chiuki
@chiuki
Declarative Layout
@chiuki
@chiuki
@chiuki
(x,y)
@chiuki
(x,y)
@chiuki
Center
@chiuki@chiuki
Center<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/start" />
@chiuki
@chiuki@chiuki
Proportional Layout<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/image1" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <ImageView android:id="@+id/image2" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /></LinearLayout>
@chiuki
@chiuki
Divider
@chiuki@chiuki
Divider<LinearLayout> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@android:color/black" /> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /></LinearLayout>
@chiuki@chiuki
Divider<LinearLayout> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@android:color/black" /> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /></LinearLayout>
@chiuki
dp
@chiuki
dpDensity-independent pixel
@chiuki
@chiuki
@chiuki@chiuki
res/layout-land<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <ImageView android:id="@+id/image1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <ImageView android:id="@+id/image2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /></LinearLayout>
@chiuki
Resource Folders
@chiuki@chiuki
Resource Folders
Type Variation
layoutvalues
drawablemenu
Language & Region: en, fr, fr-rCAScreen size: small, large, xlargeScreen orientation: port, landScreen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpiPlatform version: v4, v11, v14UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
@chiuki@chiuki
Resource Folders
Type Variation
layoutvalues
drawablemenu
Language & Region: en, fr, fr-rCAScreen size: small, large, xlargeScreen orientation: port, landScreen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpiPlatform version: v4, v11, v14UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
res/layout-land/activity_main.xml
@chiuki@chiuki
Resource Folders
Type Variation
layoutvalues
drawablemenu
Language & Region: en, fr, fr-rCAScreen size: small, large, xlargeScreen orientation: port, landScreen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpiPlatform version: v4, v11, v14UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
res/drawable-hdpi/ic_launcher.png
@chiuki@chiuki
Resource Folders
Type Variation
layoutvalues
drawablemenu
Language & Region: en, fr, fr-rCAScreen size: small, large, xlargeScreen orientation: port, landScreen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpiPlatform version: v4, v11, v14UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
res/drawable-large-land/splash.png
@chiuki
res/drawable-large-land/splash.png
@chiuki
res/drawable/splash.xml
@chiuki
res/drawable/splash.xml
XML drawable
@chiuki@chiuki
XML shape
<shape android:shape="rectangle" > <gradient android:startColor="#063" android:endColor="#030" android:angle="270" /></shape>
@chiuki@chiuki
Gradient
@chiuki@chiuki
Gradient
@chiuki@chiuki
Pattern
@chiuki@chiuki
Tiles
@chiuki@chiuki
Tiles
@chiuki@chiuki
Tiling background<bitmap android:src="@drawable/tile" android:tileMode="repeat" android:dither="true" />
res/drawable/background.xml
@chiuki@chiuki
Tiling background<bitmap android:src="@drawable/tile" android:tileMode="repeat" android:dither="true" />
res/drawable/background.xml
tile.png
@chiuki@chiuki
Tiling background<bitmap android:src="@drawable/tile" android:tileMode="repeat" android:dither="true" />
res/drawable/background.xml
<View android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" />
res/layout/activity_main.xml
@chiuki@chiuki
Tile mode
clampReplicates the edge color
repeatRepeats the bitmap in both direction
mirrorRepeats with alternating mirror images
@chiuki@chiuki
GridView
@chiuki@chiuki
Auto fit columns<GridView android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="auto_fit" android:columnWidth="@dimen/workbook_column_width" android:padding="@dimen/workbook_padding" android:horizontalSpacing="@dimen/workbook_spacing" android:verticalSpacing="@dimen/workbook_spacing" android:scrollbarStyle="outsideOverlay" />
@chiuki@chiuki
Auto fit columns<GridView android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="auto_fit" android:columnWidth="@dimen/workbook_column_width" android:padding="@dimen/workbook_padding" android:horizontalSpacing="@dimen/workbook_spacing" android:verticalSpacing="@dimen/workbook_spacing" android:scrollbarStyle="outsideOverlay" />
@chiuki@chiuki
Auto fit columns<GridView android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="auto_fit" android:columnWidth="@dimen/workbook_column_width" android:padding="@dimen/workbook_padding" android:horizontalSpacing="@dimen/workbook_spacing" android:verticalSpacing="@dimen/workbook_spacing" android:scrollbarStyle="outsideOverlay" />
@chiuki@chiuki
dimen<resources> <dimen name="workbook_padding">8dp</dimen> <dimen name="workbook_spacing">12dp</dimen> <dimen name="workbook_column_width">120dp</dimen><resources>
res/values/dimens.xml
<resources> <dimen name="workbook_padding">32dp</dimen> <dimen name="workbook_spacing">18dp</dimen> <dimen name="workbook_column_width">180dp</dimen><resources>
res/values-large/dimens.xml
@chiuki@chiuki
7-inch
@chiuki@chiuki
Phone
Progressive
@chiuki@chiuki
Resource Folders
Type Variation
layoutvalues
drawablemenu
Language & Region: en, fr, fr-rCAScreen size: small, large, xlargeScreen orientation: port, landScreen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpiPlatform version: v4, v11, v14UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
@chiuki@chiuki
Resource Folders
Type Variation
layoutvalues
drawablemenu
Language & Region: en, fr, fr-rCAScreen size: small, large, xlargeScreen orientation: port, landScreen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpiPlatform version: v4, v11, v14UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
@chiuki@chiuki
Toggle button
@chiuki@chiuki
layout-v14
<ToggleButton android:layout_width="wrap_content" android:layout_height="wrap_content" />
res/layout/compound_button.xml
<Switch android:layout_width="wrap_content" android:layout_height="wrap_content" />
res/layout-v14/compound_button.xml
@chiuki@chiuki
Include<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <include android:id="@+id/turbo" layout="@layout/compound_button" /> <include android:id="@+id/reset" layout="@layout/compound_button" /></LinearLayout>
@chiuki@chiuki
Cast to superclassCompoundButton turbo = (CompoundButton) findViewById(R.id.turbo);if (!turbo.isChecked()) { // Slow down the computer}
@chiuki@chiuki
API level
@chiuki@chiuki
Detect API level
android.os.Build.VERSION.SDKString, available from API level 1
android.os.Build.VERSION.SDK_INTint, available from API level 4
@chiuki@chiuki
Progressive
// Default valueint heapSize = 16;
// Detect OS versionint sdk = Integer.parseInt(Build.VERSION.SDK);
// Progressive enhancement for newer devicesif (sdk >= Build.VERSION_CODES_ECLAIR) { // Static helper for API level 4 and below heapSize = HeapSizeGetter.getHeapSize(this);}
@chiuki@chiuki
Static helperpublic abstract class HeapSizeGetter { public static int getHeapSize(Context context) { ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE); return activityManager.getMemoryClass(); }}
@chiuki@chiuki
Progressive
// Default valueint heapSize = 16;
// Detect OS versionint sdk = Integer.parseInt(Build.VERSION.SDK);
// Progressive enhancement for newer devicesif (sdk >= Build.VERSION_CODES_ECLAIR) { // Static helper for API level 4 and below heapSize = HeapSizeGetter.getHeapSize(this);}
@chiuki@chiuki
Support libraries
Ship new functionality with your app!
@chiuki
Official Support Library
Fragment
TaskStackBuilder
LruCache
ViewPager
DrawerLayoutSlidingPaneLayout
Loader
@chiuki
Community Support Libraries
• Action Bar Sherlock
• View Pager Indicator
• Nine Old Android
• Holo Everywhere
@chiuki@chiuki
View Pager Indicator
Summary
@chiuki@chiuki
SummaryResponsive layoutDeclarative layoutDensity-independent pixels (dp)Resource foldersXML drawables
Progressive functionalityResource foldersVersion checkSupport libraries
@chiuki@chiuki
Thank you!
Learn morehttp://pluralsight.com/courses/android-layout-fundamentalshttp://is.gd/FluidAndroidLayoutshttp://is.gd/BeautifulAndroid
Stay in touchhttp://eepurl.com/lR5uDhttp://blog.sqisland.comhttp://twitter.com/chiuki