Placing Tabbed Page Toolbar at bottom forces design to display tab title only when a tab is active

mac121

I followed this link https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/tabbedpage-toolbar-placement-color for rendering a tabbed toolbar at bottom using C#.

As given in the sample screenshot, the title of a tab is displayed/shown only when it is active or selected

I think this is by default. Is there any way to force it to display all tab titles though they are selected/unselected

NOTE: I didnot render this tabbed toolbar using XAML because, for the first tab, I have its own pagemodel that is resolved to bind values to the page (first page). If I directly specify my first page to the tabbed children, I get the error Object reference not set to an instance of an object as those values from pagemodel are not binded to the respective page. Please answer my question first and then let me know if resolving is possible through XAML tabbed rendering. I am curious to know both as I don't know which will help in the longer run due to its own limitations. Thanks!

jezh

Yes, it is the case when we place Tabbed Page at bottom where we have more than 3 tabs ,and there is no such problem when we put it on top.

But you can actually get it working in Xamarin.Forms with a custom renderer. , and someone already posted a GitHub issue!

And there is a case about this which has resolved this problem, you can check it.The link is ：
https://stackoverflow.com/questions/51864505/in-xamarin-forms-3-1-when-using-tabbed-page-with-4-tabs-how-can-i-prevent-sli

Hope it can help you.

JoeManke

I don't know if/how it is implemented by Android and Xamarin, but the Material Design guidelines suggest that it's dependent upon how many tabs you have. 3 or 4 tabs will show text, 5 might not depending on size constraints.

jezh

Yes, it is the case when we place Tabbed Page at bottom where we have more than 3 tabs ,and there is no such problem when we put it on top.

But you can actually get it working in Xamarin.Forms with a custom renderer. , and someone already posted a GitHub issue!

And there is a case about this which has resolved this problem, you can check it.The link is ：
https://stackoverflow.com/questions/51864505/in-xamarin-forms-3-1-when-using-tabbed-page-with-4-tabs-how-can-i-prevent-sli

Hope it can help you.

mac121

Thanks so much, @JoeManke and @jezh for your replies.

@jezh,

And there is a case about this which has resolved this problem, you can check it.The link is ：
https://stackoverflow.com/questions/51864505/in-xamarin-forms-3-1-when-using-tabbed-page-with-4-tabs-how-can-i-prevent-sli

This link fixed my problem. I ended up just adding a custom TabbedPageRenderer to my android project.

The code given in that Stackoverflow link by J. Aguilar is quite hard to grasp. It would be great if you can help me in it, so that I know what I have done.

One more important question : Is it possible to display bar (filled line) above the icon for the selected/active tab in the tabbed page like this ??

Thanks!