Xamarin.Forms: Demo Application – Part 1 – Login Screen

Posted on Wed 28th Jul 2021 21:56

Modified on Fri 30th Jul 2021 18:50


I recently had some time to refamiliarize myself with Xamarin.Forms (XF). I thought it would be a good idea to build a proof-of-concept (or demo) of what I think of as a typical corporate app’. For me the typical app’ would have a login screen and a main screen. The main screen would display a list (or table) of data with actions you can take. The navigation would be a slide-out menu, tabs and pop-up screens.

I’m writing this demo for practice so I thought I’d share it here.

In part one I’m going to be building the splash screen and login screen. We’ll also take the opportunity to make some provisions for the rest of the app’. The code isn’t final and would likely be changed in future parts.

The source code is linked at the bottom (as usual). I put together only the Android project as I don’t have an iOS device at the moment. And we don’t talk about UWP (shhh!).

Alright, let’s get started.
 

Wireframes
I put together some wireframes for the screens. I’ll explain what I’m doing with each one.

       

From left-to-right:

  1. Splash screen
  2. Login screen
  3. Password Reset screen
  4. Password Reset Confirmation screen
  5. Information screen

 

1. Splash screen

 
The splash screen is a little different for Android and iOS. The solution is Android-only because I don’t have an iOS device but I’ll see if I can’t do something about that in the next part.

For Android, the splash screen isn’t XF. The way I do it is to setup two themes: one with a background (company logo) and one without. Then we run the application using the background-theme as default. Once the application is running we switch themes and load the App or Shell. This gives us the classic splash screen look.

 

2. Login screen

 
This screen has three parts:

  • Header (with company logo)
  • Carousel (side-scrolling slides)
  • Footer (carousel indicator dots at the bottom)

The “login”, “password-reset” and “information” screens are actually slides inside the carousel. You can also achieve this with tabs or buttons.

The app’ will have a back-end API service (for logging in), this demo uses a mock service.

I have a straight-forward asynchronous busy-wait pattern setup. When the user is logging in, a spinner animation starts and all the input elements are disabled. The app’ isn’t locked-up but it stops the user from editing text-boxes or pressing the button again.

 

3. Password Reset screens 1

 
This screen makes a request to the mock service to reset a password.

 

4. Password Reset screens 2

 
If that comes back as successful, the app loads a confirmation screen to end that user journey.

 

5. Information screen

 
This screen is just a scrollable area with text.

It isn’t implemented in this demo but the copy could be loaded from the back-end service.

 

Well, that’s part one.

I hope someone finds this interesting or useful.
 

Code Repository

Copyright © 2014-2021 Ray Lam. All Rights Reserved.