Creating Onboarding UI Using .NET MAUI
In this blog, we will recreate an onboarding screen UI based on this Dribble design.
An overview of the outcome is presented below:
So I’m not going to go into too much technical detail here—if you want to check out the source code it can be obtained from GitHub repo. Instead I’m going to break down the UI design using .Net MAUI.
Let’s jump in code!
Making an Onboarding Screen
To create an onboarding screen using .NET MAUI, you will need to follow these steps:
Step 1: In the XAML file for your main page, create a Grid layout with three rows and one column. Set the row definitions to “*”, “Auto”, and “Auto”.
<Grid RowSpacing="0" ColumnDefinitions="*,*" RowDefinitions="*,Auto,Auto">
//<Add OnboardingPage UI Content here>
</Grid>
Step 2: In the first row of the grid, add a CarouselView control. This will be used to display the different onboarding screens.
<CarouselView Margin="2" Grid.ColumnSpan="2" Grid.RowSpan="3"
Position="{Binding Position}" IsSwipeEnabled="False"
ItemsUpdatingScrollMode="KeepLastItemInView" IsScrollAnimated="False"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
IndicatorView="indicatorView" HorizontalScrollBarVisibility="Never"
ItemsSource="{Binding Source}"
ItemTemplate="{StaticResource CarouselViewTemplate}">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CarouselView.ItemsLayout>
</CarouselView>
Step 3: In the second row of the grid, add an IndicatorView control. This will be used to indicate the current onboarding screen.
<IndicatorView x:Name="indicatorView"
Grid.Row="1" HeightRequest="50" MinimumWidthRequest="120"
Grid.ColumnSpan="2"
HorizontalOptions="Center" >
<IndicatorView.IndicatorTemplate>
<DataTemplate >
<Border HeightRequest="12" Style="{StaticResource IndicatorLabelStyle}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="4" />
</Border.StrokeShape>
</Border>
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>
Step 4: In the third row of the grid, add two Border controls, and inside each of them, place a content label control with a tap gesture recognizer. These will be used to navigate between the onboarding screens and to finish the onboarding process.
<Border IsVisible="{Binding ActiveSkipPage}" Margin="15"
MinimumHeightRequest="50" MinimumWidthRequest="100"
Grid.Row="3" HorizontalOptions="Center"
BackgroundColor="White" Grid.Column="1">
<Border.StrokeShape>
<RoundRectangle CornerRadius="20" />
</Border.StrokeShape>
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NextCommand}" />
</Border.GestureRecognizers>
<Label HorizontalTextAlignment="Center" FontAttributes="Bold"
VerticalTextAlignment="Center" Text="Next" FontSize="16"
TextColor="Black" />
</Border>
<Border IsVisible="{Binding EnableMainPage}" Margin="15"
MinimumHeightRequest="60" MinimumWidthRequest="170"
Grid.Row="3" HorizontalOptions="Center" BackgroundColor="White"
Grid.Column="0" Grid.ColumnSpan="2">
<Border.StrokeShape>
<RoundRectangle CornerRadius="20" />
</Border.StrokeShape>
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding GetStartedCommand}" />
</Border.GestureRecognizers>
<Label HorizontalTextAlignment="Center" FontAttributes="Bold"
VerticalTextAlignment="Center" Text="Get Started"
FontSize="18" TextColor="Black" />
</Border>
<Label IsVisible="{Binding ActiveSkipPage}"
Text="Skip" HorizontalTextAlignment="Center" FontAttributes="Bold"
VerticalTextAlignment="Center" FontSize="16" TextColor="Black"
Grid.Row="3" Grid.Column="0"
BackgroundColor="Transparent" VerticalOptions="Center"
HorizontalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SkipCommand}" />
</Label.GestureRecognizers>
</Label>
Implementing the MVVM Model
The OnboardingViewModel is a class that manages the functionality of an onboarding process in a mobile application. To implement this process, follow these steps:
- In the code-behind file for your OnboardingViewModel class, create a collection of data to bind to the CarouselView by populating the “Source” list with OnboardingModel objects. This list contains information such as a title, description, color, and image for each onboarding screen.
- Bind the CarouselView to the data collection and set the IndicatorView to reflect the current onboarding screen.
- Use the “SkipCommand”, “NextCommand”, and “GetStartedCommand” commands to navigate between onboarding screens and to finish the onboarding process.
- The “EnableMainPage”, “ActiveSkipPage”, “Position”, and “BackgroundColor” properties are used to keep track of the current state of the onboarding process and to update the UI accordingly.
- The “Close”, “NavigateToGetStarted”, and “NextItem” methods are used to implement the functionality of the various commands.
internal class OnboardingViewModel : INotifyPropertyChanged
{
public Command SkipCommand { get; set; }
public Command NextCommand { get; set; }
public Command GetStartedCommand { get; set; }
public List Source { get; set; }
private bool enableMainPage = false;
public bool EnableMainPage
{
get
{
return enableMainPage;
}
set
{
enableMainPage = value;
RaisePropertyChange(nameof(EnableMainPage));
}
}
private bool activeSkipPage = true;
public bool ActiveSkipPage
{
get
{
return activeSkipPage;
}
set
{
activeSkipPage = value;
RaisePropertyChange(nameof(ActiveSkipPage));
}
}
private int position = 0;
public int Position
{
get
{
return position;
}
set
{
position = value;
RaisePropertyChange(nameof(Position));
}
}
public Color backgroundColor;
public Color BackgroundColor
{
get
{
return backgroundColor;
}
set
{
backgroundColor = value;
RaisePropertyChange(nameof(BackgroundColor));
}
}
public OnboardingViewModel()
{
Source = new List();
BackgroundColor = Color.FromRgb(215, 206, 255);
Source.Add(new OnboardingModel
{
Title = "Use shapes to decorate your design",
Description = "Decorate your design products with relevant shapes. Use basic geometric shapes like squares, circles or more complex shapes such as hearts, stars, bubbles to draw attention to your design segments!",
Color = Color.FromRgb(215, 206, 255),
Image = "shape1.png"
});
Source.Add(new OnboardingModel
{
Title = "Combine shapes with other objects",
Description = "Use arrows, lines and illustrations to make unique visuals every time. Shapes may look simiplistic and even basic, but they're a great addition to your designs. Don't get carried away, thought! Too many shapes can overcomplicate your design.",
Color = Color.FromRgb(198, 224, 246),
Image = "shape2.png"
});
Source.Add(new OnboardingModel
{
Title = "Animate shapes to catch the attention",
Description = "Geometric makes it very easy to animate any design object. There are animation presents that allow you to make a shape zoom, fade, wobble, shake, spin and more, with just a click of a button.",
Color = Color.FromRgb(239, 217, 201),
Image = "shape3.png"
});
Position = 0;
SkipCommand = new Command(Close);
GetStartedCommand = new Command(NavigateToGetStarted);
NextCommand = new Command(NextItem);
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChange(string propertyname)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
}
}
private void Close()
{
Application.Current.MainPage = new MainPage();
}
private void NavigateToGetStarted()
{
Application.Current.MainPage = new MainPage();
}
private void NextItem()
{
var count = Position + 1;
if (count <= Source.Count - 1)
{
BackgroundColor = Source[count].Color;
Position = count;
EnableMainPage = Position == Source.Count - 1;
ActiveSkipPage = !EnableMainPage;
}
else
Application.Current.MainPage = new MainPage();
}
}
Custom UI Design on Onboarding
Here are some ways to achieve a custom UI design based on your .NET MAUI application:
- Use the provided code snippet to create a custom template for the CarouselView. This template allows you to specify the appearance of each item in the CarouselView, including the background color, image, title, and description.
- Customize the appearance of the onboarding UI by modifying the properties of the Border and Grid elements in the template. For example, you can change the corner radius of the Border element or adjust the spacing between the Label elements in the Grid.
- Use the OnPlatform element to specify platform-specific customizations for Android devices. This allows you to tailor the UI to the specific capabilities and constraints of each platform.
- Consider using other UI elements, such as buttons, text input fields, or dropdown lists, to add more interactivity and functionality to the onboarding screen.
- By following these steps, you can create a visually appealing and functional onboarding screen that effectively guides users through the initial setup of your application.
<DataTemplate x:Key="CarouselViewTemplate">
<Border BackgroundColor="{Binding Color}">
<Border.StrokeShape >
<OnPlatform>
<On Platform="Android">
<RoundRectangle CornerRadius="20" />
</On>
</OnPlatform>
</Border.StrokeShape>
<Grid>
<Grid.RowDefinitions >
<RowDefinition Height="*" / >
<RowDefinition Height="*" / >
<RowDefinition Height="100" / >
</Grid.RowDefinitions>
<Image Aspect="AspectFit" Source="{Binding Image}" Grid.Row="0">
</Image>
<VerticalStackLayout Grid.Row="1" Spacing="10">
<Label HorizontalTextAlignment="Center" Padding="10,5,10,5"
Text="{Binding Title}" FontSize="30"
LineBreakMode="WordWrap" />
<Label HorizontalTextAlignment="Center" Padding="10,5,10,5"
Text="{Binding Description}" FontSize="15"
TextColor="Gray" / >
</VerticalStackLayout>
</Grid>
</Border>
</DataTemplate>
Conclusion
In conclusion, the onboarding screen is an important aspect of mobile application development that should not be overlooked. It serves as a guide for users during the initial setup of the app and can greatly impact their overall experience. By following the steps outlined in this article, you can create an effective onboarding screen for your .NET MAUI application using the MVMM model. Whether you choose to customize the UI design or stick to the basic template, it is important to make the onboarding process intuitive and user-friendly.
At missionmind, we offer a range of services to help you achieve a custom and effective UI for your application. Whether you need assistance with the onboarding screen or any other aspect of your app’s design, our team of experienced developers can provide the guidance and support you need. From prototyping and user testing to implementation and maintenance, we have the skills and resources to help you create an engaging and user-friendly app that meets your business needs. Contact us today to learn more about how we can help you achieve your desired application UI.
