Introduction

In part one, we had developed the RESTFul API in Node JS and Mongodb. In this article we will consume this RESTFul API in Xamarin.Android.

Client Application

Step 1 - Create a Xamarin Android Project
Open Visual Studio-> New Project-> Templates-> Visual C#-> Android-> Blank app and give the project name XamarinAuth.
(ProjectName: XamarinAuth)
Step 2 - Add NuGet Package
After creating a blank project, first, add Refit NuGet package to this project by right-clicking on References and select manage NuGet packages.
Step 3 - Create Login Layout
Next, open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open activity_main.axml file and add the following code.
(FileName: activity_main.axml)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:orientation="vertical"
  7. android:background="@android:color/white"
  8. android:padding="16dp"
  9. android:layout_margin="16dp"
  10. android:layout_height="match_parent">
  12. <TextView
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:textStyle="bold"
  16. android:text="Login Page"
  17. android:textSize="25sp"
  18. android:textAlignment="center"
  19. android:textColor="@color/colorPrimary"/>
  20. <EditText
  21. android:layout_width="match_parent"
  22. android:layout_height="wrap_content"
  23. android:hint="Email"
  24. android:inputType="textEmailAddress"
  25. android:id="@+id/edt_email"/>
  26. <EditText
  27. android:layout_width="match_parent"
  28. android:layout_height="wrap_content"
  29. android:hint="Password"
  30. android:inputType="textPassword"
  31. android:id="@+id/edt_password"/>
  32. <LinearLayout
  33. android:orientation="horizontal"
  34. android:layout_width="match_parent"
  35. android:layout_height="wrap_content"
  36. android:weightSum="2">
  38. <Button
  39. android:layout_width="0dp"
  40. android:layout_height="wrap_content"
  41. android:layout_weight="1"
  42. android:hint="Login"
  43. android:id="@+id/btn_login"
  44. android:layout_marginTop="15dp"/>
  46. <Button
  47. android:layout_width="0dp"
  48. android:layout_height="wrap_content"
  49. android:layout_weight="1"
  50. android:hint="Register"
  51. android:id="@+id/btn_registeration"
  52. android:layout_marginTop="15dp"/>
  53. </LinearLayout>
  55. </LinearLayout>
Step 3 - Create Registration Layout
Add a new layout by going to Solution Explorer-> Project Name-> Resources-> Layout. Right click to add a new item, select layout, and give it the name activity_register.
Open this layout file and add the following code.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:orientation="vertical"
  7. android:background="@android:color/white"
  8. android:padding="16dp"
  9. android:layout_margin="16dp"
  10. android:layout_height="match_parent">
  12. <TextView
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:textStyle="bold"
  16. android:text="Register Page"
  17. android:textSize="25sp"
  18. android:textAlignment="center"
  19. android:textColor="@color/colorPrimary"/>
  20. <EditText
  21. android:layout_width="match_parent"
  22. android:layout_height="wrap_content"
  23. android:hint="First Name"
  24. android:inputType="text"
  25. android:id="@+id/edt_fname"/>
  26. <EditText
  27. android:layout_width="match_parent"
  28. android:layout_height="wrap_content"
  29. android:hint="Last Name"
  30. android:inputType="text"
  31. android:id="@+id/edt_lname"/>
  32. <EditText
  33. android:layout_width="match_parent"
  34. android:layout_height="wrap_content"
  35. android:hint="Mobile"
  36. android:inputType="text"
  37. android:id="@+id/edt_mobile"/>
  38. <EditText
  39. android:layout_width="match_parent"
  40. android:layout_height="wrap_content"
  41. android:hint="Email"
  42. android:inputType="textEmailAddress"
  43. android:id="@+id/edt_email"/>
  44. <EditText
  45. android:layout_width="match_parent"
  46. android:layout_height="wrap_content"
  47. android:hint="Password"
  48. android:inputType="textPassword"
  49. android:id="@+id/edt_password"/>
  50. <LinearLayout
  51. android:orientation="horizontal"
  52. android:layout_width="match_parent"
  53. android:layout_height="wrap_content"
  54. android:weightSum="2">
  56. <Button
  57. android:layout_width="0dp"
  58. android:layout_height="wrap_content"
  59. android:layout_weight="1"
  60. android:hint="Register"
  61. android:id="@+id/btn_register"
  62. android:layout_marginTop="15dp"/>
  64. <Button
  65. android:layout_width="0dp"
  66. android:layout_height="wrap_content"
  67. android:layout_weight="1"
  68. android:hint="Cancel"
  69. android:id="@+id/btn_cancel"
  70. android:layout_marginTop="15dp"/>
  71. </LinearLayout>
  73. </LinearLayout>
Step 4 - Create Dashboard Layout
Similarly add a new layout by going to Solution Explorer-> Project Name-> Resources-> Layout. Right click to add a new item, select layout, and give it the name activity_dashboard. Open this layout file and add the following code.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  7. <TextView
  8. android:layout_marginTop="20dp"
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:textStyle="bold"
  12. android:text="Welcome To Dashboard"
  13. android:textSize="25sp"
  14. android:textAlignment="center"
  15. android:textColor="@color/colorPrimary"/>
  17. <Button
  18. android:layout_marginLeft="120dp"
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. android:hint="Back To Home"
  22. android:id="@+id/btn_cancel"
  23. android:layout_marginTop="30dp"/>
  24. </LinearLayout>
Step 5 - Create User Model Class
Add a new class to your project with the name User.cs. Add the following properties to getter and setter with an appropriate namespace.
  1. public class User
  2. {
  3. public string FirstName { get; set; }
  4. public string LastName { get; set; }
  5. public string Email { get; set; }
  6. public string Password { get; set; }
  7. public string Mobile { get; set; }
  8. }
Step 6 - Create Register Activity
Add a new Activity. For this, open Solution Explorer-> Project Name-> right click to add a new item and select Activity. Give it a name like RegisterActivity and add the following code, using the appropriate namespaces.
(FileName: RegisterActivity)
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using Android.App;
  6. using Android.Content;
  7. using Android.OS;
  8. using Android.Runtime;
  9. using Android.Views;
  10. using Android.Widget;
  11. using XamarinAuth.API;
  12. using XamarinAuth.Model;
  13. using Refit;
  15. namespace XamarinAuth.Activities
  16. {
  17. [Activity(Label = "RegisterActivity")]
  18. public class RegisterActivity : Activity
  19. {
  20. IAPI _aPI;
  21. Button btn_register, btn_cancel;
  22. EditText edt_Email, edt_Password, edt_fname, edt_lname, edt_mobile;
  23. protected override void OnCreate(Bundle savedInstanceState)
  24. {
  25. base.OnCreate(savedInstanceState);
  26. SetContentView(Resource.Layout.activity_register);
  27. // Create your application here
  28. _aPI = RestService.For<IAPI>("http://10.0.2.2:3000");
  30. var connection = new RestAPI(this, _aPI);
  32. btn_register = FindViewById<Button>(Resource.Id.btn_register);
  33. btn_cancel= FindViewById<Button>(Resource.Id.btn_cancel);
  34. edt_lname = FindViewById<EditText>(Resource.Id.edt_lname);
  35. edt_mobile = FindViewById<EditText>(Resource.Id.edt_mobile);
  36. edt_fname = FindViewById<EditText>(Resource.Id.edt_fname);
  37. edt_Email = FindViewById<EditText>(Resource.Id.edt_email);
  38. edt_Password = FindViewById<EditText>(Resource.Id.edt_password);
  40. btn_cancel.Click += delegate { StartActivity(typeof(MainActivity)); };
  41. btn_register.Click += async delegate
  42. {
  43. var user = new User
  44. {
  45. FirstName = edt_fname.Text.ToString(),
  46. LastName = edt_lname.Text.ToString(),
  47. Mobile = edt_mobile.Text.ToString(),
  48. Email = edt_Email.Text.ToString(),
  49. Password = edt_Password.Text.ToString(),
  50. };
  51. var result = await connection.RegisterUserAsync(user);
  52. if(result == true)
  53. {
  54. StartActivity(typeof(MainActivity));
  55. }
  56. };
  57. }
  58. }
  59. }
Step 7 - Create Dashboard Activity
Add a new Activity. For this, open Solution Explorer-> Project Name-> right click to add a new item and select Activity. Give it a name like DashboardActivity and add the following code, using the appropriate namespaces.
(FileName: DashboardActivity)
  1. using Android.App;
  2. using Android.OS;
  3. using Android.Widget;
  5. namespace XamarinAuth.Activities
  6. {
  7. [Activity(Label = "DashboardActivity")]
  8. public class DashboardActivity : Activity
  9. {
  10. Button btn_backToHome;
  11. protected override void OnCreate(Bundle savedInstanceState)
  12. {
  13. base.OnCreate(savedInstanceState);
  14. SetContentView(Resource.Layout.activity_dashboard);
  15. // Create your application here
  16. btn_backToHome = FindViewById<Button>(Resource.Id.btn_cancel);
  18. btn_backToHome.Click += delegate
  19. {
  20. StartActivity(typeof(MainActivity));
  21. };
  22. }
  23. }
  24. }
Step 8 - Add API Interface
Before you go further, you need to write your IAPI class with all the getter and setter methods. For this, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like IAPI.cs and write the following code.
(File Name: IAPI.cs)
  1. using Refit;
  2. using System.Collections.Generic;
  3. using System.Threading.Tasks;
  5. namespace XamarinAuth.API
  6. {
  7. public interface IAPI
  8. {
  9. [Post("/login")]
  10. Task<string> SignIn([Body(BodySerializationMethod.UrlEncoded)] Dictionary<string, object> data);
  11. [Post("/register")]
  12. Task<string> SignUp([Body(BodySerializationMethod.UrlEncoded)] Dictionary<string, object> data);
  13. }
  14. }
Step 9 - Add RestAPI Class
Before you go further, you need to write your RestAPI class with all the getter and setter methods. For this, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like RestAPI.cs and write the following code.
(File Name: RestAPI.cs)
  1. using Android.Content;
  2. using Android.Widget;
  3. using XamarinAuth.Model;
  4. using System;
  5. using System.Collections.Generic;
  6. using System.Threading.Tasks;
  8. namespace XamarinAuth.API
  9. {
  10. public class RestAPI
  11. {
  12. IAPI _aPI;
  13. Context _context;
  14. public RestAPI(Context context, IAPI aPI)
  15. {
  16. _aPI = aPI;
  17. _context = context;
  18. }
  19. public async Task<bool> RegisterUserAsync(User user)
  20. {
  21. if (String.IsNullOrEmpty(user.FirstName))
  22. {
  23. Toast.MakeText(_context, "FirstName can not be null or empty!", ToastLength.Short).Show();
  24. return false;
  25. }
  26. if (String.IsNullOrEmpty(user.LastName))
  27. {
  28. Toast.MakeText(_context, "LastName can not be null or empty!", ToastLength.Short).Show();
  29. return false;
  30. }
  31. if (String.IsNullOrEmpty(user.Email))
  32. {
  33. Toast.MakeText(_context, "Email can not be null or empty!", ToastLength.Short).Show();
  34. return false;
  35. }
  36. if (String.IsNullOrEmpty(user.Mobile))
  37. {
  38. Toast.MakeText(_context, "Mobile Number can not be null or empty!", ToastLength.Short).Show();
  39. return false;
  40. }
  41. if (String.IsNullOrEmpty(user.Password))
  42. {
  43. Toast.MakeText(_context, "Password can not be null or empty!", ToastLength.Short).Show();
  44. return false;
  45. }
  47. Dictionary<string, object> data = new Dictionary<string, object>();
  48. data.Add("firstname", user.FirstName);
  49. data.Add("lastname", user.LastName);
  50. data.Add("email", user.Email);
  51. data.Add("mobile", user.Mobile);
  52. data.Add("password", user.Password);
  54. var result = await _aPI.SignUp(data);
  55. Toast.MakeText(_context, result, ToastLength.Short).Show();
  56. return true;
  57. }
  59. public async Task<bool> SignInUserAsync(User user)
  60. {
  61. if (String.IsNullOrEmpty(user.Email))
  62. {
  63. Toast.MakeText(_context, "Email can not be null or empty!", ToastLength.Short).Show();
  64. return false;
  65. }
  66. if (String.IsNullOrEmpty(user.Password))
  67. {
  68. Toast.MakeText(_context, "Password can not be null or empty!", ToastLength.Short).Show();
  69. return false;
  70. }
  72. Dictionary<string, object> data = new Dictionary<string, object>();
  73. data.Add("email", user.Email);
  74. data.Add("password", user.Password);
  75. var result = await _aPI.SignIn(data);
  76. Toast.MakeText(_context, result, ToastLength.Short).Show();
  77. return true;
  78. }
  79. }
  80. }
Step 10 - Main Activity Class
Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code to main activity with appropriate namespaces.
(FileName: MainActivity)
  1. using Android.App;
  2. using Android.OS;
  3. using Android.Runtime;
  4. using Android.Support.V7.App;
  5. using Android.Widget;
  6. using XamarinAuth.Activities;
  7. using XamarinAuth.API;
  8. using XamarinAuth.Model;
  9. using Refit;
  11. namespace XamarinAuth
  12. {
  13. [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
  14. public class MainActivity : AppCompatActivity
  15. {
  16. IAPI _aPI;
  17. RestAPI _restApi;
  18. Button btn_Signin, btn_registeration;
  19. EditText edt_Email, edt_Password;
  20. protected override void OnCreate(Bundle savedInstanceState)
  21. {
  22. base.OnCreate(savedInstanceState);
  23. Xamarin.Essentials.Platform.Init(this, savedInstanceState);
  24. // Set our view from the "main" layout resource
  25. SetContentView(Resource.Layout.activity_main);
  26. _aPI = RestService.For<IAPI>("http://10.0.2.2:3000");
  28. var connection = new RestAPI(this, _aPI);
  30. btn_registeration = FindViewById<Button>(Resource.Id.btn_registeration);
  31. btn_Signin = FindViewById<Button>(Resource.Id.btn_login);
  32. edt_Email = FindViewById<EditText>(Resource.Id.edt_email);
  33. edt_Password = FindViewById<EditText>(Resource.Id.edt_password);
  35. btn_Signin.Click += async delegate
  36. {
  37. var user = new User
  38. {
  39. Email = edt_Email.Text.ToString(),
  40. Password = edt_Password.Text.ToString()
  41. };
  42. var result = await connection.SignInUserAsync(user);
  43. if(result == true)
  44. {
  45. StartActivity(typeof(DashboardActivity));
  46. }
  47. };
  49. btn_registeration.Click += delegate
  50. {
  51. StartActivity(typeof(RegisterActivity));
  52. };
  53. }
  54. public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
  55. {
  56. Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
  57. base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
  58. }
  59. }
  60. }
Step 11 - Permissions From Device
We need permission from the device because we can use the device’s INTERNET. Please add internet permission to your AndroidManifest.xml. Let's open Solution Explorer-> Properties-> AndroidManifest and let's add the code inside application tags.
  1. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  2. <uses-permission android:name="android.permission.INTERNET" />
User Login Testing
User Register Testing