Androidアプリ開発 RecyclerViewやListViewがToolbarと重なる
2016年04月11日(編集2016年04月11日)

Androidアプリで一覧データのUI(ユーザーインターフェース)を作成する場合は、ListViewやRecyclerViewを使います。 このListViewやRecyclerViewの上部にToolbarを配置すると、一覧表示がToolbarに覆われて見えなくなってしまう事象が発生することがあります。
この記事は、Toolbarで覆われたRecyclerView(ListView)を修正する方法を記載しました。
環境はAndroid 6.0 (API level 23) です。
環境
- android sdk 23
- Build Tools, Revision 23.0.2
- support recyclerview 23.2.0
- support appcompat 23.2.0
- support design 23.2.0
- support support-v4 23.2.0
難易度
初心者向け
事象
ListViewやRecyclerViewの上部にToolbarを配置すると、一覧表示がToolbarに覆われて見えなくなってしまう現象が発生しました。

Toolbarに覆われたRecyclerView
エラー原因
layout.xmlでToolbarがRecyclerViewの上部に記載されているため。
{project_folder}/app/res/layout/activity_recycler_view.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.java_lang_programming.android_recycleview_demo.ui.RecyclerViewActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <fragment android:name="com.java_lang_programming.android_recycleview_demo.ui.RecyclerViewFragment" android:id="@+id/recycler_view_normal_frag" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.design.widget.CoordinatorLayout>
修正方法
layout.xmlでRecyclerViewにapp:layout_behavior属性を追記する。
{project_folder}/app/res/layout/activity_recycler_view.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.java_lang_programming.android_recycleview_demo.ui.RecyclerViewActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<fragment android:name="com.java_lang_programming.android_recycleview_demo.ui.RecyclerViewFragment"
android:id="@+id/recycler_view_normal_frag"
android:layout_width="match_parent"
android:layout_height="match_parent"
+app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
ビルドして実行
ビルドしてアプリを実行します。

Toolbarに覆われないRecyclerView
Toolbarに覆われないでRecyclerViewが表示されました。
まとめ
support design 23.2.0を導入すると、デザイン性の高いアプリユーザーインターフェースを実現できるようになります。
LinearLayoutやRelativeLayoutから徐々にシフトしていくと思われるので、色々と試してみてください。