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

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:

Splash screen
Login screen
Password Reset screen
Password Reset Confirmation screen
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