Create TableLayout 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 an Table Layout in the Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> New--> Project, or press Ctrl+Shift+N.

Xamarin

Step 2

After opening the new project, select Installed -->Templates --> Visual C# --> Android --> Blank App (Android).

Now, give your Android app a name (Ex:sample) and give the path of your project. Afterwards, click OK.

Xamarin

Step 3

Next go to the Solution Explorer. Select Resource --> Layout --> double click to open the Main.axml page.

Xamarin

Step 4

Opening Main.axml file will open the main page designer. In this page, select the mode of designing (either Source or Designer) as per your choice.

Next, delete the default "Linear Layout".

Xamarin

Step 5

Now, go to the Toolbox window and scroll down to see all the tools and controls. You need to drag and drop the TableLayout.

Xamarin

Step 6

Now, drag and drop the TextView.

Xamarin

Step 7

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

Xamarin

Step 8

Now, drag and drop the Button.

Xamarin

Step 9

Now, go to the Properties window. You need to edit the TextView Id Value and Text Value (EX android:text="UserName" android:id="@+id/username").

Xamarin

Step 10

You need to edit another TextView Id Value and Text value (EX android:text="Password"android:id="@+id/password" ).

Xamarin

Step 11

Edit the Button Id Value and Text Value (EX android:text="Sigin" android:id="@+id/button1" ).

Xamarin

Step 12

In this step, go to the Main.axml page Source Panel. Check the following code.

Main.axml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tableLayout1" android:stretchColumns="*">
<TableRow android:id="@+id/tableRow1" android:layout_span="2">
<TextView android:text="UserName" android:layout_column="0" android:id="@+id/username" />
<EditText android:layout_column="1" android:id="@+id/editText1" /> </TableRow>
<TableRow android:id="@+id/tableRow2" android:layout_span="2">
<TextView android:text="Password" android:layout_column="0" android:id="@+id/password" />
<EditText android:layout_column="1" android:id="@+id/editText2" /> </TableRow>
<TableRow android:layout_columnSpan="3" android:id="@+id/tableRow3">
<Button android:text="Sigin" android:layout_column="0" android:id="@+id/button1" /> </TableRow>
</TableLayout>

Step 13

In this step, go to the MainActivity.cs page. Write the following code in OnCreate() Method.

MainActivity.cs

protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
}

Step 14

If you have Android Virtual device, run the app on it. Else, connect your Android phone and run the app in that. 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 the Run option.

Output

After a few seconds, the app will start running on your phone.

You will see the Table Layout is working successfully.

Xamarin

Summary

So, this was the process of how to create TableLayout in Xamarin Android app, using Visual Studio 2015.