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.

Answer 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>

Answer 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!

Answer 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>

Answer 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);
    }
}

Answer 5

You can apply a theme to the toolbar as follows:

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="56dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Just modify the style in your styles.xml, changing the TextAppearance attribute, and you should be good to go.