[Enhancement] Android: TabbedPage: Bottom Tab Bar

[kingces95]

Rationale

The latest android Material Design guidelines talk about a bottom navigation bar.
https://material.io/guidelines/components/bottom-navigation.html#

Implementation

Expose a switch on the TabbedPage that causes it to render on android using BottomNavigationView.

public static class TabbedPage
{
	public static readonly BindableProperty UseBottomNavigation;

	public static bool GetUseBottomNavigation(BindableObject element);
	public static void SetUseBottomNavigation(BindableObject element, bool value);

	public static bool UseBottomNavigation(
		this IPlatformElementConfiguration<Android, FormsElement> config
	);
	public static IPlatformElementConfiguration<Android, FormsElement> SetUseBottomNavigation(
		this IPlatformElementConfiguration<Android, FormsElement> config, 
		bool value
	);
}

Expected Result

TabbedPage is rendered with BottomNavigationView.

Implications for CSS

None.

Backward Compatibility

None.

Difficulty : Moderate

Either the mapping is natural so its easy, else we shouldn't shove it into a TabbedView and we need to revisit the design.

[davidortinau]

Related #1400

[mikescandy]

Hi, I just opened a pull request on this issue. I have a few questions about the implementation, but it is a starting point.
The mapping was obvious enough.

[lemieuxs]

I am reallly looking forward this pull-request being merge into Xamarin Forms. Is there an E.T.A or something. I haven't found any viable solution to have tabbed page at the bottom on Android.

[rcunniffe]

@mikescandy any update on this?

[topfunet]

Finally, I am looking farword to this so long!
Thank you so much!

[niels9001]

When will this enhancement roll out?

[rcunniffe]

+1
can I get it on nightly build? cc @PureWeen @davidortinau

[niels9001]

And how does it work? Can we set it in the XAML of our Forms app as well (as a property of the TabbedPage)?

[rcunniffe]

@netonjm I think it's just a prop "UseBottomNavigation" https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderer.cs#L60

but not really sure of the details (icons and colours).

[netonjm]

It's me :-)

[niels9001]

@bverp Close VS, delete the obj and bin folder and restart the project. That should work, atleast it did for me.

[taramasalata]

@niels9001 that didn't work for me. @bverp did you get it working? I tried downloading and building this project, but get the error: The name ToolbarPlacement' does not exist in the current context
https://github.com/15mgm15/XamarinFormsBottomTabbedPage

[taramasalata]

I'm doing my nut a bit - does anyone have time to help?
I tried a number of things to get bottom tabs in Android, including both options in this link. Whatever I do, my solution does not recognise the update.
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
I have forms version 3.1.0.637273 (and have tried the last 5 releases/prereleases too).
I have cleaned, built, rebuilt, deleted the bin/obj directories - I cannot seem to see this update at all no matter what I do.

For example, this is my current XAML

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ProjName"
             x:Class="ProjName.MainPage"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="Black"
            android:TabbedPage.BarSelectedItemColor="Red">
    <local:LoginPage Title="Favorites" Icon="ic_favorites.png" />
    <local:LoginPage Title="Friends" Icon="ic_friends.png" />
    <local:LoginPage Title="Nearby" Icon="ic_nearby.png" />
    <local:LoginPage Title="Recents" Icon="ic_recents.png" />
    <local:RegistrationPage Title="Restaurants" Icon="ic_restaurants.png" />
</TabbedPage>

and the result is

No property, bindable property, or event found for 'ToolbarPlacement', or mismatching type between value and property.

Similar problem doing it programatically - it simply does not recognise that update.

I'm on Windows VS, using 8.1 Android for testing, and its a shared rather than .net project. If anyone can tell me what I'm missing it would make me very happy.

@PureWeen?

[davidortinau]

@taramasalata confirm that all your projects are using the most recent version of 3.1.0. Something is not matching up.

You can also check my sample project here: https://github.com/davidortinau/TheLittleThingsPlayground

I also confirmed I could do the bottom tabs from a shared project without error. Project:
App25.zip

[taramasalata]

@davidortinau Thank you for helping. I have tried variations of this in 8 different solutions. I have updated all projects to 3.1.0 and triple checked everything. I have checked the "updates" tab for each one repeatedly they are all up to date. I can't think what else to try. I'll try your sample projects in the morning and get back to you. Maybe I should try reinstalling VS.

[taramasalata]

Your app25 will not build with error : No property, bindable property, or event found for 'ToolbarPlacement', or mismatching type between value and property.

Are you on Windows or Mac?

I'm going to try a complete reinstall of VS now I really cannot think what else to try

[taramasalata]

Nope. No joy with fresh install, running App25. This is so frustrating.
error: Position 6:13. No property, bindable property, or event found for 'ToolbarPlacement', or mismatching type between value and property.

[taramasalata]

Are there any packages I need for this beside Xamarin.Forms?

[PureWeen]

Hmm something in your build tool chain just isn't quite right @taramasalata
Maybe set the build output to verbose to see any messages? Check your Android Sdk make sure you have latest build tools? Install 4.7.1 sdk see if that resolves? delete all your cached Xamarin.forms nugets
c:\users<name>.nuget

Use something like ILSpy or dotpeek to look at the dlls in your debug directory and check the version or see if you can find those values in there?

Try a code base approach instead of XAML?

[taramasalata]

Thank you @PureWeen. I tried both code based and xaml. I also tried reinstalling VS and tried the "preview" version too. It's likely my uninstall/reinstall didn't delete the .nuget files though. I'll try all your suggestions now.

[taramasalata]

Having reinstalled all things Android this now works. Thanks so much all! Quick Q am I correct in thinking this will only run on Android 8.1 up?

[ricardouffcomp]

Hi @taramasalata. I had a similar issue and it got fixed using the following steps:

• Deleting all "bin" and "obj" folders of my app
• Click on "Clean Solution"
• Restart Visual Studio
• Click on "Rebuild Solution".

[PureWeen]

@taramasalata YAY!!!! It should run on any device with at least API 15

In building this I tested against API 15, 19, 23, 27

Getting the tint colors working on 19 and 15 was really fun

[bverp]

@taramasalata yes i got it working after adding using Xamarin.Forms.PlatformConfiguration.AndroidSpecific and restarting VS and cleaning the solution.

[mcferdev]

When use on Top, works with 6 Childrens. When is at the Bottom, just 5.
The app crashs with the message "Java.Lang.IllegalArgumentException: "

[PureWeen]

@marcelinhovt yea that's an android limitation.

The BottomNavBar in Android only supports 5 items and there really isn't anyway for us to get around this

[mcferdev]

@PureWeen oh...i didn´t know. Thanks... I will try to write some render to extend

[PureWeen]

@marcelinhovt so what I mean is that natively the BottomNavigationBar in android doesn't support more then 5 items. That's not a limitation imposed by our design

[marciosouzajunior]

There is a way to set elevation on bottom tab bar?

[amrkamal1993]

I Have a new problem in android limitation even i have only 5 tabs app is crashing

[PureWeen]

@amrkamal1993 if you could create a repro and a new issue then we can hopefully address the issue

[amrkamal1993]

@PureWeen thank PureWeen , the exception happens when i add title icon in toolbar , i have bottom tab and toolbar , is that a problem which isn't handled

[PureWeen]

@amrkamal1993 all the test code we have for bottom tab uses icons.

Can you post a repro or code I can test to see if I can recreate the crash?