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.
I put together some wireframes for the screens. I’ll explain what I’m doing with each one.
1. Splash screen
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
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
4. Password Reset screens 2
5. Information screen
Well, that’s part one.
I hope someone finds this interesting or useful.
Copyright © 2014-2021 Ray Lam. All Rights Reserved.