AndroidのToolBarを使ってみた

こんにちは！

イトナブ石巻のとみぎです。

今回はAndroid5.0(Lollipop)と同時に追加された、ActionBarの代替となる「ToolBar」を使い、簡単なサンプルを作ってみました。

[今回の開発環境]

Mac OS X 10.9.5
AndroidStudio 1.0.2


◯ アプリのレイアウトスタイル(style.xml)を変更
【style.xml】

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->

        <!-- アクションバー(Toolbar)の背景色 -->
        <item name="colorPrimary">#ffe10446</item>

        <!-- ステータスバーの背景色 -->
        <item name="colorPrimaryDark">#ffe1799c</item>

        <!-- colorAccent is used as the default value for colorControlActivated,
         which is used to tint widgets -->
        <item name="colorAccent">#ff0000</item>

        <!-- ActionModeを使うのに必要 -->
        <item name="windowActionModeOverlay">true</item>

    </style>

</resources>

◯ レイアウトファイルにToolBarを追加
【activity_main.xml】

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- ToolBar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
    </android.support.v7.widget.Toolbar>
    <!-- ToolBar end -->

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tool_bar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

◯ アクティビティ側を変更
【MainActivity.java】

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 追加
        setToolBar();
    }

    // 追加
    protected void setToolBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
        // ツールバーのタイトルを設定
        toolbar.setTitle("ActionBar Title");
        // ツールバーをアクションバーとしてセット
        setSupportActionBar(toolbar);
    }
}

◯ 実行

アクションバーが表示されました！
ステータスバーの色もちゃんと変わっています。

◯ サブタイトルを追加してみる
【MainActivity.java】

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setToolBar();
    }

    protected void setToolBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
        toolbar.setTitle("ActionBar Title");

        // 追加
        toolbar.setSubtitle("Subtitle");

        setSupportActionBar(toolbar);
    }
}

こうなりました↓

◯ アプリアイコンを追加してみる【MainActivity.java】

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setToolBar();
    }

    protected void setToolBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
        toolbar.setTitle("ActionBar Title");
        toolbar.setSubtitle("Subtitle");
        
        // 追加
        toolbar.setLogo(R.drawable.ic_launcher);
        
        setSupportActionBar(toolbar);
    }
}

こうなりました↓

◯ (おまけ)ナビゲーションバーの色を変えてみた

※ナビゲーションバーの色変更が可能なのはAPI Level 21(Lollipop)からなので、こちらを実装する場合は、v21専用のxml「values-v21/styles.xml」を作成し、そちらへ追加しなければなりません。

【values-v21/styles.xml】

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        
        <item name="colorPrimaryDark">#ff007435</item>

        <item name="colorPrimary">#ff00c859</item>

        <!-- 追加 ナビゲーションバーの背景色 -->
        <item name="android:navigationBarColor">#ff00a57f</item>

        <item name="colorAccent">#ff0000</item>

        <item name="windowActionModeOverlay">true</item>

    </style>
</resources>

以上、AndroidのToolBarを使ってみたでした。
この他にも色々と設定可能なメソッドがあるようなので、
他にも色々と試してみたいと思います。


最後まで読んで頂き、ありがとうございました！

【参考サイト】
AndroidのToolBar（新しいActionBar）メモ - Qiita
Android Developers

posted by イトナブ石巻 とみぎ

【補足】

今回のbuild.gladleの詳細を以下に載せておきます。
【build.gladle】

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.2"

    defaultConfig {
        applicationId "jp.itnav.actionbar"
        minSdkVersion 16
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}