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
Install-Package Naxam.BottomTabbedPage
xmlns:naxam="clr-namespace:Naxam.BottomNavs.Forms;assembly=Naxam.BottomNavs.Forms"<naxam:BottomTabbedPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Demo"
xmlns:naxam="clr-namespace:Naxam.BottomNavs.Forms;assembly=Naxam.BottomNavs.Forms"
x:Class="Demo.MainPage">
<local:Page1 />
<local:Page2 />
<local:Page3 />
<local:Page4 />
<local:Page5 />
</naxam:BottomTabbedPage>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;BottomTabbedRenderer.MenuItemIconSetter = (menuItem, iconSource) => {
var iconized = Iconize.FindIconForKey(iconSource.File);
if (iconized == null)
{
BottomTabbedRenderer.DefaultMenuItemIconSetter.Invoke(menuItem, iconSource);
return;
}
var drawable = new IconDrawable(this, iconized).Color(Color.White).SizeDp(20);
menuItem.SetIcon(drawable);
};- Naxam.BottomNavs.Platform.Droid/*.cs
- Naxam.BottomNavs.Forms/BottomTabbedPage.cs