pretty 'awesome' apps (demo at mobilise meetup)

Multi Platform App Dev

David Douglas@deadlyfingers

3x IDEs• Xcode 5 • Android Studio • Visual Studio 2013

3x Languages• Objective C / Swift• Java• C#

3x UX Design Guidelines• iOS 7+ (Flat design)• Android L (Material Design)• Windows 8 (Flat design)

3x Platform Design Patterns• iOS• Android• Windows

iOS MVC Design Pattern• Model

– Model.h (+.m)• View

– ViewController.xib• Controller

– ViewController.h (+.m)

Android MV? Design Pattern• Model

– Model.java• View

– activity_my.xml• Controller / Adapter

– MyActivity.java – Adapter.java

Windows MVVM Design Pattern• Model

– Model.cs• View

– MainPage.xaml– MainPage.cs

• ViewModel– ViewModel.cs

3x “Awesome” Apps Demos• Reuse data source (local JSON)• Data modeling (Obj C, Java, C#)• UI components that play nice with orientation change & mobile/tablet/desktop.• Custom font

Data Source• Font Awesome Glyphs• JSON file generated with Ruby script

(watir)

iOS App (demo)• iPhone• iPad

iOS App• CocoaPods• JSONModel• Custom Font (Info.plist)• Collection View• Storyboard (shared)

Android App (demo)• Phone• Tablet

Android App• Android Studio and Gradle• GSON from JSON file in

‘src/main/assets’• Generate Getters & Setters [Cmd]+[N]• GridView• Custom ArrayAdapter

Windows App (demo)• Phone• Tablet / Surface• Desktop PC

Visual Studio 2013

Windows App• Universal Apps - Shared Assets

(W8+WP8)• NuGet Package Manager • Newtonsoft.JSON• GridView • {Binding}

Summary of similaritiesFeatures iOS Android WindowsLib Management

CocoaPods Gradle NuGet

JSON JSONModel GSON Newtonsoft.JSON

Grid Layout UICollectionView

GridView GridView

Grid Objects UICollectionViewDataSource

ArrayAdapter {Binding}

App start ViewController.m

MainActivity.java

MainPage.xaml∟

MainPage.xaml.cs

Taking it further…• Theming• Navigation to Detail View• Azure Mobile Services - Add user identity - eg. My favorites - Push future updates over Cloud!

Theming

iOS Status Bar appearance

Info.plist

App Delegate[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

View Controller- (UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent;}

View Controller[[self.navigationController navigationBar] setBarTintColor:[UIColor blackColor]];

[[self.navigationController navigationBar] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]}];

[self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];

iOS Navigtaion Bar appearance

res/values-v21/styles.xml<?xml version="1.0" encoding="utf-8"?><resources> <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimary">#B3C938</item> <item name="android:colorPrimaryDark">#000000</item> </style></resources>

Android L (API 21) Theme

res/drawable/actionbar_background.xml<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle”><solid android:color="#B3C938" /></shape>

res/values/styles.xml<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:actionBarStyle">@style/MyActionBar</item> <item name="android:actionMenuTextColor">#ffffff</item> <!-- Support library compatibility --> <item name="actionBarStyle">@style/MyActionBar</item> <item name="actionMenuTextColor">#ffffff</item> </style>

<!-- ActionBar styles --> <style name="MyActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse"> <item name="android:background">@drawable/actionbar_background</item> <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> <!-- Support library compatibility --> <item name="background">@drawable/actionbar_background</item> <item name="titleTextStyle">@style/MyActionBarTitleText</item> </style>

<!-- ActionBar title text --> <style name="MyActionBarTitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textColor">#ffffff</item> </style></resources>

Android AppCompat styles

Page.xaml<Page Background="Crimson" RequestedTheme="Light">

Page.xaml.csprivate async Task showStatusBar(){

StatusBar statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();

// Change the status bar colorawait statusBar.ShowAsync(); // Shows the status bar if it is hiddenstatusBar.ForegroundColor = ColorHelper.FromArgb(0, 255, 0, 0);statusBar.BackgroundColor = ColorHelper.FromArgb(0, 128, 0, 0);statusBar.BackgroundOpacity = 1;

}

WindowsPhone Status Bar

Custom Fonts

Info.plist

View ControllerUIFont *customFont = [UIFont fontWithName:@"FontAwesome" size:64];

UILabel *labelGlyph = (UILabel *) [self.view viewWithTag:1];[labelGlyph setFont:customFont];[labelGlyph setTextColor:[UIColor grayColor]];[labelGlyph setText:@"\uf164"];

iOS UIFont

Activity.javafinal TextView textView = (TextView) findViewById(R.id.textView);

Typeface customFont = Typeface.createFromAsset(context.getAssets(), "FontAwesome.otf");

textView.setText( Html.fromHtml("&#xf164;") );

textGlyph.setTypeface(customFont);

Android Typeface

Page.xaml<TextBlock Name="textBlock" FontSize="64" Foreground="Gray" Text="" FontFamily="ms-appx:///Assets/FontAwesome.otf#FontAwesome" />

Page.xaml.csFontFamily customFont = new FontFamily( "ms-appx:///Assets/FontAwesome.otf#FontAwesome");

textBlock.FontFamily = customFont;

textBlock.Text = "\uf164";

Windows FontFamily

Native DesignAppledeveloper.apple.com/design

Androidwww.google.co.uk/design

Windowshttp://design.windows.com

Native DevelopmentApplehttp://tinyurl.com/iosdesignpattterns

Androidhttp://tinyurl.com/android-mvvm

Windows

http://tinyurl.com/windows-mvvm

Thank you

Questions? @deadlyfingers