Xamarin.Android - TableLayout View Using Visual Studio 2017

What is Xamarin and Xamarin Forms?

Xamarin is a cross-platform to develop multi-platform Applications.
Xamarin is a Shared code(C#), But Separately Design UIs Android (Java), Windows (C#), iOS (Objective C & Xcode).
Xamarin forms UIs & shared code (C#) are same in all the projects. To develop multi-platforms Applications and run all the projects (Android, Windows, iOS) at the same time.

Prerequisites

Visual Studio 2017 Enterprise

The steps given below are required to be followed in order to design TableLayout View in Xamarin Android, using Microsoft Visual Studio 2017.

Step 1

Go to the Visual Studio 2017.
Click File -> New -> Project.

Step 2

In this step, click C# -> Android -> Blank App (Android).
Enter the Application name, followed by clicking Blank App = A project for creating a Xamarin.Android Application.

Step 3

Afterwards, go to Open Solution Explorer Window and click Resources Folder, followed by clicking Layout Folder -> Open axml.

Step 4

TableLayout View

In this step, go to Click Main.axml page, insert the code given below in Main.axml and save it.

Xamarin

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="#d3d3d3"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="First Name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="@android:color/black" />
<EditText
android:width="100px"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:textColor="@android:color/black" />
</TableRow>
<TableRow>
<TextView
android:text="Last Name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="@android:color/black" />
<EditText
android:width="50px"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:textColor="@android:color/black" />
</TableRow>
<TableRow>
<TextView
android:text="Salary"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="@android:color/black" />
<EditText
android:width="100px"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:textColor="@android:color/black" />
</TableRow>
<TableRow>
<TextView
android:text="Occupation"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="@android:color/black" />
<EditText
android:width="50px"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:textColor="@android:color/black" />
</TableRow>
<TableRow>
<Button
android:text="Cancel"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light" />
<Button
android:text="Submit"
android:width="100px"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@android:color/holo_blue_bright" />
</TableRow>
</TableLayout>

Go to Click Main.axml Page Designer View, wait for a few minutes and Designer View is visible.

Xamarin

The Designer View TableLayout is given below.

Xamarin

Step 5

In this step, go to Click MainActivity.cs Page, insert the code given below in MainActivity.cs and save it.

Xamarin

using Android.App;
using Android.Widget;
using Android.OS;
namespace TableLayout
{
[Activity(Label = "TableLayout", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
}
}
}

Step 6

Click Build menu, followed by selecting Configuration Manager.
Configure your Android Application to depoly & build setting, followed by clicking Close.

Step 7

In this step, select Build & Depolyoption, followed by clicking to start your Application.

Now, go to Run option, choose Debug, select any one of the Simulators and run it.

Xamarin

Step 8

Output

After a few seconds, the app will start running at your Android Simulator. You will see your app working & it got created successfully.

Xamarin

Click Fill the Details `3.

Xamarin

Your TableLayout Android Application is created succesfully.

Conclusion

Thus, we learned how to create TableLayout Android Application, using Visual Studio 2017.