Xamarin Shell and Material Components


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

In Xamarin Material visual is a system created, that describe the color, size, spacing, text, and other aspects of how view and layout look and behave. The Xamarin Material are used to apply the Material Design rule in Xamarin.Forms application.

In Xamarin Forms, the design system is responsible for control visualization in each platform. In Xamarin forms code is run on multiple platforms and each has its filesystem. In Xamarin, Material Design was introduced in Xamarin.Forms 3.6. Customize Material Visual is used to customize default controls.

On Android:

  1. It should require a minimum version of 5.0 (API 21) or greater
  2. TargetFramework of version 9.0(API 28)

You can use Visual Material in your project by adding the package Xamarin.Forms.Visual.Material.

Material Visual can support the following controls:

  1. Button
  2. CheckBox
  3. Entry
  4. Frame
  5. Picker
  6. TimePicker
  7. DatePicker
  8. Slider
  9. Stepper
  10. ProgressBar
  11. Editor
  12. ActivityIndicator

Let’s see how to set Visual.


<stacklayout horizontaloptions="Center" spacing="50" verticaloptions="Center"><button text="Default"></button><button text="Material" visual="Material"></button><button text="Default"></button></stacklayout>

You can set the Visual property on the element or its parent or the page itself, you can set Visual as Material for the root element and override it as default for a specific element if needed.


<stacklayout horizontaloptions="Center" spacing="50" verticaloptions="Center" visual="Material">
        <progressbar progress="0.5" progresscolor="Black" widthrequest="200" />
        <progressbar progress="0.5" progresscolor="Black" visual="Default" widthrequest="200" />
</stacklayout>

Xamarin Shell

In Xamarin, Shell is use to create an attract mobile app with C#. In newly Xamarin Shell using fundamental app architecture features can reduce the complexity of building a mobile app.

In this blog, using Xamarin.forms shell we can see different types of navigation schemes and we also see how to navigate to sub-pages.

FlyoutItem has some following methods.

  1. TabIndexDefaultValueCreator = This method is use to set the default value of the TabIndex property and its return an int.
  2. TabStopDefaultValueCreator = This method is use to set the default value of the TabStop property and its return a bool.
  3. OnTabIndexPropertyChanged = This method can occur when the TabIndex property can change.? OnTabStopPropertyChanged = Method occur when the IsTabStop property can change.

Now, let’s see a simple Xamarin Shell Example.



Step: 1 First, create a Xamarin project with the Android and iOS platforms.

After creation project Add one Xaml page and extend the Shell type instead of a Content page.

ShellExamples.Xaml


<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</shell>

Step: 2 Now, open ShellExamples.Xaml.cs and change ContentPage to Shell.

ShellExamples.Xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MaterialAndShell
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ShellExamples : Shell
    {
        public ShellExamples()
        {
            InitializeComponent();
        }
    }
}

Now, use this Shell in our App.

App.Xaml.cs

namespace MaterialAndShell
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new ShellExamples();
    }
}
}

In Xamarin, they have three common types of mobile navigation.

  1. Flyout menu
  2. Bottom tabs
  3. Top tabs

Let’s see each of the types of examples.

Flyout Menu

Flyout menus are used when you want to side-drawer in your app. To create a side-drawer navigation you need to use FlyoutItem and ShellContent.


<?xml encoding="utf-8" version="1.0">
<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <flyoutitem icon="home.png" title="Home">
        <shellcontent contenttemplate="{DataTemplate views:HomePage}" />
    </flyoutitem>
    
    <flyoutitem icon="about.png" title="Library">
        <shellcontent contenttemplate="{DataTemplate views:AboutPage}" />
    </flyoutitem>
    
    <flyoutitem icon="contact.jpg" title="Contact">
        <shellcontent contenttemplate="{DataTemplate views:ContactPage}" />
    </flyoutitem>
</shell>

</?xml>

Here we can create a View folder and inside the View, create three Content Page (Homepage, about page, contact page). You can create a design for those three Content Pages that you want to design.


Output

Trigger-in-Xamarin

Fig: Flyout Menu Example

Trigger-in-Xamarin

Fig: Shell Navigated Home Page

Bottom Tabs

There are many applications which require bottom tabs for navigation one page to another page. TabBar is used to create bottom tabs. Using FlyoutBehavior= “None” you can explicitly set the behavior of flyout hidden or show.

<?xml encoding="utf-8" version="1.0">
<?xml encoding="utf-8" version="1.0">
<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <tabbar>
        <tab icon="home.png" title="Home">
            <shellcontent contenttemplate="{DataTemplate views:HomePage}" />
        </tab>

        <tab icon="about.png" title="About">
            <shellcontent contenttemplate="{DataTemplate views:AboutPage}" />
        </tab>

        <tab icon="contact.jpg" title="Contact">
            <shellcontent contenttemplate="{DataTemplate views:ContactPage}" />
        </tab>
    </tabbar>
</shell>

</?xml></?xml>


Output

Fig: Bottom tab Example

Lifting to Top Tabs

Lifting to Top tabs is used when you have to content within a tab and you can display that content in top tabs.

<?xml encoding="utf-8" version="1.0"><?xml encoding="utf-8" version="1.0">
<?xml encoding="utf-8" version="1.0">
<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <tabbar>
        <tab icon="home.png" title="Home">
            <shellcontent contenttemplate="{DataTemplate views:HomePage}" />
        </tab>

        <tab icon="about.png" title="About">
            <shellcontent contenttemplate="{DataTemplate views:AboutPage}" />
        </tab>

        <tab icon="contact.jpg" title="Contact">
            <shellcontent contenttemplate="{DataTemplate views:General}" title="General" />
            <shellcontent contenttemplate="{DataTemplate views:FAQs}" title="FAQs" />
            <shellcontent contenttemplate="{DataTemplate views:Feedback}" title="Feedback" />
        </tab>
    </tabbar>
</shell>

</?xml></?xml></?xml>


Output

Trigger-in-Xamarin

Fig: Bottom tab Example

Output:

Trigger-in-Xamarin

Fig: Top bar with bottom tab

Above we can see navigation in Flyout, bottom tab, and top bar. Now we can create one application using Flyout, bottom tab, and top bar.


Searching for the Best Xamarin App Development Company ?

Your Search ends here.



Step: 1

First, create a one content page AppShell is our content page name. After adding the page change the content page to Shell and add Flyout, Tab bar ShellContent like below.

<?xml encoding="utf-8" version="1.0"><?xml encoding="utf-8" version="1.0"><?xml encoding="utf-8" version="1.0">
<?xml encoding="utf-8" version="1.0">
<shell flyoutheaderbehavior="CollapseOnScroll" x:class="MaterialAndShell.AppShell" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <flyoutitem flyoutdisplayoptions="AsMultipleItems" title="Animals">
            <tab icon="home.png" title="Domestic">
                <shellcontent contenttemplate="{DataTemplate views:HomePage}" icon="home.png" title="Home" />
                <shellcontent contenttemplate="{DataTemplate views:ContactPage}" icon="contact.jpg" title="Contact" />
            </tab>
            <shellcontent contenttemplate="{DataTemplate views:TechnologiesPage}" icon="contact.jpg" title="Technologies" />
            <shellcontent contenttemplate="{DataTemplate views:LibraryPage}" icon="about.png" title="Library" />
            <shellcontent contenttemplate="{DataTemplate views:ServicePage}" icon="contact.jpg" title="Services" />
        </flyoutitem>

        <shellcontent contenttemplate="{DataTemplate views:AboutPage}" icon="about.png" title="About" />
</shell>

</?xml></?xml></?xml></?xml>

Add the content page that you want to show in navigation and add related images in Android -> Resources -> drawable.


Step: 2

Open code-behind and change the content page to Shell.

namespace MaterialAndShell
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}


Step: 3

Now, open App.Xaml.cs file to specify the page.

namespace MaterialAndShell
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new AppShell();
        }
     }
}


Now, run your project you will see output something like the below.


Output

Trigger-in-Xamarin

Fig: Flyout navigation

Trigger-in-Xamarin

Fig: Flyout with Tab bar and Bottom tabs

Conclusion

In this article, we have explained how to implement Material component and Xamarin Shell. Using visual material, controls can look different (color, size, spacing, etc.) compare to default control. We can simply enable Material Visual by adding the Xamarin.Forms.Visual.Material NuGet Package in the Android and iOS platform project and we also have seen that Xamarin Shell can provide different types of navigation.

Xamarin Shell and Material Components

In Xamarin Material visual is a system created, that describe the color, size, spacing, text, and other aspects of how view and layout look and behave. The Xamarin Material are used to apply the Material Design rule in Xamarin.Forms application.

In Xamarin Forms, the design system is responsible for control visualization in each platform. In Xamarin forms code is run on multiple platforms and each has its filesystem. In Xamarin, Material Design was introduced in Xamarin.Forms 3.6. Customize Material Visual is used to customize default controls.

On Android:

  1. It should require a minimum version of 5.0 (API 21) or greater
  2. TargetFramework of version 9.0(API 28)

You can use Visual Material in your project by adding the package Xamarin.Forms.Visual.Material.

Material Visual can support the following controls:

  1. Button
  2. CheckBox
  3. Entry
  4. Frame
  5. Picker
  6. TimePicker
  7. DatePicker
  8. Slider
  9. Stepper
  10. ProgressBar
  11. Editor
  12. ActivityIndicator

Let’s see how to set Visual.


<stacklayout horizontaloptions="Center" spacing="50" verticaloptions="Center"><button text="Default"></button><button text="Material" visual="Material"></button><button text="Default"></button></stacklayout>

You can set the Visual property on the element or its parent or the page itself, you can set Visual as Material for the root element and override it as default for a specific element if needed.


<stacklayout horizontaloptions="Center" spacing="50" verticaloptions="Center" visual="Material">
        <progressbar progress="0.5" progresscolor="Black" widthrequest="200" />
        <progressbar progress="0.5" progresscolor="Black" visual="Default" widthrequest="200" />
</stacklayout>

Xamarin Shell

In Xamarin, Shell is use to create an attract mobile app with C#. In newly Xamarin Shell using fundamental app architecture features can reduce the complexity of building a mobile app.

In this blog, using Xamarin.forms shell we can see different types of navigation schemes and we also see how to navigate to sub-pages.

FlyoutItem has some following methods.

  1. TabIndexDefaultValueCreator = This method is use to set the default value of the TabIndex property and its return an int.
  2. TabStopDefaultValueCreator = This method is use to set the default value of the TabStop property and its return a bool.
  3. OnTabIndexPropertyChanged = This method can occur when the TabIndex property can change.? OnTabStopPropertyChanged = Method occur when the IsTabStop property can change.

Now, let’s see a simple Xamarin Shell Example.



Step: 1 First, create a Xamarin project with the Android and iOS platforms.

After creation project Add one Xaml page and extend the Shell type instead of a Content page.

ShellExamples.Xaml


<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</shell>

Step: 2 Now, open ShellExamples.Xaml.cs and change ContentPage to Shell.

ShellExamples.Xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MaterialAndShell
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ShellExamples : Shell
    {
        public ShellExamples()
        {
            InitializeComponent();
        }
    }
}

Now, use this Shell in our App.

App.Xaml.cs

namespace MaterialAndShell
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new ShellExamples();
    }
}
}

In Xamarin, they have three common types of mobile navigation.

  1. Flyout menu
  2. Bottom tabs
  3. Top tabs

Let’s see each of the types of examples.

Flyout Menu

Flyout menus are used when you want to side-drawer in your app. To create a side-drawer navigation you need to use FlyoutItem and ShellContent.


<?xml encoding="utf-8" version="1.0">
<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <flyoutitem icon="home.png" title="Home">
        <shellcontent contenttemplate="{DataTemplate views:HomePage}" />
    </flyoutitem>
    
    <flyoutitem icon="about.png" title="Library">
        <shellcontent contenttemplate="{DataTemplate views:AboutPage}" />
    </flyoutitem>
    
    <flyoutitem icon="contact.jpg" title="Contact">
        <shellcontent contenttemplate="{DataTemplate views:ContactPage}" />
    </flyoutitem>
</shell>

</?xml>

Here we can create a View folder and inside the View, create three Content Page (Homepage, about page, contact page). You can create a design for those three Content Pages that you want to design.


Output

Trigger-in-Xamarin

Fig: Flyout Menu Example

Trigger-in-Xamarin

Fig: Shell Navigated Home Page

Bottom Tabs

There are many applications which require bottom tabs for navigation one page to another page. TabBar is used to create bottom tabs. Using FlyoutBehavior= “None” you can explicitly set the behavior of flyout hidden or show.

<?xml encoding="utf-8" version="1.0">
<?xml encoding="utf-8" version="1.0">
<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <tabbar>
        <tab icon="home.png" title="Home">
            <shellcontent contenttemplate="{DataTemplate views:HomePage}" />
        </tab>

        <tab icon="about.png" title="About">
            <shellcontent contenttemplate="{DataTemplate views:AboutPage}" />
        </tab>

        <tab icon="contact.jpg" title="Contact">
            <shellcontent contenttemplate="{DataTemplate views:ContactPage}" />
        </tab>
    </tabbar>
</shell>

</?xml></?xml>


Output

Fig: Bottom tab Example

Lifting to Top Tabs

Lifting to Top tabs is used when you have to content within a tab and you can display that content in top tabs.

<?xml encoding="utf-8" version="1.0"><?xml encoding="utf-8" version="1.0">
<?xml encoding="utf-8" version="1.0">
<shell title="Shell Example" x:class="MaterialAndShell.ShellExamples" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <tabbar>
        <tab icon="home.png" title="Home">
            <shellcontent contenttemplate="{DataTemplate views:HomePage}" />
        </tab>

        <tab icon="about.png" title="About">
            <shellcontent contenttemplate="{DataTemplate views:AboutPage}" />
        </tab>

        <tab icon="contact.jpg" title="Contact">
            <shellcontent contenttemplate="{DataTemplate views:General}" title="General" />
            <shellcontent contenttemplate="{DataTemplate views:FAQs}" title="FAQs" />
            <shellcontent contenttemplate="{DataTemplate views:Feedback}" title="Feedback" />
        </tab>
    </tabbar>
</shell>

</?xml></?xml></?xml>


Output

Trigger-in-Xamarin

Fig: Bottom tab Example

Output:

Trigger-in-Xamarin

Fig: Top bar with bottom tab

Above we can see navigation in Flyout, bottom tab, and top bar. Now we can create one application using Flyout, bottom tab, and top bar.


Searching for the Best Xamarin App Development Company ?

Your Search ends here.



Step: 1

First, create a one content page AppShell is our content page name. After adding the page change the content page to Shell and add Flyout, Tab bar ShellContent like below.

<?xml encoding="utf-8" version="1.0"><?xml encoding="utf-8" version="1.0"><?xml encoding="utf-8" version="1.0">
<?xml encoding="utf-8" version="1.0">
<shell flyoutheaderbehavior="CollapseOnScroll" x:class="MaterialAndShell.AppShell" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:views="clr-namespace:MaterialAndShell.View" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <flyoutitem flyoutdisplayoptions="AsMultipleItems" title="Animals">
            <tab icon="home.png" title="Domestic">
                <shellcontent contenttemplate="{DataTemplate views:HomePage}" icon="home.png" title="Home" />
                <shellcontent contenttemplate="{DataTemplate views:ContactPage}" icon="contact.jpg" title="Contact" />
            </tab>
            <shellcontent contenttemplate="{DataTemplate views:TechnologiesPage}" icon="contact.jpg" title="Technologies" />
            <shellcontent contenttemplate="{DataTemplate views:LibraryPage}" icon="about.png" title="Library" />
            <shellcontent contenttemplate="{DataTemplate views:ServicePage}" icon="contact.jpg" title="Services" />
        </flyoutitem>

        <shellcontent contenttemplate="{DataTemplate views:AboutPage}" icon="about.png" title="About" />
</shell>

</?xml></?xml></?xml></?xml>

Add the content page that you want to show in navigation and add related images in Android -> Resources -> drawable.


Step: 2

Open code-behind and change the content page to Shell.

namespace MaterialAndShell
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}


Step: 3

Now, open App.Xaml.cs file to specify the page.

namespace MaterialAndShell
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new AppShell();
        }
     }
}


Now, run your project you will see output something like the below.


Output

Trigger-in-Xamarin

Fig: Flyout navigation

Trigger-in-Xamarin

Fig: Flyout with Tab bar and Bottom tabs

Conclusion

In this article, we have explained how to implement Material component and Xamarin Shell. Using visual material, controls can look different (color, size, spacing, etc.) compare to default control. We can simply enable Material Visual by adding the Xamarin.Forms.Visual.Material NuGet Package in the Android and iOS platform project and we also have seen that Xamarin Shell can provide different types of navigation.

  • Pin It
TOP