Build Native Cross Platform Apps With Xamarin.Forms And Visual Studio

Nowadays, the craze of mobile apps is increasing day by day because a variety of smartphones are available in the market and everyone wants to use mobile apps in place of a website. However, we all know that we have different platforms available on mobiles like Android, iOS or Windows. Therefore, it is a very complex task for an app developer to create three different apps for three different platforms. And, for anyone, it’s really tough to write the same logic in different languages or for a different OS. So, why don't we write a single code, which can be used within multiple platforms, or maximum codes that can be used with other platforms? So, do we have any technology to accomplish this problem?

The 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 are Xamarin.Forms. So, in this article, we will discuss what exactly Xamarin.Forms are and why we should use it for creating Cross-Platform Mobile Apps. We will also discuss how to create a native app for mobile with Visual Studio 2017, Xamarin.Forms and C sharp.

Xamarin.Forms allow 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% of the code between three different platforms, so it is making our life easy and we do not need to write the same logic in a different language. We can write the logic once and use it with multiple platforms.

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

Now, let us discuss how to create cross-platform mobile apps using Xamarin.Forms and see how we can achieve our first native apps application and hurdles we face in the way. So, let's start 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 technologies available while creating a cross-platform app like Xamarin.Forms or Native. Here, we will choose Xamarin.Forms. Apart from this, we have 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 OK.

Note
If you are using the latest version of Visual Studio 2017 then you will find templates for Cross-Platform App and provide the platforms like Android, iOS, and Windows (UWP) in the Code, Sharing Strategy contains “Shared Project” or “.Net Standard”.

So, do not get 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

The next screen will ask you to set up a Mac agent and provide a 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 Mac host systems available if you have added along with “Add Mac...” button. Just leave it also and close it.

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

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

Note
While working with Xamarin.Forms with Windows 10, always keep at least 8 GB RAM.

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

ANDROID APP

Now, it is 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 emulators or simulators. So first, we will test Android App. We have installed different emulators which you can see in 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.

Please disable Hyper-V before using the Android Emulator. Start a command prompt as Administrator, run 'bcdedit /set hypervisorlaunchtype off', reboot.

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

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

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

In the above screen, you can see, our app “FirstNativeApp” has been deployed by Android Emulator and is 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 off, we should take care about which project is set as the “Start-up Project”. This time, we have to change and make the UWP project as Start-up Project. Apart from this, we should check if 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 to build, deploy option for UWP project, and clicked 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.

Xamarin

IOS APP

You must be connected to build the server before running the application. However, for now, we are not set up for Mac. Therefore, 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 to create our first cross-platform native mobile app using Xamarin.Forms.

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