Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Enhancement] Android: TabbedPage: Bottom Tab Bar #1675

Closed
kingces95 opened this issue Jan 26, 2018 · 89 comments

Comments

Projects
@kingces95
Copy link
Member

commented Jan 26, 2018

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.

@pauldipietro pauldipietro added this to New in Triage Jan 26, 2018

@kingces95 kingces95 added this to Backlog in Enhancements Jan 26, 2018

@davidortinau

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2018

Related #1400

@kingces95 kingces95 changed the title [Enhancement, Placeholder] Bottom Tab Bar on Android or Top Tab Bar on iOS [Enhancement] Android: TabbedPage: Bottom Tab Bar Jan 27, 2018

@hartez hartez removed this from New in Triage Jan 29, 2018

@samhouts samhouts moved this from Backlog to Ready for Implementation in Enhancements Jan 29, 2018

@mikescandy mikescandy referenced this issue Jan 30, 2018

Merged

[Android] TabbedPage: Bottom Tab Bar #1748

4 of 4 tasks complete
@mikescandy

This comment has been minimized.

Copy link
Contributor

commented Jan 30, 2018

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.

@PureWeen PureWeen added the p/Android label Jan 30, 2018

@davidortinau davidortinau self-assigned this Jan 31, 2018

@davidortinau davidortinau moved this from Ready for Implementation to In Progress in Enhancements Jan 31, 2018

@lemieuxs

This comment has been minimized.

Copy link

commented Mar 19, 2018

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.

@samhouts samhouts added this to Ready in v3.1.0 via automation Apr 12, 2018

@samhouts samhouts moved this from Ready to In Progress in v3.1.0 Apr 12, 2018

@rcunniffe

This comment has been minimized.

Copy link

commented Apr 17, 2018

@mikescandy any update on this?

@PureWeen PureWeen self-assigned this Apr 19, 2018

@samhouts samhouts moved this from In Progress to Done in v3.1.0 May 10, 2018

Enhancements automation moved this from In Progress to Done May 14, 2018

@topfunet

This comment has been minimized.

Copy link

commented May 24, 2018

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

@niels9001

This comment has been minimized.

Copy link

commented May 29, 2018

When will this enhancement roll out?

@rcunniffe

This comment has been minimized.

Copy link

commented May 29, 2018

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

@niels9001

This comment has been minimized.

Copy link

commented May 29, 2018

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

This comment has been minimized.

Copy link

commented May 29, 2018

@netonjm

This comment has been minimized.

Copy link

commented May 29, 2018

It's me :-)

@niels9001

This comment has been minimized.

Copy link

commented Jul 12, 2018

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

@taramasalata

This comment has been minimized.

Copy link

commented Jul 12, 2018

@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

This comment has been minimized.

Copy link

commented Jul 13, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jul 13, 2018

@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

This comment has been minimized.

Copy link

commented Jul 14, 2018

@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

This comment has been minimized.

Copy link

commented Jul 14, 2018

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

This comment has been minimized.

Copy link

commented Jul 14, 2018

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

This comment has been minimized.

Copy link

commented Jul 14, 2018

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

@PureWeen

This comment has been minimized.

Copy link
Contributor

commented Jul 14, 2018

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

This comment has been minimized.

Copy link

commented Jul 15, 2018

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

This comment has been minimized.

Copy link

commented Jul 15, 2018

@ricardouffcomp

This comment has been minimized.

Copy link

commented Jul 15, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jul 15, 2018

@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

This comment has been minimized.

Copy link

commented Jul 16, 2018

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

@marcelocferdeveloper

This comment has been minimized.

Copy link

commented Jul 18, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jul 18, 2018

@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

@marcelocferdeveloper

This comment has been minimized.

Copy link

commented Jul 18, 2018

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

@PureWeen

This comment has been minimized.

Copy link
Contributor

commented Jul 18, 2018

@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

This comment has been minimized.

Copy link

commented Aug 10, 2018

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

@amrkamal1993

This comment has been minimized.

Copy link

commented Aug 12, 2018

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

@PureWeen

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2018

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

@amrkamal1993

This comment has been minimized.

Copy link

commented Aug 13, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2018

@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?

@samhouts samhouts removed this from Done in v3.1.0 Sep 11, 2018

@samhouts samhouts added this to In Progress in v3.2.0 Sep 11, 2018

@samhouts samhouts added this to In Progress in v3.1.0 Sep 12, 2018

@samhouts samhouts moved this from In Progress to Done in v3.2.0 Sep 12, 2018

@samhouts samhouts moved this from In Progress to Done in v3.1.0 Sep 12, 2018

@samhouts samhouts removed this from Done in v3.2.0 Sep 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.