A quick tour flow allows you to understand what’s an application about and how it works before using it. The most common way is by creating an Onboarding screen (Which is an independent screen that shows some instructive images on how to use the application), but that’s not the only way to do this.
In this article, I’m going to show you how to create an interactive quick tour onboarding flow in Xamarin Forms.
Let’s start
First, you need to identify which parts of the app need more explanation. As an example, I did a simple home screen with a few options.
For my quick tour, I’m going to show how the user information card works, and how to add items to the TODO list.
You can check the XAML of this page, here.
I will divide the quick tour into 3 steps
- Step 1: Welcome message
- Step 2: How to add a TODO item
- Step 3: Information card
Let’s do it step by step
To achieve it will use a sequence that will display a popup for each step.
1. Install the Rg.Plugins.PopUp
Install Rg.Plugins.Popup which allows you to show Xamarin.Forms pages as a popup.
NOTE: I’m using this plugin instead of the XamarinCommunityToolkit, because at the moment I wrote this article the toolkit does not support the background color change, and I want a transparent blue color instead of the default dark gray.
2. Create a base UI
Each step will have a common footer that shows a Skip button, an actual Step indicator, and a Next button.
Use a BasePage that will contain a ControlTemplate with the common part. (If you want to learn more about ControlTemplates I recommend you to read this article).
In the code behind, we will add the Next and Skip commands. Also will initialize them with the navigation logic, so that every time the next command is executed it will remove the previous page, and navigate to the next page.
3. Create an animation view control
Each step will have an animation, that highlights the part where the user needs to pay more attention.
We will create a AnimatedView that will scale and repeat while the view is visible.
5. Create each step UI
Each step will inherit from the BaseQuickTourPage and will wrap the view in the AnimatedView control.
Step 1:
Step 2 Code here.
Step 3 Code here.
6. Build the Quick Tour sequence logic
In order to handle which step/page goes next, I created a QuickTourBuilder using the builder pattern, which will handle the logic to indicate which step is going to go next.
7. Indicate which step should start
On the first page of the Quick Tour, implement the IQuickTourLauncher interface, and use the LaunchAsync method to navigate to it.
8. Initialize and start the Quick Tour sequence
In HomePage code-behind, we create the quick tour by using the QuickTourBuilder and specifying the sequence of pages that will be part of it.
Result
That’s all for now!
You can check the full source code here.
Happy coding!
