Awesome Open Source
Awesome Open Source
TopTabbedPage - A Xamarin.Forms control


A Xamarin.Forms control brings BottomNavigationView for bottom navigation on Android

Tab 1 Tab 5


This project is maintained by Naxam Co.,Ltd.
We specialize in developing mobile applications using Xamarin and native technology stack.

Looking for developers for your project?

What's inside

BottomNavigationView is a new control since Android Support Design v25. This source code demonstrate the way to bring it into Xamarin.Forms.

However, BottomNavigationView is very limited from customizing, we have to employ library BottomNavigationViewEx as a patch.

In this code, we have

  • A custom BottomTabbedPage
  • A custom BottomTabbedRenderer

We could

  • change color of background, text of the bar, each item
  • chagne the height of the bar
  • change text typeface


  • BottomNavigationViewEx nuget

How to use

Install NUGET package

Install-Package Naxam.BottomTabbedPage

Add XML namespace in your XAML


Change the root element to BottomTabbedPage (change the code behind as well)

    <local:Page1 />
    <local:Page2 />
    <local:Page3 />
    <local:Page4 />
    <local:Page5 />

Change the colors/heights in your activity class

BottomTabbedRenderer.BackgroundColor = new Android.Graphics.Color(23, 31, 50);
BottomTabbedRenderer.FontSize = 10;
BottomTabbedRenderer.IconSize = 20;
BottomTabbedRenderer.ItemTextColor = stateList;
BottomTabbedRenderer.ItemIconTintList = stateList;
BottomTabbedRenderer.Typeface = Typeface.CreateFromAsset(this.Assets, "HiraginoKakugoProNW3.otf");
BottomTabbedRenderer.ItemBackgroundResource = Resource.Drawable.bnv_selector;
BottomTabbedRenderer.ItemSpacing = 8;
BottomTabbedRenderer.ItemPadding = new Xamarin.Forms.Thickness(8);
BottomTabbedRenderer.BottomBarHeight = 80;
BottomTabbedRenderer.ItemAlign = BottomTabbedRenderer.ItemAlignFlags.Center;

Use Iconize for menu item

BottomTabbedRenderer.MenuItemIconSetter = (menuItem, iconSource) => {
    var iconized = Iconize.FindIconForKey(iconSource.File);
    if (iconized == null)
        BottomTabbedRenderer.DefaultMenuItemIconSetter.Invoke(menuItem, iconSource);


    var drawable = new IconDrawable(this, iconized).Color(Color.White).SizeDp(20);


Source Code

  • Naxam.BottomNavs.Platform.Droid/*.cs
  • Naxam.BottomNavs.Forms/BottomTabbedPage.cs


This library currently uses BottomNavigationViewEx from @ittianyu BottomNavigationViewEx library.


BottmTabbedPage is released under the Apache License license. See LICENSE for details.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
C Sharp (277,106
Android (41,700
Ios (19,612
Xamarin (1,779
Xamarin Forms (1,253
Bottomnavigationview (112
Bottom (40
Tabbedpage (8
Bottomnavigationviewex (3
Bottomtabbedpage (3
Related Projects