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>



1 comment:

Hamed Jaliliani said...

Hi Pawan.
Thanks for your great blog.
Did you get my mail?
I look forward to receiving your reply.
best regards,
Hamed jaliliani

Post a Comment