AppBarLayout is not on the top of the screen

Question

My issue is, that AppBarLayout, together with toolbar is appearing not on top of the screen, thus blocking the view of the included content. It can be seen in the image. I am sure I am just missing something here.

Also, here is the xml code

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

<include layout="@layout/content_search" />

EDIT: with my theme set to NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

it looks like this:

You shouldn't care about the default toolbar shown at the top in preview window if you have set the **style** to **NoActionBar** as the preview assumes to have default toolbar to be the actual toolbar in the application. It will not be present on the deployed app — Abhisek Lamsal, Jan 05 '17 at 15:53
@AbhisekLamsal default toolbar doesnt show up in the deployed app, you are right, but the thing is that the custom toolbar blocks the view of the included content. — Evaldas Grigaitis, Jan 05 '17 at 16:02

JoKr · Accepted Answer · 2017-01-05T16:23:44.220

3

In res/values/styles set your style to NoActionBar theme, like:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Now, you should lose your regular ActionBar and you can work with your toolbar.

EDIT: What OP tried to acomplish was position included layout below AppBar layout in CoordinatorLayout. That's accomplished by adding app:layout_behavior="@string/appbar_scrolling_view_behavior" to included layout.

edited Jan 05 '17 at 16:23

answered Jan 05 '17 at 15:45

JoKr

4,401
7
25
39

Hey. I edited the main post. This didnt completely help me. – Evaldas Grigaitis Jan 05 '17 at 15:54
How it didn't help? AppBar is now on top of the screen, right below status bar. If you want to hide status bar also, use `Theme.AppCompat.Light.NoActionBar.Fullscreen ` – JoKr Jan 05 '17 at 16:02
Apparently, there is no standard fullscreen AppCompat theme (although Holo had this). You can refer to this: http://stackoverflow.com/a/25365193/4110778 – JoKr Jan 05 '17 at 16:04
It is on top of the screen, but it is still blocking the view of included searchview. After the app toolbar is on the top, but the searchview is underneath it. – Evaldas Grigaitis Jan 05 '17 at 16:07
1

Oh OK then. So, your root layout: CoordinatorLayout is like FrameLayout - meaning it stacks views one on another. You should add `app:layout_behavior="@string/appbar_scrolling_view_behavior"` to root of your included layout, so it shows it bellow toolbar. Refer to: http://stackoverflow.com/questions/32956071/add-views-below-toolbar-in-coordinatorlayout – JoKr Jan 05 '17 at 16:15
Thank you! Fixed everything – Evaldas Grigaitis Jan 05 '17 at 16:20

score 0 · Answer 2 · answered Jan 05 '17 at 16:16

0

Set the layout_width and layout_height to match parent for the include layout(The layout that is inside the include layout).

answered Jan 05 '17 at 16:16

Rohan Bhatia

1,590
2
13
31

score 0 · Answer 3 · answered May 19 '20 at 02:31

you should set your theme to any NoActionBar theme such as

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorSecondary</item>
        <item name="colorAccent">@color/google_blue</item>
    </style>

AppBarLayout is not on the top of the screen

3 Answers3