Androidアプリ開発 RecyclerViewやListViewがToolbarと重なるプログラミングJava

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から徐々にシフトしていくと思われるので、色々と試してみてください。

タグ検索で調べてみよう

Android6.0 UI