Xamarin forms TabbedPage icons are tiny

Question

Using a TabbedPage with five tabs, though the issue is the same with only two, I see the rendered icons being very small, as shown in this image, using some placeholder graphics.

I have tried images at all pixel resolutions from 32x32 to 512x512 and they all render the same size. You would expect an option to set this, but when looking for solutions, it seems to always boil down to making custom renderes. I have not seen anyone complaining about tiny icons, though, but generally more complex issues, so I am still hoping for a generalized forms solution.

In the screenshot (android on device) I use a master detail page to give a toolbar and left menu, but the issue is the same when I have a clean TabbedPage on its own.

The definition of the TabbedPage is trivial, so I doubt there is any issue there

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            xmlns:views="clr-namespace:CloudDash.Views"
            x:Class="CloudDash.Views.TabPage">

    <TabbedPage.Children>
        <views:ThermalingPage IconImageSource="fly.png"/>
        <views:DataPage IconImageSource="fly.png"/>
        <views:FlightPage IconImageSource="fly.png"/>
        <views:RoutePage IconImageSource="fly.png"/>
        <views:AwarenessPage IconImageSource="fly.png"/>
    </TabbedPage.Children>

</TabbedPage>

Leon Lu - MSFT Leon Lu - MSFT · Accepted Answer · 2020-05-29T02:55:43

If you want to make the icon to bigger, you have to make a custom renderer to achieve it. Here is running screenshot.

In the Android folder. create a custom renderer MyTabbedPageRenderer.cs.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.Content.Res;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Support.V4.View;
using Android.Views;
using Android.Widget;
using App22.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))]
namespace App22.Droid
{
     public class MyTabbedPageRenderer:TabbedPageRenderer
    {
        public MyTabbedPageRenderer(Context context) : base(context)
       {

       }

        protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
        {
            base.SetTabIcon(tab, icon);
            tab.SetCustomView(Resource.Layout.Custom_tab_layou);

            var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);

            imageview.SetBackgroundDrawable(tab.Icon);

        }
    }
}

Create a Custom_tab_layou.xml in layout folder.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="61dp">
     <ImageView
        android:id="@+id/icon"
        android:layout_width="38dp"
        android:layout_height="38dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp" />

</LinearLayout>

In the IOS, you can refer to this thread:

https://forums.xamarin.com/discussion/44069/tab-bar-icon-sizing

You also could make a feature request in xamarin part of github page, PG will see it.

https://github.com/xamarin/Xamarin.Forms/issues

Xamarin forms TabbedPage icons are tiny

2 Answers