Android Styling Toolbar

In the previous tutorial we have seen how to add toolbar widget to your activity layout in this tutorial we will see how to style the toolbar widget with background color , height and also styling the title and subtitle text properties of toolbar .

Setting Toolbar Background 

To set the background color for toolbar you need to use colorPrimary item attribute and set the background with color of your choice  .

Toolbar Widget

<android.support.v7.widget.Toolbar
        android:background="?attr/colorPrimary"
        --------------------------------------
        --------------------------------------
        />

Style

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="colorPrimary">@color/LightBlue</item>
     
    </style>

Setting Toolbar Height

To set the height for toolbar you need to use actionBarSize item attribute and set the height  .

Toolbar Widget

   <android.support.v7.widget.Toolbar
        android:minHeight="?attr/actionBarSize"
        --------------------------------------
        --------------------------------------
        />

Style

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="actionBarSize">100dp</item>
     
    </style>

Styling Toolbar Title

To style the toolbar title you need to add  "app:titleTextAppearance='AppTheme.Toolbar.Title' " attribute to Toolbar widget and inside the style.xml file add new style tag whose parent attribute is set with "TextAppearance.Widget.AppCompat.Toolbar.Title" and inside which you can set the text style , size ,color  .

Toolbar Widget

<android.support.v7.widget.Toolbar
        app:titleTextAppearance="@style/AppTheme.Toolbar.Title"
        --------------------------------------
        --------------------------------------
        />

Style

<style name="AppTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/White</item>
        <item name="android:textStyle">bold</item>
    </style>

Styling Toolbar SubTitle

To style the toolbar subtitle you need to add  "app:titleTextAppearance='AppTheme.Toolbar.SubTitle' " attribute to Toolbar widget and inside the style.xml file add new style tag whose parent attribute is set with "TextAppearance.Widget.AppCompat.SubToolbar.Title" and inside which you can set the text style , size ,color .

Toolbar Widget

<android.support.v7.widget.Toolbar
        app:subtitleTextAppearance="@style/AppTheme.Toolbar.SubTitle"
        --------------------------------------
        --------------------------------------
        />

Style

<style name="AppTheme.Toolbar.SubTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textColor">@color/Black</item>
        <item name="android:textStyle">bold</item>
    </style>

DOWNLOAD CODE