[XF 3.1] Android bottom tab bar position

[vivekshah-zymr]

I have integrated this plugin in my app and works as expected, but now I want to show this tab bar at the bottom position in android, can anyone have some idea for that? I have tried this plugin, but a combination of this both plugin doesn't work. Please help me to get out of this task.

[xabre]

I think the best way is to build a new custom renderer to integrate with the plugin you specified

…

On Fri, Jun 8, 2018, 7:51 AM Vivek Shah ***@***.***> wrote: I have integrated this plugin in my app and works as expected, but now I want to show this tab bar at the bottom position in android, can anyone have some idea for that? I have tried this <https://github.com/NAXAM/bottomtabbedpage-xamarin-forms> plugin, but a combination of this both plugin doesn't work. Please help me to get out of this task. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#48>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AF6sHnqjTRi7wfjVx-066drPuSaDEaVQks5t6hDYgaJpZM4UfiAk> .

[GalaxiaGuy]

This is now supported by the built in Xamarin.Forms TabbedPageRenderer as of 3.1.0.550168-pre3.

https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderer.cs

It's based on the native BottomNavigationView, and it should be possible to base a modification of this plugin on that. However, I suspect it is AppCompat only, and handling both top and bottom is basically implemented just with IsBottomTabPlacement in all the relevant methods.

The placement is controlled with a platform specific ToolbarPlacement:

https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/PlatformConfiguration/AndroidSpecific/TabbedPage.cs

[xabre]

@GalaxiaGuy I think this is the best way to go now :) An adapted renderer for XF 3.1

[nhdanh]

@xabre Are you working for the new XF 3.1 version ?

[GalaxiaGuy]

I did this as a spike:
https://github.com/galaxiaguy/xamarin-forms-tab-badge/commits/spike/android-bottom-nav

It's far from ready for release though:
TLDR: If you have images and use center right, it works.

• Based on pre-release version of Xamarin Forms (but that will solve itself in time).
• Doesn't really work when icons aren't specified - the badges get cropped awkwardly.
• The alignment doesn't really work - center right looks about right for what you'd want for top right.

This version involved changing the original renderer as little as possible - it grabs the correct view from the BottomNavigationView and from there creates the badge view exactly the same as is done for the TabLayout.

I think to do it properly a separate BadgeView would be needed, but I doubt will have time in the immediate future.

[johnfurog]

Hi guys ! Is there any work around to implement badge on Bottom Tabbed Page by Xamain.Forms 3.1 ?

thanks !

[xabre]

Pull requests are welcome :)

[xabre]

Pre-release with XF 3.1 android bottom tab placement suport is out:

https://www.nuget.org/packages/Plugin.Badge/2.1.0-pre.2

Please give it a try and let me know if you spot some problems.

PS: you can use the BadgeMargin property to fine tune the position.

[npagare]

Hi @xabre ,
It is still crashing for me on Android (my device is Oneplus 3; Oreo 8.0). Let me know if you would like me to look at any specific log(s) ?
I am using -

1. XF v3.1.0.69
2. BadgedPlatformTabbedPage [Messier16.Forms.Controls.BadgedPlatformTabbedPage] which is based on your plugin.

Thanks

[NPadrutt]

Hi @xabre
2.1.0-pre.2 works for me. The only thing I noticed is, that the icons on the active tab do not look that nice as before:

I think the animation where the icon is made a bit larger, moves up a bit and is changes the color is no longer present.

[xabre]

@NPadrutt thanks for the feedback, I think I know what is causing this, when the badge is attached to the icon a new parent container layout is added which might affect this behaviour. Will have to find an alternative way to add the badge view without affecting the existing layout structure....

• Find workaround for adding badge to tab layout without modifying the structure for animations./color changes

[xabre]

@IoTFier yes some additional logs would be helpful, like a full stack trace. Alos does it work without your custom renderer (directly with the badgedrenderer)?

[reense]

@xabre thank you for your work on the bottom nav! I've got it working in my own project. However, i think that i have the same problem as @NPadrutt . The text is too close to the image in my case. I attached a screenshot of my tabbedbar. Do you have any idea how to resolve this? :)

[xabre]

@reense Yes, I know what the issue is, will try to find a proper fix :)

[reense]

@xabre Great to hear! Looking forward to it :)

[npagare]

Hi @xabre, good news is that the badge is working without the custom renderer.

Apparently, I am looking for opensource nuget package / plugin that will allow me to host tabbed bar on top in Andriod and in iOS; offers bindable properties to change tab bar height, apply font icons in conjunction with your badge and allow to change text case in Android (which is capital always).

Any recommendations on that ?

Thanks

[reense]

@IoTFier what do you mean with "working without a custom renderer"?

[npagare]

@reense, I tried to use a NuGet package BadgedPlatformTabbedPage which has custom renderer for TabbedPage.

[chien1219]

@IoTFier what do you mean with "working without a custom renderer"?

For me, either.
Badge is not gonna shown when using custom renderer(Buttom navigation view) and I'm trying to figure out why.

[npagare]

@xabre, how are you? Just wanted to know when is the next update coming for 2.1.0?
Thanks

[xabre]

@reense @NPadrutt Fixed the layout issues in 2.1.0-pre.3.
Use margins to fine tune the badge position. Check the sample app.

[xabre]

@IoTFier @chien1219 I would need some sample custom renderer which is not working to debug this. Most probably your custom renderer changed something in the standard view hierarchy and the badge renderer can't find the proper view.layout to attach to.

[NPadrutt]

@xabre I upgrade on my project and it looks very nice now. Thanks for your effort!

[reense]

@xabre thank you for your work! works like a charm now. The users of my app are thankfull ;)

[xabre]

@reense @NPadrutt Glad to hear it! :)