{{announcement.body}}
{{announcement.title}}

How to Create an Onboarding UI With Xamarin Forms

DZone 's Guide to

How to Create an Onboarding UI With Xamarin Forms

This tutorial assumes you are comfortable with Xamarin.Forms and the Model-View-Model pattern.

· Web Dev Zone ·
Free Resource

A user opens up your app for the first time, you got a chance to help him get familiar with it, how? you can show him a series of screens that explain what the app can do, that's onboarding in a nutshell.

In this tutorial, we are going to learn how to create an onboarding UI with Xamarin.Forms.

You may also like: 8 Most Common UX Mistakes Made by Mobile/Web App Developers

Note:

This tutorial assumes you are comfortable with Xamarin.Forms and the Model-View-Model pattern.

Getting Started

In this tutorial, we are going to create an onboarding UI for an app called Tabia, Tabia helps his users create habits that last.

Setting Up the Project

Open Visual Studio and create a blank new Xamarin.Forms project, build and run the project, you should have the following screen:

Xamarin.forms

Detecting If the App Is Launched for the First Time

Onboarding screens are shown only if the app is launched for the first time, Xamarin.Essentials come with a class called VersionTracking that can help with that. Make sure Xamarin.Essentials package is installed in your Nuget packages.

Xamarin.Essentials

Note:

At the time of writing this tutorial, Xamarin.Essentials are already installed with the default template solution.

Open App.xaml.cs, override OnStart method and add the following line of code.

C#


Open MainPage.xaml.cs and add the following line of code in the constructor.

C#


Now, we know when the app is launched for the first time, we will add the code to launch onboarding later on.

Creating the Onboarding UI

Two NuGet packages are necessary:

Let's install the two packages.

NuGet Packages


NuGet Packages

FFImageLoading needs to be initialize in each platform-specific project (AppDelegate.cs, MainActivity.cs).

On iOS:

C#


On Android:

C#


The UI will be created using the Model-View-ViewModel pattern, let's create the model first.

Create a folder called Feature and add a new class called OnboardingModel. Replace existing code with the following lines:

C#
 




x


 
1
namespace Onboarding.Feature 
2
{ 
3
    public class OnboardingModel 
4
    { 
5
        public string Title { get; set; } 
6
        public string Content { get; set; } 
7
        public string ImageUrl { get; set; } 
8
    } 
9
}



In the same folder, add a new class called OnboardingViewModel and add the following lines of code:

C#


Note:

The property Items of type ObservableCollection<OnboardingModel> will be bound to a carrousel view.
The property ImageUrl let specify the location of an image.

On iOS, the images are stored in the folder Resource.



On Android, images are stored in the folder Resource -> Drawable.


Add a new content page named OnboardingPage and open up the OnboardingPage.xaml, delete all the code and replace by the following:

XML
 




x
73


 
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
3
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4
             xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
5
             x:Class="Onboarding.Feature.OnboardingPage"
6
             xmlns:ob="clr-namespace:Onboarding.Feature"
7
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
8
             ios:Page.UseSafeArea="true"
9
             BackgroundColor="#FFFFFF">
10
    <ContentPage.BindingContext>
11
        <ob:OnboardingViewModel />
12
    </ContentPage.BindingContext>
13
    <ContentPage.Resources>
14
        <ResourceDictionary>
15
            <Color x:Key="BlueColor">#071D92</Color>
16
            <Style TargetType="Label">
17
                <Setter Property="TextColor" Value="{StaticResource BlueColor}" />
18
                <Setter Property="HorizontalTextAlignment" Value="Center" />
19
                <Setter Property="HorizontalOptions" Value="Center" />
20
            </Style>           
21
        </ResourceDictionary>
22
    </ContentPage.Resources>
23
    <ContentPage.Content>
24
        <Grid>
25
            <Grid.RowDefinitions>              
26
                <RowDefinition Height="auto" />
27
                <RowDefinition Height="*" />
28
                <RowDefinition Height="auto" /> 
29
            </Grid.RowDefinitions>
30
            <Button Grid.Row="0"
31
                    HorizontalOptions="EndAndExpand"
32
                    Margin="0,0,20,0"
33
                    FontSize="Medium"
34
                    FontAttributes="Bold"
35
                    BackgroundColor="Transparent"
36
                    TextColor="{StaticResource BlueColor}"
37
                    Text="{Binding SkipButtonText,}"
38
                    Command="{Binding SkipCommand}"/>
39
            <CarouselView x:Name="onBoardingCarousel"
40
                          Grid.Row="1"
41
                          ItemsSource="{Binding Items}"                          
42
                          VerticalOptions="Center"
43
                          Position="{Binding Position}">
44
                 <CarouselView.ItemTemplate>
45
                    <DataTemplate x:DataType="ob:OnboardingModel">
46
                        <ContentView>
47
                        <FlexLayout Direction="Column"
48
                                    JustifyContent="SpaceEvenly">
49
                                <Label Text="{Binding Title}"
50
                                       FontAttributes="Bold"
51
                                       FontSize="Title" />
52
                                <ffimageloadingsvg:SvgCachedImage                                  
53
                                       Source="{Binding ImageUrl}"
54
                                       Aspect="AspectFill"
55
                                       WidthRequest="300" 
56
                                       FlexLayout.AlignSelf="Center"/>                                
57
                                <Label Text="{Binding Content}"
58
                                       FontSize="Body"/>                     
59
                            </FlexLayout>
60
                            </ContentView>
61
                    </DataTemplate>
62
                </CarouselView.ItemTemplate>
63
            </CarouselView>
64
            <IndicatorView
65
                    Grid.Row="2"
66
                    IndicatorView.ItemsSourceBy="onBoardingCarousel"
67
                    IndicatorsShape="Circle"
68
                    IndicatorColor="{StaticResource BlueColor}"
69
                    SelectedIndicatorColor="DarkGray"
70
                    HorizontalOptions="Center"/>                   
71
        </Grid>
72
    </ContentPage.Content>
73
</ContentPage>



Note:

At the time of writing this tutorial, the IndicatorView is still experimental, you should add the following line in platform-specific project ( AppDelegate.cs, MainActivity.cs) :

Xamarin.Forms.Forms.SetFlags(new string[] { "IndicatorView_Experimental" });

At this point, the shared project should look like this:

Showing Onboarding

Open up MainPage.xaml.cs, replace that TODO comments with this line of code:

Navigation.PushModalAsync(new OnboardingPage()

Build and run the project, you should see the following result:

Note:

If you want to show the onboarding again, we need to uninstall the app from your device or simulator.

Where to Go From Here?

You can learn more about the CarrouselView here, and about the IndicatorView here.

The project is available for download here. feel free to use it.


Further Reading

13 of the Best App Designs: They're So (Not) Basic

Introduction to Xamarin.Forms for Android Developers (Part 1)

Getting Started With Xamarin Forms and Prism

Topics:
mobile development ,tutorial ,web dev ,xamarin.forms

Published at DZone with permission of Patrick Tshibanda . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}