CODEWITHSUNDEEP
androidstylesandroid-5.0-lollipopandroid-toolbar
Kenneth
Kenneth

Reputation: 4065

Android Toolbar style

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.

Upvotes: 19

Views: 35668

Answers (5)

Dynameyes
Dynameyes

Reputation: 475

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

Upvotes: 3

jasonhudgins
jasonhudgins

Reputation: 2817

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!

Upvotes: 11

Binoy Babu
Binoy Babu

Reputation: 17119

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>

Upvotes: 12

Aditya Vaidyam
Aditya Vaidyam

Reputation: 6267

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.

Upvotes: -5

Dark Leonhart
Dark Leonhart

Reputation: 1504

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>

Upvotes: 7

Related Questions