Cross Platform Mobile Development using Xamarin Forms Onebit Brownbag Session Raka Westu Mogandhi

Why Cross-Platform Development? • Single code base • Multiple deployment options • Native application

Xamarin “Deliver native iOS, Android, and Windows apps using existing skills, teams, and code.”

Xamarin Overview • Xamarin is not a cross platform framework but a multi platform framework. • Xamarin wraps all platform codes in C#. • Xamarin mobile platforms • Xamarin Android • Tamarin Mac • Xamarin iOS • Xamarin Forms

Xamarin Forms • Single UI code base using XAML • Single C# code base • Best for Apps that • Require little platform specific functionality • Code sharing is more important than custom UI

Xamarin Forms Project Structure • Shared Code • Contains business logic code (C#) • UI control (XAML) • Platform Specific Code • Platform specific resources • Platform specific libraries • Platform specific implementation (Custom UI, Native Interface Methods, etc.)

How is the Xamarin Forms UI rendering works? Each Xamarin UI control will render its control into each platform native UI. For example:

How is the Xamarin Forms UI rendering works? • TabbedPage • TabLayout in Android • UITabBar in iOS • StackLayout -> Stack container • LinearLayout in Android • StackView in iOS

How is the Xamarin Forms UI rendering works? • Entry • EditText in Android • UITextField in iOS • Button -> Stack container • Button in Android • UIButton in iOS

How is the Xamarin Forms UI rendering works? • Label • TextView in Android • UILabel in iOS • Image • ImageView in Android • UIImageView in iOS

How is the Xamarin Forms UI rendering works?

How to use Custom UI Control? • Define Custom UI Control in Shared Code namespace Apollo
 {
 public class CustomLabel : Label
 {
 
 }
 } • Define Custom UI implementation in each platform • Android [assembly: ExportRenderer (typeof (CustomLabel), typeof (CustomViewRenderer))]
 namespace Apollo.Droid
 {
 public class CustomViewRenderer : LabelRenderer
 {
 protected override void OnElementChanged (ElementChangedEventArgs e) {
 base.OnElementChanged (e);
 var textView = (TextView)Control; 
 // Custom your TextView here
 }
 }
 }

How to use Custom UI Control? • Define Custom UI Control in Shared Code namespace Apollo
 {
 public class CustomLabel : Label
 {
 
 }
 } • Define Custom UI implementation in each platform • iOS [assembly: ExportRenderer(typeof(CustomLabelRenderer), typeof(CustomLabel))]
 namespace Apollo.iOS
 {
 public class CustomLabelRenderer: LabelRenderer
 {
 protected override void OnElementChanged (ElementChangedEventArgs e)
 {
 base.OnElementChanged (e);
 var label = (UILabel) Control;
 // Customize your UILabel here
 }
 }
 }


How to Call Platform specific Function? • Use DependencyService and Interface • Example: • In Shared Code • Interface • Call using DependencyService DependencyService.Get().TrackAppPage(pageName);

How to Call Platform specific Function? • Use DependencyService and Interface • Example: • In Android Implementation [assembly: Dependency(typeof(AnalyticsService))]
 namespace Apollo.Droid
 {
 public class AnalyticsService : IAnalyticsService
 {
 // Android Implementation
 }
 } • In iOS Implementation [assembly: Dependency(typeof(AnalyticsService))]
 namespace Apollo.iOS
 {
 public class AnalyticsService : IAnalyticsService
 {
 // iOS implementation
 
 }
 }
 


Pros and Cons • Pros • Only use XAML and C# for shared codebase (Good for existing .NET Developers) • Single code base (UI and logic) • Easy to use MVVM architecture (Easy data binding support both in XAML and C# codes) • Cons • No UI (XAML) preview • Different license to build each platform • Not easy to import/use native library

Thank you!