Add Login Screen to Xamarin Android App using Visual Studio

Today we discuss how to create a login screen for the Android application. Open Microsoft Visual Studio 2017, create a new Android application and name it as AndroidLoginApp.

Delete Main.axml form from Resources/layout folder and MainActivity.cs class from the project. Right-click on the layout folder, select Add  New Item. Select Android Layout, name it as Login.axml and add.

Add two text views and one button as shown below.

Set text views Id’s as txtUserName, txtPassword and loginBtn to button. Set two text views text property to “User Name” & “Password” and button text to Login. For Password text view, set Input Type property to textPassword as shown below.

Login.axml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

  <TextView

      android:text="User Name"

      android:layout_width="match_parent"

      android:layout_height="wrap_content"

      android:id="@+id/txtUserName" />

 

  <TextView

      android:text="Password"

      android:layout_width="match_parent"

      android:layout_height="wrap_content"

      android:id="@+id/txtPassword"

      android:inputType="textPassword" />

 

  <Button

      android:text="Login"

      android:layout_width="match_parent"

      android:layout_height="wrap_content"

      android:id="@+id/loginBtn" />

 

 </LinearLayout> 

Add LoginActivity.cs class on the root of the project. Change LoginActivity.cs class code as below.

using Android.App;

using Android.OS;

using Android.Widget;

using System; 

namespace AndroidLoginApp

{

    [Activity(Label = "AndroidLoginApp", MainLauncher = true, Icon = "@drawable/icon")]

    public class LoginActivity : Activity

    {

        TextView txtUserName, txtPassWord;

        protected override void OnCreate(Bundle bundle)

        {

            base.OnCreate(bundle); 

            // Set our view from the "main" layout resource

            SetContentView(Resource.Layout.Login); 

            txtUserName = FindViewById<TextView>(Resource.Id.txtUserName);

            txtPassWord = FindViewById<TextView>(Resource.Id.txtPassword);

            Button loginBtn = FindViewById<Button>(Resource.Id.loginBtn); 

            loginBtn.Click += OnLogin;

        } 

        async void OnLogin(object sender, EventArgs e)

        {

            string sUserName = txtUserName.Text;

            string sPassword = txtPassWord.Text;

            //Pass this username and password to database for validation

        }

    }

}

As shown above, we set the MainLauncher property to true to make Login screen as the start of the app. Now run the application and output displays as shown below.