Creating Native Cross-platform Apps with Xamarin Forms in Visual Studio

Now a day, the craze mobile app is increasing day by day because of a variety of Smartphone are available in the market and everyone wants to use mobile apps in place of a website. But as we all know that we have a different platform available in mobiles like Android, iOS or Windows. So, app developer, it is a very complex task for an individual to create three different apps for three different platforms. And for anyone, it’s very tough to write same logic in the different language or for different OS. So, why we don’t write single code which can be used with multiple platforms or maximum code can be used with another platform. So, do we have any technology here to accomplish this problem?

So, a solution is Xamarin.Forms.  If we use Xamarin.Forms for creating native mobile apps, we can use the same code for all platforms, we can achieve it easily. But the question is here, what exactly Xamarin.Forms is. So, this article will explain what exactly Xamarin.Forms is and why we should use it for creating Cross-Platform Mobile App. We will also learn how to create the native app for mobile with Visual Studio 2017, Xamarin.Forms and Csharp.

Xamarin.Forms allows us to create Cross-Platform native apps for mobile or we can say, using this toolkit, we can develop a native mobile app for iOS, Android, and Windows.  It allows us to share more than 90% codes between three different platforms, so it’s making our life easy and we don’t need to write same logic in different language. We can write once and use it with each platform.

Learn more about why choose Xamarin for Cross-Platform Mobile Apps.

Let’s move to create cross-platform mobile apps using Xamarin.Forms and see how we can achieve our first native apps application and what hurdles we face in the way. So, let move to create a new project as follows.

Open Visual Studio 2017 > Go to File menu and select New and then Project. The New Project will be opened as follows.  From the installed template > select Visual C# > Cross-Platform > Cross-Platform-App (Xamarin.Forms or Native).  Then provide the name of the project (FirstNativeApp) and save location for the project and OK.

Next screen shows different UI technology available while creating a cross-platform app like Xamarin.Forms or Native. Here we will choose Xamarin.Forms.  Apart from this, we have available Code Sharing Strategy as “Shared Project” or “PCL". These options allow us to share the code either inside the solution level or outside of the project and click to OK.

So, don’t be confused, it all depends on your installed version of Xamarin.Forms and Visual Studio 2017. And to know more about Code Sharing, you can read the following article.

https://docs.microsoft.com/en-us/xamarin/cross-platform/app-fundamentals/code-sharing

Next screen will ask you to setup Mac agent and provide Remote Login option. As for this demonstration, we are not using any Mac, so just leave it and close it.

Next screen will show all the Macs host system available if you have added along with “Add Mac...” button. Just leave it also and close it.

To create Windows enable the app, we use Universal Windows Project (UWP). As cross-platform app with Xamarin.Forms also include Windows project, so it shows the following screen where we can select our target version of Windows. So, select as per your available target version.

Once we will set up everything as suggested above, it will start creating Cross-Platform App for you. But wait, it will take time as per your system configuration.

If everything is fine then your project will be ready as follows. As you can see with following images which shows all project created in one solution for different platforms. Each project has added platform name at the end of the project as Android or iOS or UWP.

Android App

Now, it’s time to build and run the project.  So, first, we are going to test Android App. For building and running the project we have different types of emulator or simulator. So first, we will test Android App, to test it, we have available different emulators installed as you can see with the following image. We will choose “VisualStudio_android-23_x86_phone” for running the app. Just select it and run it.

Sometimes, if you are using windows 10 with Hyper-V then probably you will get following error.

To resolve this, we have to disable hyper-v using command prompt as Administrator as follows.

Now run again the project using “VisualStudio_android-23_x86_phone” emulator. This time, it will start building your project and starting your selected emulator and deploy your project for live testing. Once everything will be ready, you will see, Android Emulator something like below.

Now click to Menu button (Center) and you will get next screen where all apps will be listed as follows.

In the above screen, you can see, our app “FirstNativeApp” has deployed by Android Emulator and available to use it. Just click on it to open and you will see your first android app is running.

So, finally, we are able to run the Android App with Android Emulator. Now, it is time to run the UWP project with the local machine.

UWP (Universal Windows Platform) App

First thing, we should care that which project is set as “Start-up Project”. This time, we have to change and make the UWP project as Start-up Project.  Apart from this, we should check, our UWP project is ready for building and deploying or not. By default, it is not but yes we can change it from solution project configuration properties.  As you can see with the following image, we have checked build and deploy option for UWP project and click to OK.

To run the UWP project, we will choose “Local Machine” from the Run option and run it.

Finally, we will see the following screen as UWP App is running.

iOS App

You must be connected to build server before running the application. But for now, we don't have set up for Mac. So, we can leave it here.

Conclusion

So, today we have learned about Xamarin Forms, what it is and why we should use it. We also learned how to create our first cross-platform native mobile app using Xamarin.Forms.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends. Thanks