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.

    Xamarin

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.
  • Xamarin

Step 3

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

  • Xamarin

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 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:background="#d3d3d3"  
  5.     android:layout_height="fill_parent"  
  6.     android:stretchColumns="1">  
  7.     <TableRow>  
  8.         <TextView  
  9.             android:text="First Name"  
  10.             android:layout_height="wrap_content"  
  11.             android:layout_width="wrap_content"  
  12.             android:textColor="@android:color/black" />  
  13.         <EditText  
  14.             android:width="100px"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="30dp"  
  17.             android:textColor="@android:color/black" />  
  18.     </TableRow>  
  19.     <TableRow>  
  20.         <TextView  
  21.             android:text="Last Name"  
  22.             android:layout_height="wrap_content"  
  23.             android:layout_width="wrap_content"  
  24.             android:textColor="@android:color/black" />  
  25.         <EditText  
  26.             android:width="50px"  
  27.             android:layout_width="fill_parent"  
  28.             android:layout_height="30dp"  
  29.             android:textColor="@android:color/black" />  
  30.     </TableRow>  
  31.     <TableRow>  
  32.         <TextView  
  33.             android:text="Salary"  
  34.             android:layout_height="wrap_content"  
  35.             android:layout_width="wrap_content"  
  36.             android:textColor="@android:color/black" />  
  37.         <EditText  
  38.             android:width="100px"  
  39.             android:layout_width="fill_parent"  
  40.             android:layout_height="30dp"  
  41.             android:textColor="@android:color/black" />  
  42.     </TableRow>  
  43.     <TableRow>  
  44.         <TextView  
  45.             android:text="Occupation"  
  46.             android:layout_height="wrap_content"  
  47.             android:layout_width="wrap_content"  
  48.             android:textColor="@android:color/black" />  
  49.         <EditText  
  50.             android:width="50px"  
  51.             android:layout_width="fill_parent"  
  52.             android:layout_height="30dp"  
  53.             android:textColor="@android:color/black" />  
  54.     </TableRow>  
  55.     <TableRow>  
  56.         <Button  
  57.             android:text="Cancel"  
  58.             android:layout_width="wrap_content"  
  59.             android:layout_margin="10dp"  
  60.             android:layout_height="wrap_content"  
  61.             android:background="@android:color/holo_blue_light" />  
  62.         <Button  
  63.             android:text="Submit"  
  64.             android:width="100px"  
  65.             android:layout_margin="10dp"  
  66.             android:layout_height="wrap_content"  
  67.             android:layout_width="wrap_content"  
  68.             android:background="@android:color/holo_blue_bright" />  
  69.     </TableRow>  
  70. </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 

  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4.   
  5. namespace TableLayout  
  6. {  
  7.     [Activity(Label = "TableLayout", MainLauncher = true, Icon = "@drawable/icon")]  
  8.     public class MainActivity : Activity  
  9.     {  
  10.         protected override void OnCreate(Bundle bundle)  
  11.         {  
  12.             base.OnCreate(bundle);  
  13.   
  14.             // Set our view from the "main" layout resource  
  15.              SetContentView (Resource.Layout.Main);  
  16.         }  
  17.     }  
  18. }   

Step 6

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

    Xamarin

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.