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.

 

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

The Designer View TableLayout is given below.

Step 5

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

 

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.

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.

Click Fill the Details `3.

Your TableLayout Android Application is created succesfully.

Conclusion

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