Tab Bar does not change its font

26 Views Asked by At

Material TabBar does not change its font with any style or theme settings.

I tried looking for attributes to help me change the font in the tab, but I couldn't find any. Then I came up with the idea to write my own themes for it. On preview everything looks fine. But when I run the application on emulator, the font changes. Its size and letters that were in large case become small case.

In android studio: Preview in android studio

When I start app in emulator: App in emulator

Tab Bar

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    style="@style/Widget.App.TabLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/padding24"
    android:background="@color/white"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:tabIndicatorColor="@color/purpura_blue"
    app:tabIndicatorHeight="2dp"
    app:tabRippleColor="@null"
    app:layout_constraintTop_toBottomOf="@+id/relatedLabel">

Style for tab bar

<style name="Theme.App" parent="Theme.Material3.Light.NoActionBar">
        ...
        <item name="colorPrimary">@color/purpura_blue</item>
        <item name="colorSurface">@color/purpura_blue</item>
        <item name="colorOnSurface">@color/purpura_blue</item>
        <item name="textAppearanceLabelLarge">@style/TextAppearance.App.LabelLarge</item>
    </style>

    <style name="TextAppearance.App.LabelLarge" parent="TextAppearance.Material3.LabelLarge">
        <item name="fontFamily">@font/roboto_regular</item>
        <item name="android:fontFamily">@font/roboto_regular</item>
    </style>


    <style name="Widget.App.TabLayout" parent="Widget.Material3.TabLayout">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.TabLayout</item>
        <item name="tabTextAppearance">@style/TextAppearance.App.LabelLarge</item>
    </style>

    <style name="ThemeOverlay.App.TabLayout" parent="">
        <item name="colorPrimary">@color/purpura_blue</item>
        <item name="colorSurface">@color/purpura_blue</item>
        <item name="colorOnSurface">@color/purpura_blue</item>
    </style>
0

There are 0 best solutions below