-3

How can I achieve something like the top bar in the screenshot ("Totale Regioni Province") using a tabbed page custom renderer? Right now I'm using "fake tabs" made of three different labels.

I need to change font family, font size and padding of the tabs.

"Totale Regioni Province" bar

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Asia Piazza
  • 95
  • 2
  • 9
  • What have you tried so far? – Elias Johannes Jul 08 '20 at 10:55
  • Nothing with custom renderer, I tried changing tabbar.xml but it's not what I am looking for since I want to apply the bar design from the photo to this specific page and not the entire app. @EliasJohannes – Asia Piazza Jul 08 '20 at 11:22
  • In this case you can create a custom control and then a custom renderer specifically for this control. There are tons of tutorials on the web and it's pretty straight forward. After you made the custom control you can use it only when you need it and stick to the standard renderer for your other cases. – Elias Johannes Jul 08 '20 at 13:49
  • What tutorial would you recommend to a beginner in custom control and then a custom renderer? – Asia Piazza Jul 08 '20 at 14:39

1 Answers1

4

When you want to change the font of tab page, you could use the custom renderer to reset it.

MyTabbedPageRenderer.cs:

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

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

        if (e.NewElement == null || e.OldElement != null)
            return;

        TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
        Android.Views.ViewGroup vgroup = (Android.Views.ViewGroup)tablayout.GetChildAt(0);
        for (int i = 0; i < vgroup.ChildCount; i++)
        {
            Android.Views.ViewGroup vvgroup = (Android.Views.ViewGroup)vgroup.GetChildAt(i);
            Typeface fontFace = Typeface.CreateFromAsset(this.Context.Assets, "Trashtalk.ttf");
            for (int j = 0; j < vvgroup.ChildCount; j++)
            {
                Android.Views.View vView = (Android.Views.View)vvgroup.GetChildAt(j);
                if (vView.GetType() == typeof(Android.Support.V7.Widget.AppCompatTextView) || vView.GetType() == typeof(Android.Widget.TextView))
                {
                    //here change textview style
                    TextView txtView = (TextView)vView;
                    txtView.TextSize = 14f;
                    txtView.SetTypeface(fontFace, TypefaceStyle.Normal);
                }
            }
        }
    }
  }
}

I use a Tabbed page template project for example.

enter image description here

Update:

Create a Font folder in Resource. Add .ttf file and myfont.xml in it.

<?xml version="1.0" encoding="utf-8" ?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
 <font android:font="@font/Samantha"
          android:fontStyle="normal"
          android:fontWeight="400"
          app:font="@font/Samantha"
          app:fontStyle="normal"
          app:fontWeight="400"/>

</font-family>

enter image description here

Style.xml

<style name="MyTabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyTabTextAppearance</item>
</style>

<style name="MyTabTextAppearance" parent="TextAppearance.AppCompat.Button">
<item name="android:textSize">20sp</item>
<item name="android:fontFamily">@font/myfont</item>
</style>

Apply styles in Tabbar.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="@android:color/white"
app:tabGravity="fill"
app:tabMode="fixed" 
style="@style/MyTabLayout"/>
Wendy Zang - MSFT
  • 10,509
  • 1
  • 7
  • 17