AppCompat v21 と Navigation Drawer でアニメーションインジケータ

目的

Material Design になった Android 5.0 Lollipop が発表され、 SDK もいよいよ公開されたことで Material Design の Android アプリを作ることができるようになったわけですが、 Android 4.4 以下にも Material Design なアプリを提供したいと思っていました。

そんな折、 AppCompat v21 が登場したことによって開発することができるようになりましたが、 Google 謹製の Apps が提供するような Navigation Drawer を開閉するときの ActionBar 上のアニメーションインジケータを実装する方法が分からなかったのですが、ようやく分かったので記しておきます。

実装

build.gradle

アプリケーションプロジェクト側の build.gradle の dependencies セクションに V4 support library と V7 AppCompat library を追加しておく。

dependencies {
    compile 'com.android.support:support-v4:21.0.0'
    compile 'com.android.support:appcompat-v7:21.0.0'
}

styles.xml

styles.xml は Theme.AppCompat を適用する (今回は Theme.AppCompat.Light.DarkActionBar) 。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    </style>
</resources>

activity_my.xml

Navigation Drawer を実装する XML は例えば以下のようにしておく。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <LinearLayout
        android:layout_gravity="start"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:background="@android:color/white">
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

MyActivity.java

最後に、 Activity を実装する Java ファイルは以下のようにする。

package com.sample.navdrawer;

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.view.MenuItem;

public class MyActivity extends ActionBarActivity {
    private ActionBarDrawerToggle mDrawerToggle;

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

        final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name);
        mDrawerToggle.setDrawerIndicatorEnabled(true);
        drawerLayout.setDrawerListener(mDrawerToggle);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return mDrawerToggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
}

こうなるはず