Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

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

APIガイド コメント
android_android-toolbar_03

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));
    }
}
Note : ToolbarをsetActionBar()に設定した後、getActionBar()メソッドを実行すると、設定したToolbarがActionBarとして取得できます。

 

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)

 

アプリを実行すると以下のようになります。

 

android_android-toolbar_01

 

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>

アプリを実行すると以下のようになります。

 

android_android-toolbar_02
Note : Android5.0以上ではナビゲーションアイコンを表示させることは推奨されていません。

 

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>

アプリを実行すると以下のようになります。

 

android_android-toolbar_03

 

広 告