In this article, we will talk about how to create a simple hello world android app using Xamarin Android in Visual Studio 2015 using C#. So let`s get started.
In previous post, we talked about how to setup windows machine for Xamarin development. Now in this article, we will create our first hello world android app using Xamarin Android in Visual Studio 2015 using C#.
To get started open visual studio 2015, go to File => New => Project (Ctrl+Shift+N) option. It will open up a project dialog window. Select Visual C# template from left tree menu. Under Visual C# select Android template option as shown below (F:1)
Select Blank App (Android) project template. Give it a project a name called HelloAndroid and click on Ok button. After clicking on Ok button, visual studio will create a blank Xamarin android project.
Now let`s look at the project structure (F: 2).
It contains the main AndroidManifest.xml file which describes all the requirement of our application like application name, version number and permissions that our application requires. We can think of this file as our web.config file in our ASP.NET web application. It also contains AssemblyInfo.cs file, which is .NET assembly information file which contains information like version number, description of assembly etc.
It contains the assemblies that are required to build and run the Xamarin Android application. As we can see in above image, we have reference for .NET libraries like System, System.XML etc but the main library is Mono.Android. Mono.Android allows us to write android applications using C#. It is build on top of Mono framework. Mono is cross-platform open source implementation of Microsoft`s .NET framework.
We can add third party components in our application from Xamarin Component Store. This directory shows us the components we have added in our application.
We can add some local data files in this folder which we can use in our application.
It contains three sub folders: drawable, layout and values.
It is also called as Resource class. It contains a unique id for each resource we add to our project like layout file, images etc. It is automatically generated by Xamarin.Android tools and regenerated as necessary.
This is the central part of our android application. We can think of it as a controller in our ASP.NET MVC application. It is responsible for responding to the user interactions like clicking a button or selecting an item from list etc.
Now let`s open the Main.axml file from drawable=> layout folder. This .axml file is an android designer file using which we can create a user interface for our android app. It is also called as Android XML. When we open this file Visual Studio, it will open up a visual editor called as Android Designer as shown below (F:3)
I am using 18.104.22.1680 version of Xamarin for Visual Studio. In this version, blank app project template does not contain the boiler plate code. If you are using a previous version of Xamarin for Visual Studio, then you may have a button added to the designer.
Now let`s open the Toolbox windows using which we can add controls on the designer surface by simply drag and drop operation. To open Toolbox window go to View => Toolbox (Ctrl+Alt+X) as shown below (F: 4)
Now let`s drag a TextView (Text Large) control from toolbox and drop it on the designer surface. We can use the search bar at the top of Toolbox window to search for controls. In android we use TextView as our label control. We can change the properties of the TextView (Text Large) control either using the source view of the designer or using the Properties window. I prefer the Source view to change the properties of the control. To open the Source view of Android designer, select the Source option which is located at the left bottom corner of the designer as shown below (F: 5)
Source view content is as shown below (F: 6).
As we can see in above image, our TextView control is wrapped inside the element called LinearLayout. There are different types of layout like LinearLayout, RelativeLayout, GridLayout and TableLayout which act as a container for different controls like button, lable etc. We can think of LinearLayout as a stack container which can position the controls vertically or horizontally. We can change the orientation of the LinearLayout using android:orientation property. As we can see in the image current orientation is vertical.
Now let`s change the properties of our TextView control. We can change the text of TextView control using the android:text property. As we can see in above image currently it is set to text Large Text. Let`s change it to Hello World.
Now the main two important properties are android:layout_width and android:layout_height. Possible values for these two properties are match_parent or wrap_content. Match_parent means set the views height or width as the parent layout view minus padding. Wrap_content means autosize the view to its own content including padding. Some time instead of match_parent fill_parent is also used. But fill_parent is deprecated so use match_parent.
Now the next step is we need to tie our MainActivity.cs file to our Main.axml file. We can think of Main.axml file as designer file and MainAcitivity.cs file as code behind file. Let`s open up MainActivity.cs file. Content of the MainActivity.cs file are (F: 7):
As we can see in above image, MainActivity class derives from Activity class. Also there is an Activity attribute applied to MainActivity class.
Now to tie the MainActivity.cs file with Main.axml, we just need to uncomment the code at line number 15 as shown in above image. The SetContentView method binds the Main.axml user interface to this activity. Note that we are using Resource class to access the designer file from the layout folder.
Now let`s run the application. To run the application, go to Debug=> Start without Debugging option (Ctrl+F5) . It will first fire up the android emulator and then will deploy our application to that emulator.
Output of our first android app is as shown below (F: 8)
In this article, we talked about how to create a simple android app using Xamarin Android. I hope you enjoyed reading the article.