How to resize navigation in tabbedpage ?

Answers

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    You want a TitleView in a TabbedPage?

  • fajarhadian1fajarhadian1 Member ✭✭

    @JoeManke said:
    You want a TitleView in a TabbedPage?

    yes, I want to make it like in the picture

  • JoeMankeJoeManke USMember ✭✭✭✭✭
    edited June 20

    If you wrap your TabbedPage in a NavigationPage you can set TitleView attached property, but you can only adjust the size of the navigation bar on Android.

  • fajarhadian1fajarhadian1 Member ✭✭

    @JoeManke said:
    If you wrap your TabbedPage in a NavigationPage you can set TitleView attached property, but you can only adjust the size of the navigation bar on Android.

    can I change the navigation size in tabbedpage?

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    @JoeManke said:
    but you can only adjust the size of the navigation bar on Android.

    There are platform specifics that will help you to make it appear that the bar is larger, but at some point it may be simpler to just do away with the Toolbar and replace it with your own composite control.

  • fajarhadian1fajarhadian1 Member ✭✭
    > @AdamMeaney said:
    > @JoeManke said:
    > but you can only adjust the size of the navigation bar on Android.
    >
    >
    >
    >
    >
    > There are platform specifics that will help you to make it appear that the bar is larger, but at some point it may be simpler to just do away with the Toolbar and replace it with your own composite control.

    what if changing the navigation size on tabbedpage?
  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    @AdamMeaney said:

    @JoeManke said:
    but you can only adjust the size of the navigation bar on Android.

    There are platform specifics that will help you to make it appear that the bar is larger, but at some point it may be simpler to just do away with the Toolbar and replace it with your own composite control.

    Repeating the question gets you repeat answers. The best solution is probably to just remove the Toolbar from your page in general.

    If you want to be more specific, feel free, but currently nothing you are showing has a tabbed page in it. Being in a tabbed page has nothing to do with the size of the Navigation Bar.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    You will likely need to implement a custom renderer for each platform that you want to make this change.

    For iOS, you can add a new general class file to the iOS project named MyTabbedPageRenderer. Then in the file, add this line above the namespace declaration:

    [assembly:Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.TabbedPage),typeof(YourNamespace.MyTabbedPageRenderer))]

    where YourNamespace is the namespace that MyTabbedPageRenderer is in, i.e. the namespace just below where you have this attribute

    Now make the class inherit from Xamarin.Forms.Platform.iOS.TabbedRenderer, e.g.:

    public class MyTabbedPageRenderer : Xamarin.Forms.Platform.iOS.TabbedRenderer

    Then add the following override method to the class:

      public override void ViewWillLayoutSubviews()
    {
        base.ViewWillLayoutSubviews();
        var newHeight = TabBar.Frame.Height + 50;
        CoreGraphics.CGRect tabFrame = TabBar.Frame; //self.TabBar is IBOutlet of your TabBar
        tabFrame.Height = newHeight;
        tabFrame.Y = View.Frame.Size.Height - newHeight;
        TabBar.Frame = tabFrame;
    }
    

    The above will increase the Tabbar height on iOS by 50 pixels from the default. Change the 50 to whatever value you like.

    And for Android, you actually do not need to make a custom renderer since there is an Android layout that you can set a minHeight for the TabLayout. To do this, open the Tabbar.axml file in the resources/layout folder in your Android project. Then add an android:minHeight attribute to the android.support.design.widget.TabLayout element:

     <android.support.design.widget.TabLayout 
    ...
    android:minHeight="300dp"
    />
    

    This sets the height to a fixed 300 pixels. Set it to whatever you want.

    Alternately you can set the height in the MainActivity.OnCreate method. The below is starting from a template Xam.Forms TabbedPage project. Put the following after the LoadApplication(new App()) call:

      Android.Support.Design.Widget.TabLayout tabBar = FindViewById<Android.Support.Design.Widget.TabLayout>(Resource.Id.sliding_tabs);
     tabBar.SetMinimumHeight(300);
    

    Change the Resource.Id to whatever the android:id is for the TabLayout in the Tabbar.axml file

  • BrainfuryBrainfury Member ✭✭

    its really helpfull

Sign In or Register to comment.