Basic Structure Of Mobile App Using Xamarin MVVM

Introduction

This is part 1 of the MVVM Mobile App series.

In this part, I'm going to explain the basic structure of a mobile app built in Xamarin using the MVVM pattern. In this part, I'll create a new project and will let you know about predefined libraries and classes of the Xamarin Android app.

MVVM stands for Model View ViewModel. I'm using Visual Studio 2019 in this project.

Ok, so here we go.

Step 1

Run Visual Studio and click 'Create a new project' then type in the search box 'Mobile App' and select and select 'Mobile App(Xamarin.forms)' from the list as shown below in the image, then click Next.

Basic Structure of Mobile App Using Xamarin MVVM

Step 2

Chose your app name, in my case it's MvvmApp. Leave all things showing and click 'Create'. It will take you to the template selection window.

Select Tabbed and it will create an MVVM blueprint and create some predefined classes. Next, uncheck iOS, we'll learn only Android app development in this series. Press Create, as shown in the below image.

Step 3

Now you can see your solution window, it contains the Model, View, and ViewModel folder. There is one Xaml file AppShell.xaml which contains the main page of the application with tabs. If you'll check your app.xaml.cs you can see that AppShell is registered as MainPage, as shown in the below image.

Step 4

We can register our home page in AppShell.xaml, to do so follow the below steps.

Add a HomePage.xaml by clicking right on views folder -> add -> new item
Select Visual C# Items from the left sidebar under the installed tab select Content Page and give it a name in my case its HomePage.xaml. Then click 'Add' as shown in the below image

Step 5

Now you can see HomePage.xaml is added in the views folder. Now Update HomePage.xaml with the below code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MvvmApp.Views.HomePage">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Home Page of MVVM App!"
TextColor="Black" FontSize="20"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 6

This step is last but not least. Go to AppShell.xaml and update AppShell.xaml with the below code:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MvvmApp.Views"
Title="MvvmApp"
x:Class="MvvmApp.AppShell">
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<TabBar>
<!--<ShellContent Title="About" Icon="tab_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
<ShellContent Title="Browse" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />-->
</TabBar>
<ShellContent Route="HomePage"
ContentTemplate="{DataTemplate local:HomePage}">
</ShellContent>
<!--
If you would like to navigate to this content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<ShellContent Route="LoginPage" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:LoginPage}" />
</Shell>

Now build your app for the first time and click run with an Android emulator.

2 Comments

Join the conversation! Your thoughts help the community grow.

Thamaraiselvan T6y ago
My app needs 5 page links in bottom tab bar meanwhile side menu has many page links. Bottom tab bar always need to be shown around my app pages. When I click an item in Flyout menu, bottom tabbar items are replaced with Sidemenu flyout items.
Thamaraiselvan T6y ago
How can I implement both side menu as well as bottom tab bar using Xamarin AppShell feature? The above one is only for bottom tab bar.