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

## 目的

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

そんな折、 [AppCompat v21 が登場した](http://android-developers.blogspot.jp/2014/10/appcompat-v21-material-design-for-pre.html)ことによって開発することができるようになりましたが、 Google 謹製の Apps が提供するような Navigation Drawer を開閉するときの ActionBar 上のアニメーションインジケータを実装する方法が分からなかったのですが、ようやく分かったので記しておきます。

## 実装

### build.gradle

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

```groovy
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
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    </style>
</resources>
```

### activity_my.xml

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

```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 ファイルは以下のようにする。

```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);
    }
}
```

## こうなるはず

![001.png](https://qiita-image-store.s3.amazonaws.com/0/5036/492d0d01-9db8-293b-c56c-df31a9ad6a8f.png)

![002.png](https://qiita-image-store.s3.amazonaws.com/0/5036/d2cecae0-38b0-da5a-2ab1-486d4fd81e46.png)

![003.png](https://qiita-image-store.s3.amazonaws.com/0/5036/5f0cf299-d330-f396-cc80-842e8fd15f79.png)