Android AppBarLayout overlaps listview

Question

I am writing a simple app to play with ContentProvider, I have a db, a ContentProvider, a main activity, a class that forwards commands to the ContentProvider using ContentResolver. On the gui I just want to display all items stored in the db. I created this project from scratch and when creating the Activity, the main layout had a CoordinatorLayout, with a AppBarLayout, and that is fine, I created a ListView and everything work except that the AppBarLayout overlaps the ListView, below the first item of the listview is hiding by the AppBarLayout.

I tried to use android:layout_below for my ListView but it does not work, if I use android:layout_marginTop then my ListView is under the AppBarLayout but I do not find this solution nice.

Is there no clean easy way to have ListView under the AppBarLayout?

below my activity_main layout:

<?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:background="@color/holo_light_background"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/bar"
        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"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>


    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/bar"/>


    <android.support.design.widget.FloatingActionButton ...>

    <android.support.design.widget.FloatingActionButton ...>

</android.support.design.widget.CoordinatorLayout>

You are not showing enough of your XML, share the entire layout file. — Booger, Sep 18 '15 at 13:56
@Booger actually it is the whole xml. The last line was missing, I added it and I do not give the whole floatingbuttom definition. Concerning the use of 2 floating button, I guess you are right, google recommend just one floating button but they use sometimes 2 floating buttons [https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions] ,it is not real clear for me — eqtèöck, Sep 18 '15 at 14:29
Re FAB - certainly not for destructive actions like Delete everything. Read this though: https://medium.com/tech-in-asia/material-design-why-the-floating-action-button-is-bad-ux-design-acd5b32c5ef — Eugen Pechanec, Sep 18 '15 at 14:57
I am an expert about this (check my bio), you should only use one FAB, there is an affordance to when you click the FAB, other actions are exposed from it, which would be different. — Booger, Sep 18 '15 at 15:21
If you use two FABs then you should use them [in the way Google Maps does](http://techvisionblog.in/wp-content/uploads/2014/06/Screenshot_2014-12-09-20-58-11.png). One upon the other. — Joaquin Iurchuk, Jan 19 '16 at 12:42

score 36 · Accepted Answer · edited Sep 18 '15 at 14:54

36

Simple add

app:layout_behavior="@string/appbar_scrolling_view_behavior"

to your ListView

edited Sep 18 '15 at 14:54

Eugen Pechanec

37,669
7
103
124

answered Sep 18 '15 at 13:58

m.zander

513
4
10

1

you are right if you meant that I have to add `layout_behavior` to ListView ;) – eqtèöck Sep 18 '15 at 14:35
1

@OLeeCsobert If it works, it will only work on Lollipop and above. Up to that point there was no nested scrolling support, which is used to achieve desired behavior. I suggest you move to RecyclerView as it has this capability via support library. – Eugen Pechanec Sep 18 '15 at 14:53
@Eugen Pechanec, thank for your comment, that is actually a question I asked myself: should we completely give up ListView to only used RecyclerView? – eqtèöck Sep 18 '15 at 15:13
1

@OLeeCsobert Good question. Currently I keep ListView in some legacy code and when i needed Filters and SectionIndexers, because they work out-of-the-box with ListView (it wouldn't be compatible with collapsible app bar though). In new projects or upgraded code I use RecyclerViews exclusively. – Eugen Pechanec Sep 18 '15 at 15:29
1

I have checked this in Nexus 4 using Android 5.1.1, but the issue didn't get resolved. – Samik Bandyopadhyay Jan 29 '16 at 04:03
I found that adding it to my fragment layout in my parent activities XML worked. My ListView was set to match parent, which may also be necessary. – Christopher Mills Oct 21 '17 at 14:27

score 1 · Answer 2 · answered Mar 17 '16 at 06:01

an alternative way is to use RecyclerView instead of ListView,it will work for sure........

OR

use:

      if  (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) 
          {
               listView.setNestedScrollingEnabled(true);
          }

It will obviously only work on Lollipop.

Android AppBarLayout overlaps listview

2 Answers2

Linked

Related