Android Mad - Development Guide for Mobile App Development

Introduction:

In this tutorial, we will learn how create Tabbed Page in Xamarin.Forms using Fresh MVVM. We already learned how to create your master details page in my previous tutorials. If you are new to Fresh MVVM, You can read my previous article here.

Articles of FreshMVVM:

1. MVVM Databinding in Xamarin.Forms using Fresh MVVM.
2. Master Detail Page in Xamarin.Forms using Fresh MVVM.

Coding Part:

Steps:

I have split this part into 3 steps as in the following.

1. Creating new Xamarin.Forms Projects.
2. Setting up the plugin for Xamarin.Forms Application.
3. Implementing Fresh MVVM Tabbed Page.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

We will start coding for Fresh MVVM. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for Fresh MVVM Plugin or Paste the following Nuget Installation.

Install-Package FreshMvvm -Version 2.2.3

Click Install to install this Plugin against your PCL Project or .NET standard Project.

Step 3: Implementing Fresh MVVM Tabbed Page

1. Create your XAML page (view) with name ended up with “Page”.
   
2. Create PageModel by create Class name ended with “PageModel” and inherited with “FreshBasePageModel” as shown below screenshot.
   
3. In the same way, I have created two pages “Detail1Page” and “Detail2Page” with two respective page models “Detail1PageModel” and “Detail2PageModel”.

Set MainPage:

To create Fresh MVVM Tabbed Page as MainPage, we should use Fresh Tabbed Navigation Container with the following code. Open App.xaml.cs or App.cs and set MainPage.

var tabbedNavigation = new FreshTabbedNavigationContainer();
tabbedNavigation.AddTab("First Tab", null);
tabbedNavigation.AddTab("Second Tab", null);
MainPage = tabbedNavigation;

• Then Click Run, your Tabbed Page will be look like as on the below screenshot.
  
  
• Here, we will not discuss about navigation between pages. If you want to know, you can see my previous article on Fresh MVVM.

Full Code for App.xaml.cs:

You can find the code for App.xaml.cs below

public partial class App : Application
{
    public App()
    {
        try
        {
            InitializeComponent();
            var tabbedNavigation = new FreshTabbedNavigationContainer();
           tabbedNavigation.AddTab("First Tab", null);
           tabbedNavigation.AddTab("Second Tab", null);
           MainPage = tabbedNavigation;
        }
        catch (Exception ex)
        {

        }
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.