{"id":15765,"date":"2017-12-11T09:00:15","date_gmt":"2017-12-11T17:00:15","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/?p=15765"},"modified":"2019-10-24T17:36:30","modified_gmt":"2019-10-25T00:36:30","slug":"share-ui-code-in-any-ios-and-android-app-with-net-embedding","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/share-ui-code-in-any-ios-and-android-app-with-net-embedding\/","title":{"rendered":"Share UI Code in any iOS and Android App with .NET Embedding"},"content":{"rendered":"<p>One of the most exciting announcements during this year\u2019s Connect(); event was the ability to embed .NET libraries into existing iOS (Objective-C\/Swift) and Android (Java) applications with .NET Embedding. This is great because you can start to share code between your iOS and Android applications, and you can also share the user interface between your apps when you combine .NET Embedding with Xamarin.Forms Native Forms. This means that you can leverage your existing investments and apps without having to re-write them from scratch to start adding cross-platform logic and UI. In fact, during the Connect(); keynote I showed how I was able to extend the open source Swift-based Kickstarter iOS application with .NET Embedding and Xamarin.Forms Native Forms. You can check out the clip below.<\/p>\n<p><iframe width=\"750\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"https:\/\/channel9.msdn.com\/Events\/Connect\/2017\/K100\/player#time=32m26s:paused\"><\/iframe><\/p>\n<p>Today, let\u2019s take a deeper look at how we can start sharing our native user interfaces and business logic in an iOS app written in Objective-C and an Android app written in Java using .NET Embedding.<\/p>\n<h2>Getting Started<\/h2>\n<p>.NET Embedding tooling is supported in both Visual Studio 2017 for Android, and Visual Studio for Mac for iOS, Android, and macOS. Since we will be working on an iOS and Android application, we will be using Visual Studio for Mac which can be downloaded from <a href=\"https:\/\/www.visualstudio.com\/vs\/visual-studio-mac\/\">visualstudio.com<\/a>. If you are on Windows you can still follow along for the Android portion.<\/p>\n<p>.NET Embedding works by compiling a .NET assembly into a native library for the specified operating system. This can be a single .NET Standard Library or platform specific Xamarin.iOS and Xamarin.Android libraries that share code. The latter will enable us to access platform specific capabilities and utilize Xamarin.Forms\u2019 Native Forms capability to share user interface code.<\/p>\n<p>For this sample we will want to create three projects:<\/p>\n<ul>\n<li>HelloSharedUI &#8211; Portable Class Library<\/li>\n<li>HelloSharedUI.iOS &#8211; Xamarin.iOS Library<\/li>\n<li>HelloSharedUI.Droid &#8211; Xamarin.Android Library<\/li>\n<\/ul>\n<p>Inside of Visual Studio for Mac we will find the multiplatform node in the New Project Dialog, where a Xamarin.Forms class library template exists. This will create a Portable Class Library for our shared code with the Xamarin.Forms NuGet package installed and some sample code. We\u2019ll start with this.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Shared-Project.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" title=\"Shared Project\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/Shared-Project.png\" alt=\"Shared Project\" width=\"640\" height=\"465\" \/><\/a><\/p>\n<p>Next, we will want to create the iOS and Android Class Libraries.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Class-Library-iOS-and-Android.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" title=\"Class Library iOS and Android\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/Class-Library-iOS-and-Android.png\" alt=\"Class Library iOS and Android\" \/><\/a><\/p>\n<p>Then we must ensure that we have installed the Xamarin.Forms NuGet Package in the iOS and Android projects and that the shared portable class library\u2019s NuGet is also up to date. If you are new to .NET Development, NuGet is package management for .NET project similar to CocoaPods and Maven packages.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Add-Xamarin-Forms.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" title=\"Add Xamarin Forms\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/Add-Xamarin-Forms.png\" alt=\"Add Xamarin Forms\" width=\"640\" height=\"423\" \/><\/a><\/p>\n<p>Finally, we should ensure that our iOS and Android libraries have a reference to the portable class library that has our shared code.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Add-Reference.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" title=\"Add Reference\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/Add-Reference.png\" alt=\"Add Reference\" width=\"640\" height=\"413\" \/><\/a><\/p>\n<h2>Shared User Interface<\/h2>\n<p>The default template gives us the following shared user interface with a button that when clicked will update its label.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/jamesmontemagno\/0a7dd0436ef085a7d185965b04a7e946.js\"><\/script><\/p>\n<p>We will use this page for this example, but we can easily add additional pages written in XAML or C# with Xamarin.Forms.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/New-File.png\"><img decoding=\"async\" style=\"margin: 0px\" title=\"New file\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/New-File.png\" alt=\"New file\" width=\"644\" height=\"483\" border=\"0\" \/><\/a><\/p>\n<h2>Accessing Shared User Interface<\/h2>\n<p>With our shared user interface in place we need a way to get access to it from the iOS and Android libraries. Let\u2019s add a class called UIHelpers.cs to the iOS and Android libraries that will contain helper methods to initialize Xamarin.Forms and display or return the page on each platform.<\/p>\n<h3>iOS UIHelpers<\/h3>\n<p>On iOS we are able to directly push the page on the navigation stack or display it modally. This is accomplished by creating an instance of MyPage, finding the root view controller, and presenting it:\n<script src=\"https:\/\/gist.github.com\/jamesmontemagno\/212d42d064a38dfb0b66330487c48ca6.js\"><\/script><\/p>\n<h3>Android UIHelpers<\/h3>\n<p>On Android we also have access to the navigation stack, but it is easier to directly return a Fragment that can then be used anywhere in the Android application:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/jamesmontemagno\/38522a3ce1fd9bfd0bb9a787995c7a40.js\"><\/script><\/p>\n<p>With our code in place we are now ready to compile the libraries to embed in the native language apps.<\/p>\n<h3>Adding .NET Embedding NuGet Packages<\/h3>\n<p>The .NET Embedding tooling can be <a href=\"https:\/\/developer.xamarin.com\/guides\/cross-platform\/dotnet-embedding\/\">installed directly on to our development<\/a> machine or added directly to the project via the Embeddinator-4000 NuGet package. This means we can add the NuGet package to our iOS and Android projects.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/NuGet-Packages.png\"><img decoding=\"async\" style=\"margin: 0px\" title=\"Nuget Packages\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/NuGet-Packages.png\" alt=\"Nuget Packages\" width=\"644\" height=\"483\" border=\"0\" \/><\/a><\/p>\n<p>After we compile the library we need to run it through the .NET embedding tooling to generate the framework. This can easily be done by adding custom commands that run after the build is successful. These can be added by right clicking on the iOS project and going to options and finding Custom Commands. For this demo we will generate an iOS framework in debug mode with the following command:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/jamesmontemagno\/fbaab2a70f47753bbc7a2d3c2279a81e.js\"><\/script><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Custom-Commands.png\"><img decoding=\"async\" style=\"margin: 0px\" title=\"Custom commands\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/Custom-Commands.png\" alt=\"Custom commands\" width=\"644\" height=\"483\" border=\"0\" \/><\/a><\/p>\n<p>For Android we will use a similar command:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/jamesmontemagno\/feee5eaac731cc93030f7dc76f697322.js\"><\/script><\/p>\n<p>Now, when we compile the library a folder named **iosoutput** will contain HelloSharedUI.iOS.framework that we can import into an iOS Objective-C or Swift project and another folder named **androidoutput** that will contain HelloSharedUI.Droid.aar for Android.<\/p>\n<h2>Calling .NET Code from Xcode and Objective-C<\/h2>\n<p>The final step for iOS is to <a href=\"https:\/\/developer.xamarin.com\/guides\/cross-platform\/dotnet-embedding\/getting-started\/objective-c\/ios\/#Use_the_generated_output_in_an_Xcode_project\">import the .framework into Xcode and add it as an embedded binary<\/a>. Follow the simple steps on our <a href=\"https:\/\/developer.xamarin.com\/guides\/cross-platform\/dotnet-embedding\/getting-started\/objective-c\/ios\/#Use_the_generated_output_in_an_Xcode_project\">.NET Embedding documentation to import it<\/a>. I created a simple UIViewController that has a button and a TouchUpInside Action that is all wrapped in a UINavigationController.<\/p>\n<p>On the top of the ViewController.m we need to add an import for our header and then implement the click event to show the embedded page:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/jamesmontemagno\/a2df63479d416afb37f7497f66ada7ec.js\"><\/script><\/p>\n<p>Now simply run the application to see the embedded page and C# logic:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/iOS-Embedding.gif\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" title=\"iOS Embedding\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/iOS-Embedding.gif\" alt=\"iOS Embedding\" \/><\/a><\/p>\n<h2>Adding the Framework to Android Studio<\/h2>\n<p>Android goes through a similar process of importing the generated .aar that is explained on our <a href=\"https:\/\/developer.xamarin.com\/guides\/cross-platform\/dotnet-embedding\/getting-started\/java\/android\/#Use_the_generated_output_in_an_Android_Studio_project\">.NET Embedding documentation page<\/a>. After we have the .aar imported it is ready to be used an application. I generated the default application in Android Studio that displays a single Fragment in an Activity with a FloatingActionButton that has a click listener. Instead of displaying toast when the button is clicked, we can navigate to the shared user interface that we exposed as a Fragment. To get access we can import our library and then we can create the UIHelpers class, create our fragment, and replace the current view:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/jamesmontemagno\/c945fb4629bbc73e83e2c64d40549993.js\"><\/script><\/p>\n<p>Now, let\u2019s go ahead and run the app:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/Android-Embedding.gif\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" title=\"Android Embedding\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2017\/12\/Android-Embedding.gif\" alt=\"Android Embedding\" \/><\/a><\/p>\n<h4><\/h4>\n<h2>Embed Everywhere<\/h2>\n<p>In just a few minutes we were able to create shareable native user interface and business logic in XAML and C#, and embed it into a native language iOS and Android application. This is only the start as .NET embedding also supports creating embeddable libraries for not just iOS and Android, but also Objective-C\/Swift macOS applications, and even C++ code for Linux based apps.<\/p>\n<h2>Learn More<\/h2>\n<p>Be sure to read through our <a href=\"https:\/\/developer.xamarin.com\/guides\/cross-platform\/dotnet-embedding\/\">full documentation on .NET Embedding<\/a> to start leveraging .NET libraries in native language applications. You can grab the <a href=\"http:\/\/github.com\/jamesmontemagno\/embeddinator-hellosharedui\">source code on my GitHub<\/a> and also the full Kickstarter app source code that I demoed at Connect(); from my <a href=\"https:\/\/github.com\/jamesmontemagno\/embeddinator-kickstarter\">GitHub<\/a>.<\/p>\n<p>To get started with all of this, for free, head on over to VisualStudio.com and <a href=\"https:\/\/www.visualstudio.com\/xamarin\/\">download Visual Studio 2017 or Visual Studio for Mac<\/a>. You can learn more about .NET Embedding and all of our other announcements by reading our <a href=\"https:\/\/blog.xamarin.com\/xamarin-announcements-microsoft-connect-2017\/\">full announcement<\/a> from the event.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most exciting announcements during this year\u2019s Connect(); event was the ability to embed .NET libraries into existing iOS (Objective-C\/Swift) and Android (Java) applications with .NET Embedding. This is great because you can start to share code between your iOS and Android applications, and you can also share the user interface between your [&hellip;]<\/p>\n","protected":false},"author":544,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1195,4980,1028,561,155],"tags":[237,374,1383,292,376,185,156,353,133],"class_list":["post-15765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cross-platform","category-java","category-mobile","category-open-source","category-visual-studio","tag-net","tag-android","tag-c","tag-ios","tag-java","tag-node-js","tag-visual-studio-2017","tag-xamarin","tag-xaml"],"acf":[],"blog_post_summary":"<p>One of the most exciting announcements during this year\u2019s Connect(); event was the ability to embed .NET libraries into existing iOS (Objective-C\/Swift) and Android (Java) applications with .NET Embedding. This is great because you can start to share code between your iOS and Android applications, and you can also share the user interface between your [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/15765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=15765"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/15765\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=15765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=15765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=15765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}