Xamarin.Forms: изменение размера значка и текста на вкладках TabbedPage

В файле Resources/values/style.xml вашего проекта Android вы можете создать стиль:

<style name = "MyTabTextStyle" parent = "Base.Widget.Design.TabLayout">
    <item name = "android:textSize">8sp</item>
</style>

А затем в вашем файле Resources/layout/tabs.axml вы можете использовать стиль:

<android.support.design.widget.TabLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    ... other attributes ...
    app:tabTextAppearance = "@style/MyTabTextStyle" />

Что касается значка, попробуйте это: https://stackoverflow.com/a/46465233/3183946

Кстати, я думаю, что "Молочные продукты" должны быть "Дневниками" в вашем приложении.

После некоторых усилий я заставил его работать для Android, используя TabbedPageRenderer. Создан собственный макет с ImageView и TetxtView ниже Custom_tab_layou.xaml

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:layout_width = "wrap_content"
    android:layout_height = "41dp"
    android:orientation = "vertical">
    <ImageView
        android:id = "@+id/icon"
        android:layout_width = "18dp"
        android:layout_height = "18dp"
        android:layout_gravity = "center_vertical"
        android:layout_marginLeft = "8dp"
        android:layout_marginRight = "8dp"
        android:layout_marginTop = "4dp"
        android:layout_marginBottom = "4dp" />
    <TextView
        android:id = "@+id/tv"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_gravity = "center"
        android:text = "hello"
        android:gravity = "center"
        android:textSize = "11dp"
        android:textColor = "#00FF6F" />
</LinearLayout>

Создан класс MyTabbedPageRenderer

    public class MyTabbedPageRenderer : TabbedPageRenderer
    {
        private Dictionary<Int32, Int32> icons = new Dictionary<Int32, Int32>();
        bool setup;
        ViewPager pager;
        TabLayout layout;
        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);
            var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);

            tv.SetText(tab.Text, TextView.BufferType.Normal);
            imageview.SetBackgroundDrawable(tab.Icon);

            ColorStateList colors2 = null;

            if ((int)Build.VERSION.SdkInt >= 23)
                colors2 = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
            else
                colors2 = Resources.GetColorStateList(Resource.Color.icon_tab);
            tv.SetTextColor(colors2);
        }

        //this is for changing text color of select tab
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (setup)
                return;
            if (e.PropertyName == "Renderer")
            {
                pager = (ViewPager)ViewGroup.GetChildAt(0);
                layout = (TabLayout)ViewGroup.GetChildAt(1);
                setup = true;
                ColorStateList colors = null;

                if ((int)Build.VERSION.SdkInt >= 23)
                    colors = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
                else
                    colors = Resources.GetColorStateList(Resource.Color.icon_tab);

                for (int i = 0; i < layout.TabCount; i++)
                {
                    var tab = layout.GetTabAt(i);
                    var icon = tab.Icon;

                    Android.Views.View view = GetChildAt(i);
                    if (view is TabLayout) layout = (TabLayout)view;

                    if (icon != null)
                    {
                        icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
                        Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
                    }
                }
            }
        }
  }

В моем случае я действительно хотел пропустить все настраиваемые рендереры ... и многие реализации казались намного более трудоемкими, чем следовало бы. Я также реализовал Font Awesome Icons, который казался довольно простым, но во всех найденных мною примерах значки применялись к ярлыкам, а не к страницам с вкладками. После некоторого размышления я наконец скомпилировал это, которое отлично работает и устраняет необходимость в рендерере.

<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
         xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local = "clr-namespace:IBMobile.Views"
         xmlns:local2 = "clr-namespace:FontAwesome"
         x:Class = "IBMobile.Views.HomePage"
         Visual = "Material">
<ContentPage.IconImageSource>
    <FontImageSource FontFamily = "{StaticResource FontAwesomeSolid}" Glyph = "{x:Static local2:IconFont.Home}" />
</ContentPage.IconImageSource>...

Чтобы ответить на вопрос о настройке FontSize: Значок шрифта - это шрифт, поэтому он устанавливается как любой другой. Пример:

<Button x:Name = "btnEmail" Clicked = "BtnEmail_Clicked" CommandParameter = "{Binding email}" FontFamily = "{StaticResource FontAwesomeSolid}" FontSize = "Large" Text = "{x:Static local2:IconFont.Envelope}"  Grid.Column = "3" Grid.Row = "1" BackgroundColor = "#007d5d" Margin = "10" />