ListView overlaps Application Bar - Android

Question

my ListView go on the application bar at the edge of the page, i probably have problem in layout file. (i've used the default android studio activity which contain navigation drawer, application bar,...) I've used a frameLayout to use it as parent to sub-activity and show the navigation drawer in all sub-activity.

nav_header_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="MoviesInformer"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="testing" />

content_main.xml

<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".Activity.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Movieys Informer" />
</RelativeLayout>

app_bar_main.xml

<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=".Activity.MainActivity">

    <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>

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--<include layout="@layout/content_main" />-->

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

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--<FrameLayout-->
        <!--android:id="@+id/content_frame"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent" />-->

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />


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

cinema_activity.xml (which is used in the sub-activity)

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:textAlignment="center"
        android:clickable="true"
        android:id="@+id/lwCinema"
        />


</LinearLayout>

can somebody please help me?

Repeat:

The listView in the sub-activity go on the top of the application bar (i think it's called) but it's still clickable. I need to put it below the app bar.

set `marginTop="?android:attr/actionBarSize"` on content view below the bar — Tim, Jun 14 '16 at 09:03
Possible duplicate of [Add views below toolbar in CoordinatorLayout](http://stackoverflow.com/questions/32956071/add-views-below-toolbar-in-coordinatorlayout) — Qw4z1, Jun 14 '16 at 09:09
Take a look at the duplicate question in the comment above. I can also recommend searching a little before posting questions. — Qw4z1, Jun 14 '16 at 09:10

score 3 · Accepted Answer · answered Jun 14 '16 at 09:32

Instead of using marginTop="?android:attr/actionBarSize", the right way is to add app:layout_behavior attribute to your FrameLayout. This attribute make your frame layout always positioned below toolbar.

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

And don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" tag to root of your layout.

score 1 · Answer 2 · answered Jun 14 '16 at 09:14

Just modify

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

to

<FrameLayout
        android:id="@+id/content_frame"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

ListView overlaps Application Bar - Android

2 Answers2