locked
TabbrdPage tab Ttitles are wrapping as the tabs are no more scrollable RRS feed

  • Question

  • User42522 posted

    I have modified the TabbedPage app created by the Tabbed Page Template to contain 6 tabs. I find all 6 tabs are accommodated within the width of the display and the Tab's Titles are now wrapping, that too awkwardly. See the screenshot attached.

    Previously we used to get a scrollable tab Titles. How can I get back to it?

    Wednesday, September 12, 2018 8:42 PM

Answers

  • User53115 posted

    You should be able to modify/replace your Tabbar.axml and change app:tabMode from "fixed" to "scrollable" without need of a renderer. Make sure you have TabLayoutResource = Resource.Layout.Tabbar; in your MainActivity.

    @Andy Custom renderers are always in the platform project.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, September 13, 2018 4:04 PM

All replies

  • User369979 posted

    I guess you want to achieve that on Android, you can create a custom renderer for your TabbedPage. Then change each child page's TabMode:

    [assembly: ExportRenderer(typeof(MyTabbedPage), typeof(ScrollableTabbedPageRenderer))]
    namespace TabbedPageDemo.Droid
    {
        public class ScrollableTabbedPageRenderer : TabbedPageRenderer
        {
            public ScrollableTabbedPageRenderer(Context context) : base(context)
            {
    
            }
    
            public override void OnViewAdded(Android.Views.View child)
            {
                base.OnViewAdded(child);
                var tabLayout = child as TabLayout;
                if (tabLayout != null)
                {
                    tabLayout.TabMode = TabLayout.ModeScrollable;
                }
            }
        }
    }
    
    Thursday, September 13, 2018 8:12 AM
  • User367427 posted

    Hi, Is the custom renderer added to the Android project or to the Xamarin shared project?

    Thursday, September 13, 2018 2:50 PM
  • User53115 posted

    You should be able to modify/replace your Tabbar.axml and change app:tabMode from "fixed" to "scrollable" without need of a renderer. Make sure you have TabLayoutResource = Resource.Layout.Tabbar; in your MainActivity.

    @Andy Custom renderers are always in the platform project.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, September 13, 2018 4:04 PM
  • User367427 posted

    Thanks for the information and worked great except when I switched the toolbar placement to "bottom"!

    Xamarin.Forms 3.1 introduced this feature but when I set the toolbar placement to bottom with tab mode scrollable it doesn't work. You only see the label of the selected page. Must be a bug??

    Xamarin.Forms.PlatformConfiguration.AndroidSpecific.TabbedPage.SetToolbarPlacement( this, Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement.Bottom);

    Thursday, September 13, 2018 5:55 PM
  • User129559 posted

    What Joe gave you only works for top tabs, as the bottom tab bar does not build using the same xml file.

    You will need to do a renderer for that.

    Thursday, September 13, 2018 6:35 PM
  • User42522 posted

    @LandLu As it is an Xamarin Forms app, can't do custom renderer.

    @JoeManke ThanQ...That worked. I never knew that XF creates axml files for Android.

    Friday, September 14, 2018 2:21 AM
  • User369979 posted

    @ShantimohanElchuri Actually custom renderer is used for Xamarin.Forms.

    Friday, September 14, 2018 2:31 AM
  • User367427 posted

    Hi, Thanks for the feedback. I guess I was expecting that since Toolbar placement = "Bottom" was added to the TabbedPage class XF API's that the would be able to render it correctly?

    Why would a built in component XF TabbedPage work properly with toolbar placement="Top" and when new toolbar placement="Bottom" is selected it doesn't render properly? Is this not a bug in TabbedPage class?

    Friday, September 14, 2018 2:41 PM
  • User53115 posted

    Because the bottom and top tab bars are rendered as different native controls. The top bar is a TabLayout, the bottom bar is a BottomNavigationView.

    Friday, September 14, 2018 2:47 PM
  • User367427 posted

    Thanks Joe, any suggestions of what my options are?
    I'm assuming that the built in toolbarPlacement=Bottom works as described and I'm on my own. I really wanted to leverage Xamarin forms for cross platform benefit but it seems that I am going down a rat hole?

    • Is this problem even fixable writing custom renderers etc. given if Android doesn't have native ui controls?
    Friday, September 14, 2018 6:25 PM
  • User129559 posted

    Since scrollable bottom tabs aren't built in anywhere in Android, it makes sense that you wouldn't find anything to do it in Xamarin.

    Material IO guidelines indicate that it is a bad idea to have a bottom scrolling tab view.

    In either native, Xamarin.Android, or Forms, you would have to roll your own control if that is what you really wanted to do.

    Friday, September 14, 2018 6:30 PM