Android Toolbar style

Question

I've added a Toolbar to my Lollipop project. However, I'm having trouble styling the Toolbar. My title in the Toolbar appears to have a bold font, but I'd like it to be italic. Any idea how to achieve this? I've tried playing around with the actionbar-style, no luck.

I've set a style on the Toolbar with app:theme="@style/toolbar" and my @style/toolbar (parent ThemeOverlay.AppCompat.ActionBar) is where I'm playing around with no good results.

Solution 1

You can add TextView inside Toolbar, for example :

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/re/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" >

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="italic" />

</android.support.v7.widget.Toolbar>

Solution 2

This is actually really easy. There's a method on Toolbar called setTitleTextAppearance() that everyone seems to be overlooking. Just define your custom textAppearance in styles.xml, such as:

    <style name="MyTitleTextApperance" parent="@android:style/TextAppearance.Medium">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">20sp</item>
</style>

and then in your code, you just call :

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitleTextAppearance(this, R.style.MyTitleTextApperance);

and voila!

Solution 3

The ToolBar title is stylable. Any customization you make has to be made in the theme. I'll give you an example.

Toolbar layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    style="@style/ToolBarStyle.Event"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="@dimen/abc_action_bar_default_height_material" />

Styles:

<style name="ToolBarStyle" parent="ToolBarStyle.Base"/>

<style name="ToolBarStyle.Base" parent="">
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

<style name="ToolBarStyle.Event" parent="ToolBarStyle">
    <item name="titleTextAppearance">@style/TextAppearance.Widget.Event.Toolbar.Title</item>
</style>

<style name="TextAppearance.Widget.Event.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <!--Any text styling can be done here-->
    <item name="android:textStyle">normal</item>
    <item name="android:textSize">@dimen/event_title_text_size</item>
</style>

Solution 4

The problem mentioned above only occurs in Lollipop versions and not in Kitkat and lower versions. Lollipop does not follow the text style and put its own TitleTextAppearance. So even you add your own TextView child for your Toolbar (shown below), the android.support.v7.widget.Toolbar will still override your styles.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:theme="@style/someToolbarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/title"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.v7.widget.Toolbar>

To finally solve this, put your own TextView for the title and override the setTitle methods of the Toolbar to skip the Lollipop's predefined TitleTextAppearance.

public class YourCustomToolbar extends Toolbar {

    public YourCustomToolbar (Context context) {
        super(context);
    }

    public YourCustomToolbar (Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public YourCustomToolbar (Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
     }

    @Override
    public void setTitle(CharSequence title) {
        ((TextView) findViewById(R.id.title)).setText(title);
    }

    @Override
    public void setTitle(int title) {
        ((TextView) findViewById(R.id.title)).setText(title);
    }
}

View more solutions

Comments

[Kenneth]

Cool. Should be possible to style this without having to add a custom view, don't you think?

[Kenneth]

I've tried creating my custom style as i said in the question, but no luck. Can you show me an example style that should work?

[Jared Burrows]

Are you using Android Studio? Do not get warnings? "Element TextView is not allowed here"

[Jared Burrows]

@DarkLeonhart I was using Android studio.

[Kenneth]

I ended up using this, as I also needed a custom font on the title.

[Marcel Bro]

How do you then map the java class to your XML layout, please? Do you inflate the custom layout in all constructors? Also, do you wrap the layout in <merge>? And my last question, do you then use it by putting <your.package. YourCustomToolbar/> to your activity's layout, or do you use <include>?

[TalkLittle]

This doesn't work for textStyle (bold, italic) specified in the question.

[OhNoNotScott]

Your Toolbar layout there. Is that in it's own file called toolbar.xml stored in the values folder...or what? Can you specify where this code is going?

[MrStahlfelge]

I edited your post and added android:textAppearance="@style/TextAppearance.AppCompat.Titl‌​e" to the TextView. This way, its base look is the same as the normal AppBar title appearance.

[Scott Barbour]

Thanks for this. I spent a frustratingly long amount of time trying different variations of themes and styles to try and get my toolbar text to be white, "normal" font weight and have a white back button. This solution does seem long winded for such a trivial task but it's the only one that worked for me so thank you.

[Andrew S]

This is quite a convoluted answer with all the inheritance going on. Is it needed? you did not explain it. How can we do something simple such as changing the text color or background color?