Login And Registration Functionality In Xamarin.Android

Basic Introduction

Let’s first establish what the purpose of the code is in the first place. For this article, the purpose of the code is to create a Login & Registration functionality in Xamarin.Android. I will divide this article into three phases.

In the first phase, we will discuss "How to implement login functionality in Xamarin.Android".
In the second phase, we will discuss "How to integrate services for login & registration functionality by using WEB API".
In the third phase, we will discuss "How to implement registration functionality in Xamarin.Android".

So here, I go to highlight some points.

First of all, we create an empty Android project in Visual Studio 2017.
Then, we design a simple login form.
After that, we call (integrate) login service (which is created using web API (which is created in .NET MVC) and I also explained how to create it in my phase two).
We call (integrate) login service by using "RestSharp" (RestSharp is an open-source HTTP client library that works with all kinds of .NET technologies). You can learn more about RestSharp by using the following link. http://restsharp.org

STEP 01 - Create a new blank app (Android) project.

On the File menu, click "New Project".
In the New Project dialog box, under Installed, expand Visual C#, and then click on Android, then select Blank App (Android). In the Name box, type "AuthXamDroid" and click OK.

STEP 02 - Add a new activity & layout for login screen.

Add a new Activity named as "LoginActivity". Right click on "AuthXamDroid" then click on "Add" and click on "New Item...".
In "Add New Item" popup, select "Activity" and name it as "LoginActivity". Click "Add".
Same as add a new Layout in "layout folder" under "Resources folder" name it as "Login.axml".
Now design the login screen.

For Login screen design I already created some images in png format. So download below file and paste these images on your "Resources" folder.

I created design resources respective to all size devices like hdpi/mdpi/xhdpi/xxhdpi/xxxhdpi

You can find all the design from the attached document of code.

@Thanks to my designer "Ankit Kanojia" who helps me for create such a beautiful login screen design.
Now, you can see our login screen which have default android theme.

So, first we create our custom theme. For creating a custom theme we need to add "Android Support Design Library". For this right click on "Components" and select "Get More Components..."
Now search "Design Library" in searchbox and select "Android Support Design Library" from result.

Note
You need to login with your xamarin account for gettting more components.
Then click on "Add to App" for install the "Android Support Design Library".
Its time to create a custom theme. Create a "styles.xml" in "Values folder" which is under the "Resources folder". After creating style.xml paste the below code in your "styles.xml"
1. <?xml version="1.0" encoding="utf-8" ?>
2. <resources>
3. <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
4. </style>
5. <style name="MyTheme" parent="MyTheme.Base">
6. </style>
7. 
8. <style name="MyTheme.Login" parent="Theme.AppCompat.Light.NoActionBar">
9. <item name="android:windowNoTitle">true</item><item name="android:windowFullscreen">true</item>
10. </style>
11. 
12. <style name="EditTextWhite" parent="MyTheme.Login">
13. <item name="colorControlNormal">@color/white</item><item name="colorControlActivated">@color/white</item><item name="colorControlHighlight">@color/white</item>< !--<item name="android:textColorHint">@color/white</item>--><item name="android:textColor">@color/white</item>
14. </style>
15. </resources>
For login screen design Paste below code in your Login.axml file
1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
3. <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
4. <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/login_top">
5. <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_margin="30dp">
6. <EditText android:id="@+id/txtEmail" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Email" android:theme="@style/EditTextWhite" android:inputType="textEmailAddress" android:drawableLeft="@drawable/ic_lock" />
7. <EditText android:id="@+id/txtPassword" android:layout_marginTop="40dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:theme="@style/EditTextWhite" android:inputType="textPassword" android:drawableLeft="@drawable/ic_key" /> </LinearLayout>
8. </FrameLayout>
9. <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/login_bottom">
10. <android.support.design.widget.FloatingActionButton android:id="@+id/btnLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" android:layout_marginStart="40dp" app:backgroundTint="#003157" app:srcCompat="@drawable/ic_right_arrow" /> </FrameLayout>
11. </LinearLayout>
12. </RelativeLayout>
Now, currently default "MainLauncher" is enable on "MainActivity" so we need to change "MainLauncher" to our "LoginActivity" so that we can set default screen as our "Login Screen". So add below line in your "LoginActivity".
1. [Activity(Theme = "@style/MyTheme.Login", MainLauncher = true, Icon = "@mipmap/ic_launcher")]
2. public class LoginActivity: Activity {
3. protected override void OnCreate(Bundle savedInstanceState) {
4. base.OnCreate(savedInstanceState);
5. //Set layout content
6. SetContentView(Resource.Layout.Login);
7. }
8. }

Theme = "@style/MyTheme.Login" ==> We can set our custom style which is created earlier

MainLauncher = true ==> We can set the default screen as "Login Screen"

Icon = "@mipmap/ic_launcher" ==> Set our custom luncher icon

Run the application so that you can see the below LOGIN SCREEN.

Now, get the value from Email & Password edittext and validate it.

//Get email & password values from edit text

var email = FindViewById<EditText>(Resource.Id.txtEmail);

var password = FindViewById<EditText>(Resource.Id.txtPassword);
Paste the below code to Login Activity.
NOTE
WE ARE CURRRENTLY GOING TO ADD STATIC CODE IN MY PHASE () TWO I WILL CHANGE THIS CODE TO DYNAMIC BECAUSE FOR DYNAMIC CODE WE NEED TO CRAETE WEB API FOR SAME
1. public class LoginActivity: Activity {
2. EditText email;
3. EditText password;
4. protected override void OnCreate(Bundle savedInstanceState) {
5. base.OnCreate(savedInstanceState);
6. SetContentView(Resource.Layout.Login);
7. //Get email & password values from edit text
8. email = FindViewById < EditText > (Resource.Id.txtEmail);
9. password = FindViewById < EditText > (Resource.Id.txtPassword);
10. //Trigger click event of Login Button
11. var button = FindViewById < FloatingActionButton > (Resource.Id.btnLogin);
12. button.Click += DoLogin;
13. }
14. public void DoLogin(object sender, EventArgs e) {
15. //NOTE: WE ARE CURRRENTLY GOING TO ADD STATIC CODE
16. //IN MY PHASE () TWO I WILL CHANGE THIS CODE TO DYNAMIC
17. //BECAUSE FOR DYNAMIC CODE WE NEED TO CRAETE WEB API FOR SAME
18. //STATIC CODE FOR PHASE ONE ONLY. WE WILL CHANGE IT TO DYNAMIX IN PHASE TWO
19. if (email.Text == "****@gmail.com" && password.Text == "12345") {
20. Toast.MakeText(this, "Login successfully done!", ToastLength.Long).Show();
21. StartActivity(typeof(MainActivity));
22. } else {
23. //Toast.makeText(getActivity(), "Wrong credentials found!", Toast.LENGTH_LONG).show();
24. Toast.MakeText(this, "Wrong credentials found!", ToastLength.Long).Show();
25. }
26. }
27. }
We are finished.

7 Comments

Join the conversation! Your thoughts help the community grow.

Dr.Khalid Waleed5y ago
Hi Ankit this solution (your code) not work because has old version of xamarin and needs to remove some of references as xamarin request, we hope to update it
Eladji Amadou7y ago
Hello Ankit, is there a way I can get help for the part 2 and 3 of your post? Thank you!
Eladji Amadou7y ago
Hello Ankit,
Sai Sudhakar Paluri8y ago
Please share us the phase 2
Akhilesh Akolkar8y ago
Sir where is the phase two can you share it with me
siva prasad8y ago
Its good practice thanks
Sagar Pandurang Kap8y ago
Superb atuff.Very nice..