Hi, I'm Ray

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

Programming Xamarin.Forms

Posted on Wed 28th Jul 2021 and modified on Sat 12th Mar 2022

 Share Tweet

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.

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