MvvmCross & Material design Building Native Cross-Platform Apps Martijn van Dijk @mhvdijk [email protected] github.com/martijn00 speakerdeck.com/martijn00 

Agenda ■ What is MvvmCross ■ Material Design explained ■ Bringing Material design to life with Android support 

Why Mvvm? View Binder ViewModel Model Button Text 1. Action 1. Action 3. Command 5. Notify change 6. Change data 4. Access data 2. Event handling 

Why MvvmCross? ■ Cross-platform awesomeness! ■ Support for all major platforms ■ Most advanced Mvvm library for Xamarin and .NET cross platform ■ Large and engaged community ■ Fast release cycle ■ Clean and easy conventions Miguel de Icaza (Xamarin CTO) “I love MvvmCross” ■ Used by many enterprise companies e.g: - Microsoft - Xamarin inc. - Dutch government - Olo - Nokia Scott Hanselman (Microsoft Developer Evangelist) “I am really impressed with MvvmCross” 

MvvmCross supported platforms ■ Android ■ iOS ■ Windows ■ Xamarin.Forms ■ tvOS ■ Google wear ■ iWatch ■ Mac 

MvvmCross details Highlights ■ Flexible architecture ■ PCL based ■ Inversion of Control ■ Dependency injection ■ Value Converters ■ Bindings ■ Testable ■ Plugins Resources ■ Github.com/MvvmCross ■ MvvmCross.com ■ Slack (#mvvmcross) ■ Stackoverflow ■ Xamarin Forums 

Presenters Specifications ■ Customize view presentation ■ Platform-specific ■ Still retain View Model logic ■ Presentation hints Examples ■ Tabs / Panorama ■ Split View / Master-Detail ■ Fragments ■ Modals ■ Hamburger menu 

Plugins ■ Messenger ■ Phone Call ■ Picture Chooser ■ SQLite ■ Visibility ■ Web Browser + Many More! MvvmCross ■ Accelerometer ■ Download Cache ■ Email ■ File ■ Json ■ Localization ■ Location Plugins available at https://github.com/MvvmCross/MvvmCross-Plugins 

Generics ■ MvvmCross uses CoC (Convention over Configuration) by default - LoginView > LoginViewModel ■ Generics can be used too - LoginView : MvxActivity - MainView : MvxActivity ■ Possible to override in setup.cs - protected override IDictionary GetViewModelViewLookup() 

IoC (Inversion of Control) 1. Use interfaces 2. Define implementation of interfaces at runtime 3. Job done! :) ■ Singleton: Mvx.RegisterSingleton(); ■ Lazy: Mvx.ConstructAndRegisterSingleton(); ■ Dynamic: Mvx.RegisterType(); Mvx.Resolve(); 

What is material design? and how it helps the user understand what’s happening. 

It’s not only a “designer thingy” 

The 3 principles of Material design 

Principle 1 Material is the metaphor 

met·a·phor noun A thing regarded as representative or symbolic of something else, especially something abstract. 

No content

The 3D space of Material design 

No content

No content

Principle 2 Bold, graphic, intentional 

No content

No content

No content

Principle 3 Motion provides meaning 

Material reacts to user input but is never distracting 

No content

No content

Material & Android support for MvvmCross ■ Design - NavigationView - FloatingActionButton ■ AppCompat - android:Theme - Toolbar - DrawerToggle ■ V4 - DrawerLayout - SwipeRefresh - ViewPager (FragmentStatePager) ■ LeanBack ■ Preference - Compat Fragments ■ Fragging - V4 Fragments - MvxCachingFragmentActivity ■ RecyclerView - ItemTouchHelper for Xamarin 

Other Material & Android support libraries ■ Cardview ■ Pallete ■ Gridlayout ■ Mediarouter ■ V8 Support ■ V13 Support ■ Annotations support ■ Custom tabs ■ Percent support ■ Recommendation support 

How to use it? 

Tips ■ Keep it simple ■ Separation of Concerns ■ Don’t try to invent the wheel again, use plugins, samples, etc ■ Use Xamarin player or GenyMotion as emulator for Android ■ Test all changes (UITest, Unit test, etc) ■ Use a common PCL profile (profile7 or profile259) or .NET Platform Standard ■ Enable “Analysis” XS > Preferences > Text Editor > Source Analysis > Enable ■ Get help on Slack: https://xamarinchat.herokuapp.com/ ■ Follow influencers on Twitter #Xamarin #MvvmCross 

Xamarin & MvvmCross Hackathon ■ Wednesday December 16th ■ Thursday January 14th ■ C#6 and Xamarin Plugins ■ Get experience using real life scenarios ■ Have fun! http://www.meetup.com/Xamarin-MvvmCross-Meetup/