Android is everywhere. Developers can now build apps that run on phones, tablets, TVs, cars, wearables, and even appliances! While this provides a breadth of opportunity, it creates a big problem when designing apps that can run across all of these different device types. In this session, join Michael Stonis to talk about how to create and manage dynamic UIs for Xamarin Android apps that look and feel great across different screen sizes and form factors. Presentation Video: http://youtu.be/2k2SMiH37eg

1. Designing Android UIs
for the Ever Changing
Device Landscape
Michael Stonis
Eight-Bot, Inc.
@michaelstonis

3. Unique Android Devices
20,000
16,667
13,333
10,000
6,667
3,333
0
2012 2013 2014
Open Signal, August 2014

4. Subtitle

5. Big Opportunity
Where do we get started?

6. Big Opportunity
Where do we get started?
■ Design Fundamentals

7. Big Opportunity
Where do we get started?
■ Design Fundamentals

8. Big Opportunity
Where do we get started?
■ Design Fundamentals
■ Layout Management

9. Big Opportunity
Where do we get started?
■ Design Fundamentals
■ Layout Management

10. Big Opportunity
Where do we get started?
■ Design Fundamentals
■ Layout Management
■ Android Fragments

11. Design Fundamentals

12. The Big Three
Screen Size Orientation Pixel Density

13. The Big Three
Screen Size Orientation Pixel Density

14. The Big Three
Screen Size Orientation Pixel Density

15. The Big Three
Screen Size Orientation Pixel Density

16. Density Independent
Pixels

21. Density Independent Pixel (DIP)
■ Represents a single pixel on a 160 dpi screen
■ Scales on screens with higher or lower density
■ Use as a standard unit of measurement for
layouts and drawables
■ Avoid Using Pixels Like the Plague!
DPI Pixels Per DIP
160
320

22. BAD GOOD

23. Density Independent Pixel
160 dpi
MDPI
1x
320 dpi
XHDPI
2x
480 dpi
XXHDPI
3x

24. Density Independent Pixel
160 dpi
MDPI
1x
320 dpi
XHDPI
2x
480 dpi
XXHDPI
3x

25. Density Independent Pixel
160 dpi
MDPI
1x
320 dpi
XHDPI
2x
480 dpi
XXHDPI
3x

26. Density
Independent
Pixels

27. Pixels Density
Independent
Pixels

28. Pixels Density
Independent
Pixels

29. Density Independent Pixels
Nexus 5
1920 x 1080 px

30. Density Independent Pixels
Nexus 5
1920 x 1080 px
445 dpi

31. Density Independent Pixels
Nexus 5
1920 x 1080 px
445 dpi
1 inch
445 pixels

32. Calculating DIPs
Resolution (px) x 160
DIP = dpi

33. Density Independent Pixels
Nexus 5
1920 x 1080 px
445 dpi
690 x 388 dp
1920 px X 160
690 Vertical = 445 dpi
1080 px X 160
388 Horizontal = 445 dpi

34. Density Independent Pixels
Nexus 5
1920 x 1080 px
445 dpi
690 x 388 dp
1920 px X 160
690 Vertical = 445 dpi
1080 px X 160
388 Horizontal = 445 dpi

35. Density Independent Pixels
Nexus 5
1920 x 1080 px
445 dpi
690 x 388 dp
1920 px X 160
690 Vertical = 445 dpi
1080 px X 160
388 Horizontal = 445 dpi

36. Density Independent Pixel
160 dpi
MDPI
1x
240 dpi
HDPI
1.5x
320 dpi
XHDPI
2x
480 dpi
XXHDPI
3x

37. Density Independent Pixels
1920 px X 160
640 Vertical = 480 dpi
1080 px X 160
360 Horizontal = 480 dpi
Nexus 5
1920 x 1080 px
445 dpi
640 x 360 dp

38. Device Comparison
Nexus 5
1920 x 1080 px
445 dpi
640 x 360 dp
Nexus 4
1280 x 768 px
318 dpi
640 x 384 dp

39. Device Comparison
Nexus 5
1920 x 1080 px
445 dpi
640 x 360 dp
Nexus 4
1280 x 768 px
318 dpi
640 x 384 dp

40. Device Comparison
Nexus 4
1280 x 768 px
318 dpi
640 x 384 dp
Nexus 5
1920 x 1080 px
445 dpi
640 x 360 dp

44. Scale Independent Pixels (SIP)
Scaling for Fonts
■ Use this when specifying sizes for fonts
■ Will scale depending on the device’s pixel density
similar to a DIP
■ Scales appropriately to the user’s font size
preferences

45. Android Resource
Qualifiers

46. Android Resource Qualifiers
Different Strokes for Different Folks
• Provides us the ability to use different
resources for different configurations
• Qualifiers Apply to Resource Folders
■ drawable
■ layout
■ etc.
• Do not apply to resources directly

47. Android Resource Qualifiers
Qualifier Format
<resource type>-<qualifier>

48. Android Resource Qualifiers
Example
layout-land
A layout resource in landscape orientation

49. Android Resource Qualifiers
Example
drawable-large-xhdpi
A drawable resource on a large screen size with an Extra-high-density screen

50. Android Resource Qualifiers
Resource Qualifier Types
• Region & Language
■ Mobile Country Code (MCC)
■ Language and Language Region
• Device Configuration
■ Portrait
■ Landscape
• Device Size Resolution
■ Screen Size
■ Pixel Density
• Device Features
■ UI Mode
■ Hardware Software Keyboard

51. Android Resource Qualifiers
bit.ly/1toKVDF

52. Android Resource Qualifiers
Different Strokes for Different Folks
• Provides us the ability to use different
resources for different configurations
• Qualifiers Apply to Resource Folders
■ drawable
■ layout
■ etc.
• Do not apply to resources directly

53. Density Independent Pixel
160 dpi
MDPI
1x
240 dpi
HDPI
1.5x
480 dpi
XXHDPI
3x
?

54. Density Independent Pixel
160 dpi
MDPI
1x
240 dpi
HDPI
1.5x
480 dpi
XXHDPI
3x
?

55. Layout Management

56. Layout Management
Xamarin Android Designer
• Full WYSIWYG Editor for Android
■ Control Management
■ Document Explorer
■ XML Editor
• Layouts are standard Android
• Supports Editing Multiple Layouts

57. Layout Management
Multiple Layouts

58. Demo

59. Layout Management
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:versionCode="1" android:versionName="1.0"
package="com.xamarin.university.mobilenav.android">
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="14" />
<application android:icon="@drawable/ic_launcher" android:label="ActionBar Tabs">
</application>
<supports-screens android:compatibleWidthLimitDp="integer"/>
</manifest>

60. Fragments

64. Android Fragments
Application Building Blocks
• Reusable User-Interface components
• Conceptually similar to an Activity with
its own lifecycle and layout
• Create in XML or programmatically

65. Android Fragment Creation
public class FragmentToAdd : Fragment
{
public override void OnCreate (Bundle savedInstanceState)
{
}
public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState)
{
}
public override void OnPause ()
{
}
}

66. Android Fragment Key Lifecycle Methods
public class FragmentToAdd : Fragment
{
public override void OnCreate (Bundle savedInstanceState)
{
}
public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState)
{
}
public override void OnPause ()
{
}
}

67. 12:00
12:00
12:00
Dialog List Preferences

68. 12:00
12:00
12:00
Dialog List Preferences

69. 12:00
12:00
12:00
Dialog List Preferences

70. 12:00
12:00
12:00
Dialog List Preferences

71. Adding a Fragment

72. 12:00

73. 12:00

74. 12:00

75. Adding Android Fragments via XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<fragment
class="fragments.NavigationFragment"
android:id="@+id/navigation"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>

76. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

77. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

78. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

79. Fragment Manager
■ Provides Fragment Discovery
- FindFragmentById and FindFragmentByTag
■ Manage Fragment Navigation History
■ Creation of Transactions

80. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

81. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

82. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

83. Fragment Transactions
■ Facilitates one-to-many fragment changes
■ Conceptually similar to database transactions
■ Can Create, Replace and Remove Fragments

84. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

85. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

86. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

87. Adding Android Fragments via Code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/container"
android:layout_weight="1" />

88. Adding Android Fragments via Code
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.Add(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

89. 12:00

90. 12:00

91. 12:00

92. 12:00

93. 12:00

94. 12:00

95. Replacing Android Fragments
using (var transaction = FragmentManager.BeginTransaction())
{
transaction.SetCustomAnimations(
Android.Resource.Animator.FadeIn,
Android.Resource.Animator.FadeOut);
transaction.Replace(Resource.Id.container, new FragmentToAdd());
transaction.Commit();
}

96. Communicating with
Fragments

97. Build for Modularity
Think like Building Blocks
• Assume that the Activity knows nothing
about your Fragment and vice-versa
• Build knowing that it will be reused and
used in varying different contexts
•Make it easy for your Fragment to
discover host Activity Functionality

98. Providing Data to a Fragment
var fragmentToAdd = new FragmentToAdd {
Arguments = new Bundle ()
};
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorRed, backgroundColor.R);
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorGreen, backgroundColor.G);
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorBlue, backgroundColor.B);

99. Guaranteeing Fragment Receives Data
public static FragmentToAdd BuildFragmentToAdd (Color backgroundColor)
{
var fragmentToAdd = new FragmentToAdd {
Arguments = new Bundle ()
} ;
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorRed, backgroundColor.R);
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorGreen, backgroundColor.G);
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorBlue, backgroundColor.B);
return fragmentToAdd;
}

100. Guaranteeing Fragment Receives Data
public static FragmentToAdd BuildFragmentToAdd (Color backgroundColor)
{
var fragmentToAdd = new FragmentToAdd {
Arguments = new Bundle ()
} ;
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorRed, backgroundColor.R);
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorGreen, backgroundColor.G);
fragmentToAdd.Arguments.PutInt (ArgumentBackgroundColorBlue, backgroundColor.B);
return fragmentToAdd;
}

101. Messaging with the Host Activity
Passing notes in class is okay
• Create an Interface that defines any
external functionality your fragment
needs
• Implement the Interface in your
Activity
• In the fragment, check if the Activity
has implemented the Interface and
make use of any defined
functionality

102. Demo

105. Communicating with the Host Activity
public interface IDisplayDetail
{
bool CanDisplayDetail { get; }
void DisplayDetail(Fragment fragmentToDisplay);
}

106. Communicating with the Host Activity
var displayDetailActivity = Activity as IDisplayDetail;
if (displayDetailActivity != null && displayDetailActivity.CanDisplayDetail )
displayDetailActivity.DisplayDetail (new FragmentToAdd ());
else
StartActivity(new Intent(this.Activity, typeof(AddFragmentActivity)));

107. Communicating with the Host Activity
var displayDetailActivity = Activity as IDisplayDetail;
if (displayDetailActivity != null && displayDetailActivity.CanDisplayDetail)
displayDetailActivity.DisplayDetail (new FragmentToAdd ());
else
StartActivity(new Intent(this.Activity, typeof(AddFragmentActivity)));

108. Communicating with the Host Activity
var displayDetailActivity = Activity as IDisplayDetail;
if (displayDetailActivity != null && displayDetailActivity.CanDisplayDetail )
displayDetailActivity.DisplayDetail (new FragmentToAdd ());
else
StartActivity(new Intent(this.Activity, typeof(AddFragmentActivity)));

109. Messaging Alternatives
When an Interface is Not Enough
■ Consider using Events
■ Create an event in your fragment that you can
subscribe to in an activity or another fragment
■ When using events, make sure that you unsubscribe
properly to avoid any potential memory or subscription
issues

110. Tying It All Together
Work together in harmony
• Fragments are individual modules,
but they can work together
• Use an Activity to orchestrate
communications between multiple
fragments
•Mix-and-Match Fragments when
space allows, such as when in
landscape mode or on a tablet

111. Xamarin Fragment Docs
bit.ly/1nUpIoU

112. One Last Thing…

113. Testing. Testing Never Changes
• Device manufacturers implement
Android Differently
• Custom User Interface
• Camera
• Even ListViews!
• Test on all the devices you can get
your hands on!
• Check out Xamarin Test Cloud!

114. Questions?

115. Designing Android UIs
for the Ever Changing
Device Landscape
Michael Stonis
@michaelstonis