這篇文章因為是台灣人寫的，語言風格很別致。本文在原文的基礎上做了一些微調（主要是繁體字的問題）。
今年(2014) 的 google i/o 發表令多數人為之一亮的 material design，而 google 也從「google i/o 2014」 開始，大家也陸陸續續地看到其更新的 android app 皆套用了這個設計介面。當然，這個設計介面著實讓大家感到驚艷外，更讓 android 開發者開始擔心未來 app 的界面處理了。
不過，所幸有著之前 actionbar 的經驗後，android 也很快地在 support library 裡面提供了相對應的 api 給開發者使用，本篇就為各位介紹 – toolbar，這是用來取代過去 actionbar 的控件，而現在於 material design 中也對之有一個統一名稱：app bar，在未來的 android app 中，就以 toolbar 這個元件來實作之。
1. 概述
Android 3.0 Android 推了 ActionBar 這個控件出來，而到了 2013 年 Google 開始大力地推動所謂的 android style，想要逐漸改善過去 android 紛亂的界面設計，希望讓終端使用者盡可能在 android 手機有個一致的操作體驗。ActionBar 過去最多人使用的兩大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 裡的 AppCompat 中。
既然會有本篇跟各位介紹的 Toolbar，也意味著官方在某些程度上認為 ActionBar 限制了 android app 的開發與設計的彈性，而在 material design 也對之做了名稱的定義：App bar。接下來將為各位分成幾個階段進行說明，如何在 android app 中用 toolbar 這個控件來做出一個基本的 app bar 喽。
本篇所使用到的程序請到 Github 取得。
2. 基礎套用
這個階段從 toolbar_demo_checkpoint0 開始，分成下列三個部份：
風格 (style)
介面 (layout)
程式 (java)
2.1 風格(style)
風格要調整的地方有二，一在 res/values/styles.xml 另一在 /res/values-v21/styles.xml，為了之後設定方便，我們先在 res/values/styles.xml 裡增加一個名為 AppTheme.Base 的風格
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
因為此范例只單純使用 Toolbar，所以我們要將讓原本的 ActionBar 隱藏起來，做了上面的設定，接著將原本 AppTheme 的 parent 屬性 改為 AppTheme.Base，這邊完整的程式碼如下：
復制代碼
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
復制代碼
再來調整在 Android 5 的風格檔： /res/values-v21/styles.xml，也將其 parent 屬性改為 AppTheme.Base：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
</resources>
2.2 界面面(Layout)
在 activity_main.xml 裡面加入 Toolbar 元件：
復制代碼
<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>
復制代碼
請記得用 support v7 裡的 toolbar，不然然只有 API Level 21 也就是 Android 5 以上的版本才能使用。
這邊需注意，要將 RelatvieLayout 裡的針對四個方向 padding 屬性拿掉，並記得將原本的 Hello World 設定 layout_below="@+id/toolbar" ，否則會看到像下面這樣的錯誤畫面。
2.3 程序 (Java)
請到 MainActivity.java 裡加入 Toolbar 的聲明：
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
聲明後，再將之用 setSupportActionBar 設定，即能取代表原本的 actionbar 了，此階段完成畫面如下：
完整代碼見：toolbar_demo_checkpoint1
3. 自定義顏色(Customization color)
這個階段將從 toolbar_demo_checkpoint1 接著往下進行：
上圖是將本階段要完成的結果畫面做了標示，結合下面的描述希望大家能一目了然（一目了然用錯了吧...）。
狀態欄底色：colorPrimaryDark在風格 (styles) 或是主題 (themes) 裡進行設定。
App bar 底色
這個設定分為二，若你的 android app 仍是使用 actionbar 實作，則直接在風格 (styles) 或是主題 (themes) 裡進行設定 colorPrimary 參數即可；
可若是采用 toolbar 的話，則要在界面 (layout) 裡面設定 toolbar 元件的 background 屬性。
導航欄底色：navigationBarColor
僅能設定在 API v21 也就是 Android 5 以後的版本， 因此要將之設定在 res/values-v21/styles.xml 裡面。
主視窗底色：windowBackground
也因此在這個階段，我們需要設定的地方有三，一是主要風格檔(res/values/styles.xml)
復制代碼
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<!-- Actionbar color -->
<item name="colorPrimary">@color/accent_material_dark</item>
<!--Status bar color-->
<item name="colorPrimaryDark">@color/accent_material_light</item>
<!--Window color-->
<item name="android:windowBackground">@color/dim_foreground_material_dark</item>
</style>
復制代碼
再來是 v21 的風格檔 (res/values-v21/styles.xml)
<style name="AppTheme" parent="AppTheme.Base">
<!--Navigation bar color-->
<item name="android:navigationBarColor">@color/accent_material_light</item>
</style>
最後，就是為了本篇的主角 – Toolbar 的 background 進行設定。
復制代碼
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
復制代碼
在本范例中，toolbar 是設定來在 activity_main.xml，對其設定 background 屬性： android:background="?attr/colorPrimary" ，這樣就可以使之延用 Actionbar 的顏色設定喽。
最後，再來看一下結果畫面。
完整代碼見： toolbar_demo_checkpoint2
4. 元件 (component)
本階段將從 toolbar_demo_checkpoint2 接續，在還未於 <android.support.v7.widget.Toolbar/> 標簽中，自行添加元件的 toolbar 有幾個大家常用的元素可以使用，請先見下圖：
大抵來說，預設常用的幾個元素就如圖中所示，接著就依序來說明之：
setNavigationIcon
即設定 up button 的圖標，因為 Material 的介面，在 Toolbar這裡的 up button樣式也就有別於過去的 ActionBar 哦。
setLogo
APP 的圖標。
setTitle
主標題。
setSubtitle
副標題。
setOnMenuItemClickListener
設定菜單各按鈕的動作。
先來看到菜單外的代碼，在 MainActivity.java 中：
先來看到
復制代碼
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// App Logo
toolbar.setLogo(R.drawable.ic_launcher);
// Title
toolbar.setTitle("My Title");
// Sub Title
toolbar.setSubtitle("Sub title");
setSupportActionBar(toolbar);
// Navigation Icon 要設定在 setSupoortActionBar 才有作用
// 否則會出現 back button
toolbar.setNavigationIcon(R.drawable.ab_android);
復制代碼
這邊要留意的是setNavigationIcon需要放在 setSupportActionBar之後才會生效。
菜單部分，需要先在res/menu/menu_main.xml左定義：
復制代碼
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item android:id="@+id/action_edit"
android:title="@string/action_edit"
android:orderInCategory="80"
android:icon="@drawable/ab_edit"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_share"
android:title="@string/action_edit"
android:orderInCategory="90"
android:icon="@drawable/ab_share"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
復制代碼
再回到MainActivity.java 中加入OnMenuItemClickListener 的監聽者：
復制代碼
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
String msg = "";
switch (menuItem.getItemId()) {
case R.id.action_edit:
msg += "Click edit";
break;
case R.id.action_share:
msg += "Click share";
break;
case R.id.action_settings:
msg += "Click setting";
break;
}
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
};
復制代碼
將onMenuItemClick監聽者設置給toolbar
復制代碼
setSupportActionBar(toolbar);
...
// Menu item click 的監聽事件一樣要設定在 setSupportActionBar 才有作用
toolbar.setOnMenuItemClickListener(onMenuItemClick);
復制代碼
和 setNavigationIcon 一樣，需要將之設定在 setSupportActionBar 之後才有作用。執行上面的代碼便會得到下面的界面。
完完整程序見：toolbar_demo_checkpoint3
5. 總結
在這樣的架構設計下，ToolBar直接成了Layout中可以控制的東西，相對於過去的actionbar來說，設計與可操控性大幅提升。
本文上面的解釋中用到的完成代碼：toolbar demo check point 0 ~ 4，請到Github 取得。
最後再附上一個界面上常用的屬性說明圖：
這裡按照圖中從上到下的順序做個簡單的說明：
colorPrimaryDark
狀態欄背景色。
在 style 的屬性中設置。
textColorPrimary
App bar 上的標題與更多菜單中的文字顏色。
在 style 的屬性中設置。
App bar 的背景色
Actionbar 的背景色設定在 style 中的 colorPrimary。
Toolbar 的背景色在layout文件中設置background屬性。
colorAccent
各控制元件(如：check box、switch 或是 radoi) 被勾選 (checked) 或是選定 (selected) 的顏色。
在 style 的屬性中設置。
colorControlNormal
各控制元件的預設顏色。
在 style 的屬性中設置
windowBackground
App 的背景色。
在 style 的屬性中設置
navigationBarColor
導航欄的背景色，但只能用在 API Level 21 (Android 5) 以上的版本
在 style 的屬性中設置
Android編程實現Toast自定義布局簡單示例
android 學習-Android Fragment 深度解析
Android ListView 默認選中某一項實現代碼
Android--切換屏幕方向
