Android Toolbar Style Customization detailed

Objective

Marterial design has been out for some time, in order to keep up with Google's specifications, decided to use toolbar in the project. After a period of time, it was found that many times the original toolbar did not meet the requirements of the project. In order to adapt to the needs of the project diversification, the toolbar has been researched deeply.

Toolbar Introduction

Toolbar enables the application of the Standard toolbar, which can be said to be an upgraded version of Actionbar. Compared with Actionbar, the most obvious change of toolbar is the freedom and convenience of customization.

Toolbar simple use style settings

Style has two places to adjust, one in Res/values/styles.xml, the other in/res/values-v21/styles.xml (no need), in order to set up a convenient after, we first in the res/values/ A style named Apptheme.base is added to the styles.xml.

<!-- Base application theme. --><style name="AppTheme" parent="AppTheme.Base"></style>

Because as long as toolbar, so need to put the original ActionBar hide up. You can write in style like this:

<item name="windowActionBar">false</item><item name="android:windowNoTitle">true</item>

But I was too lazy to find that there was a hidden title in the theme, so in the end I wrote:

<!-- Base application theme. --><style name="AppTheme" parent="AppTheme.Base"></style> <style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar"> </style>

Then don't forget to modify/res/values-v21/styles.xml and change its parent property to Apptheme.base:

<?xml version="1.0" encoding="utf-8"?><resources>    <style name="AppTheme" parent="AppTheme.Base"> </style></resources>

Interface layout

Add the Toolbar component to the Activity_main.xml:

<android.support.v7.widget.Toolbar  android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>

Program code

Please add Toolbar's statement to Mainactivity.java:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);

Run:

Modify Toolbar background color

As you can see, the title bar is linked to the page, and now it needs to be separated.
Change the theme to white in style and change the color of toolbar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- toolbar（actionbar）颜色 --> <item name="colorPrimary">#2196F3</item> </style> 

Add background to toolbar in the layout file

android:background="?attr/colorPrimary"

Run:

Modify Toolbar text color

The above can be seen, the text is black, and the background is not very collocation, now will toolbar text to white. Here are three steps to change:

Change title text color

It's easy to change the title text by adding the following style to it.

<!--toolbar标题文字颜色--><item name="android:textColorPrimary">@android:color/white</item>

Change menu Text color

This gives toolbar a separate set of theme

app:theme="@style/ToolbarTheme"

Set menu text to white in theme

<!-- toolbar菜单样式 --><style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar"> <item name="actionMenuTextColor">@android:color/white</item></style>

Run:

Modify toolbar popup Menu style

Now the popup menu is like this

It can be found that the text is not visible at all.
Now we turn the background into black.
Add Popuptheme to toolbar in the layout file:

app:popupTheme="@style/ToolbarPopupTheme"

Write this in style:

<!-- toolbar弹出菜单样式 --><style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat"> <item name="android:colorBackground">#212121</item></style>

After changing the effect:

Modify toolbar title Text size

Now find the title text is too big, want to change a little bit.
Add titletextappearance attribute to toolbar

app:titleTextAppearance="@style/ToolbarTitle"

The corresponding style

<!-- toolbar标题样式 --><style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textSize">14sp</item></style>

Run:

Modify toolbar Menu Text size

After modifying the title, and found that the menu text is too large, need to be small.
Now modify the menu style, plus the Actionmenutextappearance property, the code is as follows:

<!--toolbar menu style--><style name=" Toolbartheme " Parent= "@style/themeoverlay.appcompat.actionbar" > <item name= "Actionmenutextcolor" > @android: Color/white</item> <item name= " Actionmenutextappearance "> @style/toolbarmenutextsize</ Item></STYLE>       

Let's see how Toolbarmenutextsize wrote it.

<!-- toolbar菜单文字尺寸 --><style name="ToolbarMenuTextSize" parent="@style/TextAppearance.AppCompat.Menu"> <item name="android:textSize">10sp</item></style>

After the change, look at the effect:

Modify Toolbar Height

Some may think that toolbar is too high to turn the height down.
The height of the bar only needs to adjust the Layout_height and MinHeight properties of the toolbar.
The adjusted code is as follows:

<android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="45dp"        android:background="?attr/colorPrimary"        android:minHeight="45dp" app:popupTheme="@style/ToolbarPopupTheme" app:titleTextAppearance="@style/ToolbarTitle" app:theme="@style/ToolbarTheme">

Modify the selected state of the toolbar menu

Many times, the default check state does not meet the requirements of the design.
To change the selected state, add the following style to the Toolbartheme:

<item name="selectableItemBackground">@drawable/toolbar_button_bg</item>

Contents of the Toolbar_button_bg.xml file:

<?xml version= "1.0" encoding= "Utf-8"?><selector xmlns:android=" http://schemas.android.com/apk/res/android "> < item android:drawable= "@color/primary _dark "android:state_pressed=" true "/> <item android:drawable=" @color/primary_dark "android:state_focused=" True "/> <item android:drawable=< Span class= "hljs-string" > "@color/primary"/></selector>  

Note: Color changes according to requirements.
Selected after the change:

Summarize

In the current development process, the required toolbar style customizations are included here. Subsequent discovery of new style customization requirements will continue to be updated.
Attach the final code:
Https://github.com/oyjt/android-toolbar

Android Toolbar Style Customization detailed