Navigation DrawerでActionBarの上に、StatusBarの下にDrawerを置く

Navigation Drawer 基本実装 の続き



Drawerの部分をActionBar(ToolBar)の上に表示させてかつ透明なステータスバーの下に表示させてみます。
アプリケーション側には変更せずにレイアウトとテーマだけ手を加えます。

テーマの修正

res/values-v21/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="DrawerActivityTheme" parent="ThemeTranslucentsStatus">
      <item name="colorPrimary">@color/ms_primary</item>
  </style>

  <style name="ThemeTranslucentsStatus" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="windowActionModeOverlay">true</item>
      <item name="android:windowTranslucentStatus">true</item>
  </style>
</resources>

レイアウトの修正

res/layout//activity_main.xml

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

  <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_height="wrap_content"
          android:layout_width="match_parent"
          app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
          android:minHeight="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          android:paddingTop="@dimen/status_bar_height"
          android:elevation="3dp"/>
      <!-- main content -->
      <FrameLayout
          android:id="@+id/main_content_frame"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:foreground="?android:windowContentOverlay"
          />
  </LinearLayout>

  <!-- drawer content -->
  <LinearLayout
      android:id="@+id/drawer_menu_item_layout"
      android:orientation="vertical"
      android:layout_width="240dp"
      android:layout_height="match_parent"
      android:layout_gravity="left"
      android:background="@android:color/white">

      <!-- drawer item menu -->

  </LinearLayout>

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

ステータスバーの高さ
res/values/dimens.xml

<resources>
  <dimen name="status_bar_height">0dp</dimen>
</resources>

res/values-v21/dimens.xml

<resources>
  <dimen name="status_bar_height">25dp</dimen>
</resources>

何をやっているかというと、テーマはオーバレイのステータス半透明にして
レイアウトではToolbarをDrawerLayoutで囲むようにします。
そして、Toolbarの高さとステータスバーの高さをAPIバージョンの違いにより調整します。
android:windowTranslucentStatusなどについてはこの以下のやんざむさんの記事を参考した方がいいと思います。
http://y-anz-m.blogspot.jp/2013/11/kitkat-android-44-ui.html

サンプルコードとアプリ

ソースコード: ng-b0ne/MaterialSample - Github
Playストアからアプリダウンロードして動作もできます。
MaterialSmaple - Google Play

以上。