AppCompat toolbar title font is not set

[aleien]

Hi! I am trying to style toolbar font, but nothing happens. I am able to set font color and style, but not the font itself. I am using the latest calligraphy (2.2.0), appcompat (23.4.0), Android 6.0.

<android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:title="@string/app_name"
        app:titleTextAppearance="@style/DancingWhite"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/>

...

<style name="DancingWhite" parent="android:TextAppearance">
        <item name="android:textSize">22sp</item>
        <item name="android:textColor">@color/colorTitle</item>
        <item name="android:textStyle">italic</item>
        <item name="fontPath">fonts/DancingScript-Regular.otf</item>
    </style>

[chrisjenx]

We don't use the app:titleTextApperance but the android:titleTextApperance

[kevinvanmierlo]

@chrisjenx I take it app:titleTextAppearance can't be supported? I can't use android:titleTextAppearance until I only want to support lollipop or higher

[chrisjenx]

You can use android:titleTextAppearance you only need to compile above API 20 to use it.

On Tue, 28 Jun 2016 at 10:56 Kevin van Mierlo [email protected] wrote:

@chrisjenx https://github.com/chrisjenx I take it app:titleTextAppearance can't be supported? I can't use android:titleTextAppearance until I only want to support lollipop or higher

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/chrisjenx/Calligraphy/issues/295#issuecomment-229005141, or mute the thread https://github.com/notifications/unsubscribe/ABHRsZjRfrAeMHSmoAXqrRRxfCI3e57jks5qQO_ggaJpZM4ItBgi .

[kevinvanmierlo]

@chrisjenx It says that this attribute will only be used by api 21 and above. So then my title is only styled on lollipop and above right? Or am I missing something here?

[SjoerdvGestel]

some working sample code would be appreciated, tried to apply the above mentioned method but does not work

[aleien]

If anybody meet same error, I found error in mine code which was causing problems. I was wrapping base context of application, not the activity. No wonders it didn't work.

@Override protected void attachBaseContext(Context newBase) { super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase)); }

This should be overriden in your Activity class.

[SjoerdvGestel]

it works everywhere in the app except the toolbar, I've tried all examples i can find but it wont show up, i first thought it was a bad font but it works in all other views so is just using it in the toolbar (trough styles) that does not work. I rather don't add a view to the toolbar but that seems to be the only way.

[SjoerdvGestel]

its a style issue, you need to be really careful using the correct ones, but it works now

[dimsuz]

@SjoerdvGestel how did you solve it? I use app:titleTextAppearance and it applies all the stuff from textAppearance I pass except the fontPath

[SjoerdvGestel]

i needed to style a snackbar, also with background color so i made a helper class that applies a given font with CalligraphyUtils.applyFontToTextView

[dimsuz]

Ah, thanks. So it seems, I'll have to resort to this solution too until this issue gets more research/fixes

[max-pfeiffer]

+1 here: using calligraphy:2.2.0, appcompat-v7:25.1.1

Everything is set on the toolbar title from the style (color, size) except the font. And I added the attachBaseContext override in the activity.

    <style name="ToolbarTitleTextAppearance" parent="android:TextAppearance">
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">22sp</item>
        <item name="fontPath">fonts/Roboto-Light.ttf</item>
    </style>

        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_listview_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            app:titleTextAppearance="@style/ToolbarTitleTextAppearance"/>

[redevill]

I am also having similar issues with the supportActionBar. You can apply a custom layout to the Title of the supportActionBar, as below: Now all the styling I have specified comes through, with the exception of the Font choice!?

   ActionBar abr = getSupportActionBar();

    if(abr != null) {
        abr.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        abr.setCustomView(R.layout.actionbar);

}

Here is the layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content">

<TextView
    **fontPath="fonts/MyCUSTOMFONT.ttf"**
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:layout_marginLeft="80sp"
    android:textColor="#ffffff"
    android:id="@+id/custom_action_bar_title"
    android:textSize="12sp"
    tools:ignore="MissingPrefix" />

[redevill]

Ooops, forgot to state that I am using calligraphy 2.2.0 and com.android.support:appcompat-v7:23.4.0

[AnoDest]

The problem is that Toolbar creates TextViews for title and subtitle programmatically inside itself. It means that it doesn't use wrapped LayoutInflater by Calligraphy. Instead it uses system Typefaces depending on fontFamily and fontStyle from textAppearence attribute.

But Calligraphy listens for GlobalLayout changes and tries to load style from theme.

So what I've done: Add activity theme and customize ActionBarStyle:

<style name="ActivityTheme" parent="AppTheme.Base">
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>
</style>

<style name="ActionBarStyle" parent="Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:titleTextStyle">@style/ToolbarTitleTextAppearance</item>
</style>

<style name="ToolbarTitleTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textSize">20sp</item>
        <item name="fontPath">fonts/Roboto-Medium.ttf</item>
</style>

[Guimareshh]

Hey @AnoDest

Your post help me to solve half of my issues ! For the title of the ToolBar I'm now able to have my own font, but for the subtitle it kept the title font instead of taking the one I set :

<style name="AvoxatInAppThemeConsultation.NoActionBar" parent="InAppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>
    </style>

<style name="ActionBarStyle" parent="Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:titleTextStyle">@style/ToolbarTitleAppearance</item>
        <item name="android:subtitleTextStyle">@style/ToolbarSubtitleAppearance</item>
    </style>

    <style name="ToolbarTitleAppearance" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">@dimen/font_large</item>
        <item name="fontPath">fonts/Poppins-SemiBold.ttf</item>
        <item name="android:textColor">@color/greyish_brown</item>
    </style>

    <style name="ToolbarSubtitleAppearance" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">@dimen/font_small</item>
        <item name="fontPath">fonts/Poppins-Regular.ttf</item>
        <item name="android:textColor">@color/steel</item>
    </style>

The issue is very strange, because textSize and textColor is different between both. But for font the subtitle keep using the font from title.

Any idea to solve this issue ? Thanks !

[sp00ne]

Above solutions are for Action Bar. Toolbar is a generalization of the Action Bar so the solutions are not viable unless you set your toolbar to be the action bar. If you have a standalone toolbar it won't work.

As of now there is not a solution unless you set it yourself through CaligraphyUtils. I'd say that doesn't qualify as a solution :) I've tried using styles, titleTextAppearance, titleTextStyle for a toolbar without any luck

[miankhalid]

Nothing worked for me so this is the function that I wrote to workaround the issue:

    private void setToolBarFont() {
        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        for (int i = 0; i < toolbar.getChildCount(); i++) {
            final View child = toolbar.getChildAt(i);
            if (child instanceof TextView) {
                final TextView textView = (TextView) child;
                CalligraphyUtils.applyFontToTextView(textView, TypefaceUtils.load(getAssets(), "fonts/OpenSans-Semibold.ttf"));
            }
        }
    }

[gomezpaulino]

Based on @miankhalid and using Kotlin we can create an extension for Toolbar like this:

fun Toolbar.setTitleStyle(style: Int) { for (i in 0 until childCount) { val child = getChildAt(i) if (child is TextView) { TextViewCompat.setTextAppearance(child, style) } }

and call it with a defined style

[achunk17]

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="fontPath">@string/font_bold</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
    <item name="fontPath">@string/font_regular</item>
</style>

[androidovshchik]

Another approach, write in activity class

override fun setTitle(title: CharSequence?) {
    val font = Typeface.createFromAsset(assets, "font/Ubuntu-Medium.ttf")
    super.setTitle(CalligraphyUtils.applyTypefaceSpan(title, font))
}

[Tooto]

Hey @AnoDest

Your post help me to solve half of my issues ! For the title of the ToolBar I'm now able to have my own font, but for the subtitle it kept the title font instead of taking the one I set :

<style name="AvoxatInAppThemeConsultation.NoActionBar" parent="InAppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>
    </style>

<style name="ActionBarStyle" parent="Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:titleTextStyle">@style/ToolbarTitleAppearance</item>
        <item name="android:subtitleTextStyle">@style/ToolbarSubtitleAppearance</item>
    </style>

    <style name="ToolbarTitleAppearance" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">@dimen/font_large</item>
        <item name="fontPath">fonts/Poppins-SemiBold.ttf</item>
        <item name="android:textColor">@color/greyish_brown</item>
    </style>

    <style name="ToolbarSubtitleAppearance" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">@dimen/font_small</item>
        <item name="fontPath">fonts/Poppins-Regular.ttf</item>
        <item name="android:textColor">@color/steel</item>
    </style>

The issue is very strange, because textSize and textColor is different between both. But for font the subtitle keep using the font from title.

Any idea to solve this issue ? Thanks !

did u solve problem with text size? I have same problem

[matthewkrueger]

Another approach, write in activity class

override fun setTitle(title: CharSequence?) {
    val font = Typeface.createFromAsset(assets, "font/Ubuntu-Medium.ttf")
    super.setTitle(CalligraphyUtils.applyTypefaceSpan(title, font))
}

I couldn't get anything else to work, but this answer did the trick for me. I have a base activity class that has a "setActionbarTitle" and "setActionbarSubtitle" method and I use this to create a span with the correct font, and now the toolbar has the right font throughout the whole app. Thanks!