Designing Login System UI In Xamarin Android App

Xamarin is a cross-platform tool used to develop applications for Android, Windows, and iOS . Today, designing is really easy for every developer who has a little knowledge of a little bit of programming and front-end. So, here is the simple User Interface design for Login System. Here, I will show how to create a login system in Android using Xamarin in Visual Studio RC 2017.

Requirements

• Visual Studio RC 2017.
• Xamarin Studio packages should be installed.
• Self confidence with creativity.

Steps to be followed

Please follow the following steps to create Login System User Interface Design.

Step 1

Launch Visual Studio RC 2017 and go to File >>New >> Project.

Step 2

Then, you need to select the Android template from the list, name the Application, set location, and click "OK".

 

Step 3

Here we go! Our new project has been created. Now, we need to navigate to Designer page. To open the designer page, you need to open Solution Explorer from View >> Solution Explorer.

Step 4

Then, to open Designer page, select the following.

Solution Explorer >> Resources >> Layout >> Main.axml.

 

 

Step 5

Add the following code in Main.axml source page and then, open and view the Designer page.

<?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"
    android:background="@android:color/background_light">
        <TextView
            android:text="Create An Account"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/textView1"
            android:layout_weight="1"
            android:background="@android:color/darker_gray"
            android:textStyle="bold"
            android:textSize="25sp"
            android:gravity="center" />
        <Button
            android:text="Sign IN"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/button1"
            android:layout_weight="1"
            android:textSize="25sp"
            android:background="@android:color/holo_blue_light" />
        <TextView
            android:text="OR"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/textView2"
            android:layout_weight="1"
            android:background="@android:color/darker_gray"
            android:textSize="25sp"
            android:textColor="@android:color/background_light"
            android:gravity="center" />
        <Button
            android:text="Sign Up"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/button2"
            android:layout_weight="1"
            android:textSize="30sp"
            android:background="@android:color/holo_blue_dark" />
    </LinearLayout>

Step 6

Now, run the app using Visual Studio Android Emulator and press the green "Start" button in Debug menu. Our app gets executed successfully.

Note - Select which version of Android you want to run the app on.

 

 

Output

The following will be the output of our Login System app. 

If you have any doubts, please comment below. I will continue the next article about "Customizing the buttons in this Login System Design." If you are interested in Xamarin Android Development, follow my profile to get updates.

 

Thank you for reading !!