https://github.com/naxam/bottomtabbedpage-xamarin-forms

A page control for Xamarin.Forms to place tabs at the bottom.
https://github.com/naxam/bottomtabbedpage-xamarin-forms

android bottom bottomnavigationview bottomnavigationviewex bottomtabbedpage ios tabbedpage xamarin xamarin-forms

Last synced: 5 days ago
JSON representation

A page control for Xamarin.Forms to place tabs at the bottom.

• Host: GitHub
• URL: https://github.com/naxam/bottomtabbedpage-xamarin-forms
• Owner: NAXAM
• License: apache-2.0
• Created: 2017-07-12T06:33:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-06-17T04:32:33.000Z (over 4 years ago)
• Last Synced: 2025-01-22T16:06:14.808Z (13 days ago)
• Topics: android, bottom, bottomnavigationview, bottomnavigationviewex, bottomtabbedpage, ios, tabbedpage, xamarin, xamarin-forms
• Language: C#
• Size: 6.33 MB
• Stars: 94
• Watchers: 9
• Forks: 31
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# BottomTabbedPage

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

|![Tab 1](./art/tab1.png)|![Tab 5](./art/tab5.png)|

|:---:|:---:|

## About

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

# Depedendencies

- BottomNavigationViewEx [nuget](https://www.nuget.org/packages/Naxam.Ittianyu.BottomNavExtension/)

## How to use

### Install NUGET package

```

Install-Package Naxam.BottomTabbedPage

```

### Add XML namespace in your XAML

```xml

xmlns:naxam="clr-namespace:Naxam.Controls.Forms;assembly=Naxam.Controls.Forms"

```

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

```xml

    

    

    

    

    

```

### Change the colors/heights in your activity class

```c#

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

```c#

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);

};

```

## Source Code

- Naxam.BottomNavs.Platform.Droid/*.cs

- Naxam.BottomNavs.Forms/BottomTabbedPage.cs

## Credits

This library currently uses `BottomNavigationViewEx` from @ittianyu [BottomNavigationViewEx](https://github.com/ittianyu/BottomNavigationViewEx) library.

## License

BottmTabbedPage is released under the Apache License license.

See [LICENSE](./LICENSE) for details.