Create An Absolute Layout In Xamarin Andorid App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.
Prerequisites
  • Visual Studio 2015 Update 3.
The steps, given below are required to be followed in order to create an Absolute Layout in the Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).
 


Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android). Now, give your Android app a name (Ex:sample) and give the path of your project. Afterwards, click OK.
 
 

Step 3

Now, go to the Solution Explorer. In the Solution Explorer, get all the files and sources in your project. Now, select Resource-->Layout-->double click to open main.axml page. If you want to select the source to write XAML code, you need to choose the Designer Window and you can design your app.
 


Step 4

Afterwards, open the main.axml and file will open the main page designer. You can design the page, as per your desire.



Now, delete the default Linear Layout. 
 
Step 5

In this step, go to Main.axml page source. Write the Absolute Layout code, mentioned below.

Main.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">  
  3. </AbsoluteLayout>  


Step 6

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls. You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls. You need to drag and drop the two TextViews.



Step 7

Now, drag and drop the Button.

 

Step 8

Now, go to the properties Window. You need to edit the First TextView properties' values.



Step 9

You need to edit the first Button properties' values.

 

Step 10

You need to edit the second TextView properties' values.

 

Step 11

You need to edit the second Button's properties' values.

 

Step 12

In this step, go to the Main.axml page source panel.Check the code given below.

Main.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">  
  3.     <TextView android:text="Xamarin Android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_x="50dp" android:layout_y="30dp" android:id="@+id/textView1" />  
  4.     <Button android:text="Submit" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_x="90dp" android:layout_y="120dp" android:id="@+id/button1" />  
  5.     <TextView android:text="Xamarin Android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_x="10dp" android:layout_y="200dp" android:id="@+id/textView2" />  
  6.     <Button android:text="Submit" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_x="40dp" android:layout_y="280dp" android:id="@+id/button2" />  
  7. </AbsoluteLayout>  
 
 
Step 13

In this step, go to the MainActivity.cs page, Write the code, mentioned below between OnCreate() Method.

MainActivity.cs
  1. protected override void OnCreate(Bundle bundle)  
  2. {  
  3.     base.OnCreate(bundle);  
  4.     SetContentView(Resource.Layout.Main);  
  5. }   
 

Step 14

If you have an Android Virtual device, run the app on it, otherwise, connect your Android phone and run the app in it. Simply connect your phone and go to Visual Studio. The connected phone will show up in the Run menu (Ex:LENOVO A6020a40 (Android 5.1-API 22)). Click Run option.



Output

After few seconds, the app will start running on your phone. You will see Absolute Layout is working successfully.



Summary

This was the process of how to create an Absolute Layout in Xamarin Android app, using Visual Studio 2015.


Similar Articles