[解決済み] DrawerLayoutを使用して、ActionBar/Toolbarの上やステータスバーの下に表示するにはどうすればよいですか？

質問

新しいマテリアルデザインで見た サイドナビ仕様 アクションバーの上とステータスバーの後ろにドロワーを表示することができることを知りました。どのように実装すればよいのでしょうか？

どのように解決するのですか？

フレームワークとサポートライブラリの新機能は、まさにこれを可能にします。パズルのピース」は3つあります。

1. 使用方法 ツールバー で、アクションバーをビュー階層に埋め込むことができます。
2. メイキング ドロワーレイアウト fitsSystemWindows のように、システムバーの後ろにレイアウトされます。
3. 無効化 Theme.Material の通常のステータスバーの色付けを行い、代わりにDrawerLayoutがそこに描画できるようにします。

新しいappcompatを使用することを前提に説明します。

まず、レイアウトはこのようになっているはずです。

<!-- The important thing to note here is the added fitSystemWindows -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Your normal content view -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- We use a Toolbar so that our drawer can be displayed
             in front of the action bar -->
        <android.support.v7.widget.Toolbar  
            android:id="@+id/my_awesome_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary" />

        <!-- The rest of your content view -->

    </LinearLayout>

    <!-- Your drawer view. This can be any view, LinearLayout
         is just an example. As we have set fitSystemWindows=true
         this will be displayed under the status bar. -->
    <LinearLayout
        android:layout_width="304dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true">

        <!-- Your drawer content -->

    </LinearLayout>

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

次にActivity/Fragmentで。

public void onCreate(Bundled savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Your normal setup. Blah blah ...

    // As we're using a Toolbar, we should retrieve it and set it
    // to be our ActionBar
    Toolbar toolbar = (...) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

    // Now retrieve the DrawerLayout so that we can set the status bar color.
    // This only takes effect on Lollipop, or when using translucentStatusBar
    // on KitKat.
    DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
    drawerLayout.setStatusBarBackgroundColor(yourChosenColor);
}

次に、ステータスバーの後ろに DrawerLayout が表示されるようにする必要があります。これは、values-v21のテーマを変更することで行います。

values-v21/themes.xml

<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

注意 もし <fragment android:name="fragments.NavigationDrawerFragment"> の代わりに

<LinearLayout
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start"
    android:fitsSystemWindows="true">

    <!-- Your drawer content -->

</LinearLayout>

を呼び出すと、実際のレイアウトに応じた効果が得られます。 fitsSystemWindows(boolean) から返したビューで onCreateView メソッドを使用します。

@Override
public View onCreateView(LayoutInflater inflater, 
                         ViewGroup container,
                         Bundle savedInstanceState) {
    View mDrawerListView = inflater.inflate(
        R.layout.fragment_navigation_drawer, container, false);
    mDrawerListView.setFitsSystemWindows(true);
    return mDrawerListView;
}