[Android] Toolbar:ツールバーを表示する

Toolbarは従来のActionBarを一般化したもので、<Toolbar>
タグを使用することで表示させることができます。ここでは、アクションバーをツールバーに置き換えて表示する方法について説明します。
広 告
目次
前提条件
動作確認端末
- Google Nexus 5 – 5.0.0 – API21(エミュレータ)
1. Toolbarの概要
Toolbarは従来のActionBarを一般化したものです。ActionBar
はフレームワークのウィンドウの一部でしたが、Toolbarはレイアウトの任意の階層に配置することができます。ActionBar
と比較すると自由にカスタマイズができます。
Toolbar
はAndroid5.0(API level 21)から追加されたAPIです。Toolbar
はv7 appcompat library
に用意されているため、Android4.4(API level 19)以下で動作させる場合、こちらを利用してください。
2. ツールバーを表示する
従来のアクションバーをツールバーに置き換える方法について説明します。Toolbar
はAndroid5.0(API level 21)以上で利用できます。ツールバーを表示させるためには、<Toolbar>
タグを使用します。
以下のようにレイアウトXMLに記述します。
res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?android:actionBarSize" android:background="?android:colorPrimary" > </Toolbar> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
Toolbar
の背景色は、アプリのテーマカラーを継承させるため?android:colorPrimary
を設定しています。
レイアウトXMLで定義したツールバーをアクションバーの代わりとして扱うためには、Activity#setActionBar()メソッドにToolbar
オブジェクトを設定します。
以下のようにActivity
に記述します。
java/<packagename>/MainActivity.java
import android.app.Activity; import android.os.Bundle; import android.widget.Toolbar; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setActionBar((Toolbar) findViewById(R.id.toolbar)); } }
Activity#setActionBar()
メソッドにToolbar
オブジェクトを設定後、従来のアクションバーは非表示にする必要があります。styles.xml
の内容を変更し、アクションバーのないテーマに変更します。
res/values-v21/styles.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar"> </style> </resources>
Note : もしアクションバーを非表示にせずアプリを実行すると、以下のような例外が発生します。
java.lang.RuntimeException: Unable to start activity ComponentInfo{style.programing.toolbar/style.programing.toolbar.MainActivity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set android:windowActionBar to false in your theme to use a Toolbar instead. at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2298) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360) at android.app.ActivityThread.access$800(ActivityThread.java:144) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:135) at android.app.ActivityThread.main(ActivityThread.java:5221) at java.lang.reflect.Method.invoke(Native Method) at java.lang.reflect.Method.invoke(Method.java:372) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694) Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set android:windowActionBar to false in your theme to use a Toolbar instead. at android.app.Activity.setActionBar(Activity.java:2102) at style.programing.toolbar.MainActivity.onCreate(MainActivity.java:16) at android.app.Activity.performCreate(Activity.java:5933) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1105) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2251) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360) at android.app.ActivityThread.access$800(ActivityThread.java:144) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:135) at android.app.ActivityThread.main(ActivityThread.java:5221) at java.lang.reflect.Method.invoke(Native Method) at java.lang.reflect.Method.invoke(Method.java:372) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
アプリを実行すると以下のようになります。

3. ナビゲーションアイコンを設定する
ツールバーにナビゲーションアイコンを表示させるためにはandroid:navigationIcon属性もしくはToolbar#setNavigationIcon(int)を使って設定します。
以下にandroid:navigationIcon
属性を使った例を示します。
res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?android:actionBarSize" android:background="?android:colorPrimary" android:navigationIcon="@mipmap/ic_launcher" > </Toolbar> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
アプリを実行すると以下のようになります。

4. ツールバーに影をつける
ツールバーに影をつけるためには、Android5.0から追加されたandroid:elevation属性もしくはView#setElevation()メソッドを使用します。 設定する値が大きくするほど、結果的に影の大きくなります。
以下にandroid:elevation
属性を使った例を示します。影を見やすくするため、ツールバーの背景色を変更しています。
res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?android:actionBarSize" android:background="#FF4081" android:elevation="20dp" > </Toolbar> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
アプリを実行すると以下のようになります。
