Need help to improve the appearance on Xamarin iOS tab

Question

I want to improve the size and background of my content page on ios,

var About = new ContentPage() { Title = "About" };
var layout = new StackLayout();
var line1 = new Label() { Text = viewModel.Member.Line1, FontSize = 16, HorizontalTextAlignment = TextAlignment.Center };
var MapTab = new ContentPage() {Title = "Map"};

Android:

The title of the content page appears very small on ios and not visible. I need help in trying to improve the looks and make it bigger.

Answer 1

I created a content class for the two pages I wanted to improve on, the map and the memberaboutpage and I instead of using the content page, I did this

   var About = new MemberAboutPage { Title = "About" };
        var layout = new StackLayout();

        var MapTab = new MapPage() { Title = "Map" };

Then I added the pages to the pages I created and mirrored to the ios rendere page below, this page formats the tabs and makes them more nicer looking and alos prevents the overlapping on iPhone X. Happy Programming Mates

'[assembly: ExportRenderer(typeof(CardPage), typeof(MyiOSTabbedPage))]
 [assembly: ExportRenderer(typeof(LoginPage), typeof(MyiOSTabbedPage))]
 [assembly: ExportRenderer(typeof(MemberAboutPage), typeof(MyiOSTabbedPage))]
 [assembly: ExportRenderer(typeof(MapPage), typeof(MyiOSTabbedPage))]
 namespace CHA.iOS.Renderers
 {
 public class MyiOSTabbedPage : PageRenderer
{
    public override void ViewWillLayoutSubviews()
    {
        base.ViewWillLayoutSubviews();

        nfloat tabSize = 44.0f;

        UIInterfaceOrientation orientation = UIApplication.SharedApplication.StatusBarOrientation;

        CGRect rect = this.View.Frame;
        rect.Y = this.NavigationController != null ? tabSize : tabSize + 20;
        this.View.Frame = rect;

        if (TabBarController != null)
        {
            CGRect tabFrame = this.TabBarController.TabBar.Frame;
            tabFrame.Height = tabSize;
            tabFrame.Y = this.NavigationController != null ? 0 : 0;
            this.TabBarController.TabBar.Frame = tabFrame;
            this.TabBarController.TabBar.BarTintColor = UIColor.FromRGB(234,232,232);
            var textAttr = new UITextAttributes
            {
                Font = UIFont.SystemFontOfSize(20)
            };
            var selectedAttr = new UITextAttributes
            {
                TextColor = UIColor.FromRGB(63,165,186),
                Font=UIFont.BoldSystemFontOfSize(20)
            };
            foreach (var i in this.TabBarController.TabBar.Items)
            {
                i.SetTitleTextAttributes(textAttr, UIControlState.Normal);
                i.SetTitleTextAttributes(selectedAttr, UIControlState.Selected);
            }
        }
    }
}'

Answer 2

You'll have to implement Custom Renderer for your TabbedPage. See this link:

Extending TabbedPage in Xamarin Forms.

It says, that:

To do these customizations we will use a custom renderer on each platform to render the TabbedPage.

I will duplicate the code snippets from the source as a example:

YourTabbedPage.xaml:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="CustomTabbedPage.MainPage"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.ToolbarPlacement="Bottom">
    <TabbedPage.Children>   
        <ContentPage Title="Home" Icon="ic_home.png" BackgroundColor="White"/>
        <ContentPage Title="Favorites" Icon="ic_favorite.png" BackgroundColor="White"/>
        <ContentPage Title="App" Icon="app_logo_unselected.png" x:Name="home" BackgroundColor="White"/>
        <ContentPage Title="Friends" Icon="ic_people.png" BackgroundColor="White"/>
        <ContentPage Title="Settings" Icon="ic_settings.png" BackgroundColor="White"/>
    </TabbedPage.Children>
</TabbedPage>

iOS Custom Renderer:

public class ExtendedTabbedPageRenderer : TabbedRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        if (TabBar?.Items == null)
            return;

        var tabs = Element as TabbedPage;
        if (tabs != null)
        {
            for (int i = 0; i < TabBar.Items.Length; i++)
            {
                UpdateTabBarItem(TabBar.Items[i], tabs.Children[i].Icon);
            }
        }

        base.ViewWillAppear(animated);
    }

    private void UpdateTabBarItem(UITabBarItem item, string icon)
    {
        if (item == null || icon == null)
            return;

        // Set the font for the title.
       item.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("GillSans-UltraBold", 12), TextColor = Color.FromHex("#757575").ToUIColor() }, UIControlState.Normal);
       item.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("GillSans-UltraBold", 12), TextColor = Color.FromHex("#3C9BDF").ToUIColor() }, UIControlState.Selected);

    }
}

Android Custom Renderer:

public class ExtendedTabbedPageRenderer : TabbedPageRenderer
    {
        Xamarin.Forms.TabbedPage tabbedPage;
        BottomNavigationView bottomNavigationView;
        Android.Views.IMenuItem lastItemSelected;
        int lastItemId=-1;

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                tabbedPage = e.NewElement as ExtendedTabbedPage;
                bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;
                bottomNavigationView.NavigationItemSelected += BottomNavigationView_NavigationItemSelected;

                //Call to change the font
                ChangeFont();
            }

            if (e.OldElement != null)
            {
                bottomNavigationView.NavigationItemSelected -= BottomNavigationView_NavigationItemSelected;
            }
        }

        //Change Tab font
        void ChangeFont()
        {
            var fontFace = Typeface.CreateFromAsset(Context.Assets, "gilsansultrabold.ttf");
            var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;

            for (int i = 0; i < bottomNavMenuView.ChildCount; i++)
            {
                var item = bottomNavMenuView.GetChildAt(i) as BottomNavigationItemView;
                var itemTitle = item.GetChildAt(1);

                var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
                var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));

                lastItemId = bottomNavMenuView.SelectedItemId;

                smallTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
                largeTextView.SetTypeface(fontFace, TypefaceStyle.Bold);

                //Set text color
                var textColor = (item.Id == bottomNavMenuView.SelectedItemId) ? tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid() : tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
                smallTextView.SetTextColor(textColor);
                largeTextView.SetTextColor(textColor);
            }
        }

        void BottomNavigationView_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
        {
            var normalColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
            var selectedColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid();

            if(lastItemId!=-1)
            {
                SetTabItemTextColor(bottomNavMenuView.GetChildAt(lastItemId) as BottomNavigationItemView, normalColor);
            }

            SetTabItemTextColor(bottomNavMenuView.GetChildAt(e.Item.ItemId) as BottomNavigationItemView, selectedColor);

            this.OnNavigationItemSelected(e.Item);
            lastItemId = e.Item.ItemId;
        }

        void SetTabItemTextColor(BottomNavigationItemView bottomNavigationItemView, Android.Graphics.Color textColor)
        {
            var itemTitle = bottomNavigationItemView.GetChildAt(1);
            var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
            var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));

            smallTextView.SetTextColor(textColor);
            largeTextView.SetTextColor(textColor);
        }
}