Building Adaptive iOS & Android Apps

Slide 1

Slide 1 text

Slides: bit.ly/adaptive-apps Building Adaptive iOS & Android Apps @BradBroulik | [email protected] BradBroulik.blogspot.com iOS Code: github.com/BradBroulik/iOS-adaptive-demos Android Code: github.com/BradBroulik/android-adaptive-demos

Slide 2

Slide 2 text

2 Adaptive in the real world…

Slide 3

Slide 3 text

3 http://i.imgur.com/dbHxR5I.gif Adaptive Table

Slide 4

Slide 4 text

4 The Adaptive Advantage Better UX User Efﬁciency Less Maintenance Future Friendly

Slide 5

Slide 5 text

5 No device customer left behind OLD NOW NEXT? APP DEVELOPMENT

Slide 6

Slide 6 text

6 Adaptive Building Blocks 1) Size classes or qualiﬁers 2) Adaptive layouts 3) Adaptive images

Slide 7

Slide 7 text

7 iOS 100 Universal iOS Apps TIP: By default, iOS apps are conﬁgured to be universal. Developers must explicitly choose to restrict this behavior.

Slide 8

Slide 8 text

8 Vertical Size Class (height) Horizontal Size Class (width) iPhone 4, 5, 6 Portrait Regular Compact iPhone 4, 5, 6 Landscape Compact Compact iPhone 6 Plus Portrait Regular Compact iPhone 6 Plus Landscape Compact Regular iPad Portrait/ Landscape Regular Regular # Size Classes NOTE: A size class coarsely categorizes available space horizontally and vertically SplitViewController compatible

Slide 9

Slide 9 text

9 Size Classes Images via WWDC 2014 - View Controller Advancements in iOS 8 Split View Controller

Slide 10

Slide 10 text

10 Trait Collections Set images based on trait collections Images via WWDC 2014 - Building Adaptive Apps with UIKit NOTE: A trait collection provides characteristics of a view controller which manages the views of your UI.

Slide 11

Slide 11 text

11 # Responsive Layouts Compact Regular NOTE: Is it adaptive or responsive? Responsive is a single template that responds based on a size class (iOS). Adaptive is multiple templates - one for each size class (Android).

Slide 12

Slide 12 text

12 CollectionView Master/Detail Layout Patterns Grids Mostly Fluid Auto Layout SplitViewController

Slide 13

Slide 13 text

13 Master/Detail NOTE: The entire Adaptive iOS Demos app runs within a SplitViewController and responds to regular and compact sizes. Master Detail NOTE: SplitViewControllers are “split” by default in horizontally regular displays.

Slide 14

Slide 14 text

14 SplitViewController Master Detail

Slide 15

Slide 15 text

15 TIP: Collection Views automatically adapt their ﬂow layout based on the available container size. Toggle for full-screen (refer to UIViewControllerExtensions.swift) Grids

Slide 16

Slide 16 text

16 TIP: With Auto Layout you may conﬁgure your UI to be responsive for any size class. Mostly Fluid Multi-column when regular Single-column when compact

Slide 17

Slide 17 text

17 TIP: Setup Auto Layout constraints by size class for a responsive and ﬂuid user interface. View Xcode constraints by size class Manage constraints by size class Auto Layout

Slide 18

Slide 18 text

18 Adaptive Images SVG 1x SVG 2x #

Slide 19

Slide 19 text

19 Use Case: Image by size class TIP: Xcode allows us to set the corresponding size class for our UIImages iPad regular iPhone compact Any width Compact width

Slide 20

Slide 20 text

20 Use Case: Art direction Art direction allows us to use smaller images that appear larger on smaller devices by cropping the subject of the photo.

Slide 21

Slide 21 text

21 Use Case: Vector icons https://github.com/Createful/pdf-vector-icons TIP: The images are black to simplify template rendering. This allows you to set the image color at runtime or in Interface Builder. Set the Types to “Vectors” before dragging vector PDF into Xcode Set Render As to “Template Image” to render the image in any color NOTE: The SVGs must be sized @1x and Xcode will manage the generation of the various sized PNGs.

Slide 22

Slide 22 text

Adaptive iOS Content Dynamic Type Popovers Self-sizing Cells Adaptive 22

Slide 23

Slide 23 text

Popovers TIP: Use a UIPopoverPresentaionController to present your popover. It allows you to adjust the popover for the display environment. Horizontally regular environments display as popovers and horizontally compact environments adapt to your choice of UIModalPresentationStyle (FullScreen, FormSheet, etc). 23 Popover appears as “FullScreen” in compact width Popover appears as “Popover” in regular width NOTE: Alerts and action sheets are also adaptive objects. Popover appears as “FormSheet” in compact height (new in iOS 8.3)

Slide 24

Slide 24 text

24 protocol UIAdaptivePresentationControllerDelegate: @availability(iOS, introduced=8.3) adaptivePresentationStyleForPresentationController(_: traitCollection:) Coming Soon? Adapt via TraitCollection. Previously the adaptive rule only applied to a compact-width size constraint. Maybe a new size class at WWDC 2015 - The latest iOS 8.3 API now allows Adaptive Presentation Controllers to adapt by TraitCollection.

Slide 25

Slide 25 text

25 Self-sizing Cells NOTE: Self-sizing cells were introduced in iOS 8. Verify layouts are font size friendly and accessible

Slide 26

Slide 26 text

26 1) tableView.estimatedRowHeight = 68.0 2) tableView.rowHeight = UITableViewAutomaticDimension 1) Allow row height to grow (FlexibleFontsTableViewController.swift) 2) Use text style font for accessibility (body, headline etc) 3) Set line length to zero to enable multi-lines 4) Test UI with different font sizes NOTE: Dynamic type was introduced in iOS 7 . Dynamic Type Dynamic Type Simulator

Slide 27

Slide 27 text

27 TIP: You can adjust font attributes based on size constraints. Here, we increase the font-size on regular width layouts. Adaptive

Slide 28

Slide 28 text

28 Adaptive iOS Testing Tools Actual Devices Emulators

Slide 29

Slide 29 text

29 Resizable Emulators

Slide 30

Slide 30 text

30 TIP: View different UIs simultaneously in Xcode’s new assistant preview editor. Preview Multiple Layouts https://developer.apple.com/library/ios/recipes/xcode_help-interface_builder/chapters/PreviewingLayouts.html

Slide 31

Slide 31 text

31 Toggle Double-Length Pseudolanguage Preview Alternate Font Lengths TIP: In the assistant preview you can see how your UI adapts for double-length text.

Slide 32

Slide 32 text

32 Android TIP: By default, Android apps are universal. Developers must explicitly choose to restrict this behavior. http://developer.android.com/guide/practices/screens-distribution.html

Slide 33

Slide 33 text

33 # Size Qualifiers Configuration Qualifier Description Smallest Width sw Smallest possible width for a screen (preferred when supporting 3.2+) Available Width w Minimum available width for a screen Screen Size small normal large xlarge Resources by size (pre Android 3.2) Orientation land port Resources by orientation Density ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi Resources by density http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources

Slide 34

Slide 34 text

34 TIP: The layout alias allow us to swap in alternate layouts for different size qualifiers. 2) Bind the “large” layout to our activity_mostly_fluid alias 1) When layout is sw600dp Size Qualifiers 3) Load the layout by alias name: http://developer.android.com/training/multiscreen/screensizes.html#TaskUseAliasFilters

Slide 35

Slide 35 text

35 # Adaptive Layouts Small large NOTE: Is it adaptive or responsive? Responsive is a single template that responds based on a size class (iOS). Adaptive is multiple templates - one for each size class (Android).

Slide 36

Slide 36 text

36 Layout Patterns Master/Detail GridView Mostly Fluid Fragments Size Qualiﬁers CardView

Slide 37

Slide 37 text

37 TIP: Creating master/detail layouts is very quick in Android Studio. Select New, Activity, Master/Detail Flow. That’s it - you’ll have a master/detail layout template setup in a few seconds! https://developer.android.com/design/patterns/multi-pane-layouts.html Master/Detail

Slide 38

Slide 38 text

38 TIP: GridView automatically adapts its ﬂow layout based the the available container size. GridView https://developer.android.com/guide/topics/ui/layout/gridview.html TIP: CardViews are also adaptive friendly widgets.

Slide 39

Slide 39 text

39 NOTE: This UI shows the multi-column template when the smallest-width is at least 600dp (sw600dp). Each template is a separate XML layout file. Mostly Fluid Multi-column template for sw600dp layout (activity_mostly_fluid_large.xml) Single-column template (activity_mostly_fluid.xml)

Slide 40

Slide 40 text

40 Adaptive Images SVG 2x SVG 3x #

Slide 41

Slide 41 text

41 Art direction allows us to use smaller images that appear larger on smaller devices by cropping the subject of the photo. Use Case: Art direction

Slide 42

Slide 42 text

42 Use Case: Vector drawables CAUTION: Vector Drawables are only available in Android 5.0 (API level 21) and above. AppCompat support is not currently available. TIP: Victor converts SVGs to PNGs at build time and doesn’t pollute the source code. https://github.com/trello/victor Android Icon Generator works with SVGs

Slide 43

Slide 43 text

43 Use Case: Tinted drawables CAUTION: Tinted Drawables are available only in Android 5.0 (API level 21) and above. AppCompat support is not currently available. https://developer.android.com/training/material/drawables.html#DrawableTint TIP: One drawable - many colors. You may tint any image type. DevBytes: Android Vector Graphics

Slide 44

Slide 44 text

44 Adaptive Content Scaleable Fonts Tabs Action Bars

Slide 45

Slide 45 text

Action Bars 45 TIP: Action bar items adapt to large and small devices automatically when setup with an “ifRoom” attribute. http://developer.android.com/guide/practices/tablets-and-handsets.html#ActionBar Action bars automatically collapse if there isn’t enough room

Slide 46

Slide 46 text

Tabs 46 http://developer.android.com/guide/topics/ui/actionbar.html#Tabs TIP: ActionBar tabs adapt to small and large screen widths automatically. They appear as a “stacked action bar” or alongside the action buttons depending on available space. CAUTION: The new Toolbar Widget in Android L is not adaptive out-of-the-box but it can be customized to support any size qualiﬁer.

Slide 47

Slide 47 text

Scaleable Fonts Verify layouts are font size friendly and accessible Test UI with different font sizes http://developer.android.com/guide/practices/screens_support.html#screen-independence TIP: Use scale-independent pixels (sp) for font sizes. This unit of measure adjusts for both screen density and the users font-size setting. 47

Slide 48

Slide 48 text

48 Adaptive Android Testing Tools Actual Devices Emulators

Slide 49

Slide 49 text

49 Preview Multiple Layouts Android Studio’s preview mode allows you to view multiple devices at once

Slide 50

Slide 50 text

50 Adaptive Project Strategies Adaptive Retroﬁtting Adaptive Apps Mobile-First Adaptive

Slide 51

Slide 51 text

Slides: bit.ly/adaptive-apps Thank You! @BradBroulik | [email protected] BradBroulik.blogspot.com iOS Code: github.com/BradBroulik/iOS-adaptive-demos Android Code: github.com/BradBroulik/android-adaptive-demos