Create A Relative Layout In Xamarin Android 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 a relative layout in 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 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 Solution Explorer. In Solution Explorer, get all the files and sources in your project.

Now, select Resource-->Layout-->double click to open main.axml page. To write the XAML code, you need to select the source.

Choose the Designer Window, if you want to design it, and you can design your app.



Step 4

After opening main.axml, file will open the main page designer. You can design the page, as per you desire.

Now, delete the default Linear layout.



Step 5

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 RelativeLayout.



Step 6

Now, drag and drop the TextView.



Step 7

Now, drag and drop the Plain Text (EditText).



Step 8

Now, drag and drop the Button.



Step 9

Now, drag and drop the Button.



Step 10

Now, go to the properties Window. You need to edit the TextView's Id value and Text value (EX: android:id="@+id/label" android:text="Type Here..").



Step 11

You need to edit the Plain Text (EditText) Id's value (EX: android:id="@+id/entry" ).



Step 12

You need to edit the button's Id value (EX: android:text="Submit" ).



Step 13

You need to edit the button's Id value and Text value (EX: android:id="@+id/ok" android:text="Cancel").



Step 14

In this step, go to the Main.axml page source panel. Note Id values.

Main.axml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:minWidth="25px" android:minHeight="25px">
    <TextView android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Type Here.." />
    <EditText android:id="@+id/entry" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/label" />
    <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="Cancel" />
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Submit" /> </RelativeLayout>

Step 15

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

MainActivity.cs

protected override void OnCreate(Bundle bundle) {
        base.OnCreate(bundle);
        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);
    } // This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

Step 16

If you have Android Virtual device, run the app on it, else connect your Android phone and run the app on 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 a few seconds, the app will start running on your phone.

You will see the relative layout will work successfully.





Summary

This was the process of how to create a relative layout in Xamarin Android app, using Visual Studio 2015.