CoordinatorLayout with Toolbar and fragment

Question

I'm using the layout below, The CoordinatorLayout holds inside it AppBarLayout (With Toolbar and TabLayout inside it) and a placeholder RelativeLayout, so I could add and replace fragments on it.

I'm experiencing margin errors, the fragments I add on the RelativeLayout will always over expand beyond the bottom of the screen (in the amount similar to the size of the AppBarLayout height), I've tried setting it's height to wrap_content and match_parent, in both cases it goes overboard.

if I remove the app:layout_behavior="@string/appbar_scrolling_view_behavior" from the RelativeLayout the top of it will be under the AppBarLayout which is also not the desired outcome.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <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/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                app:tabIndicatorHeight="4dp"
                app:tabIndicatorColor="#ffffff"
                app:tabMode="scrollable"
                android:visibility="gone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

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


        <RelativeLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/main_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


       <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="20dp"
            android:src="@drawable/ic_done" />


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

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

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

Can you give a better example? That `RelativeLayout` does not do anything and has a height of technically `0` because of `wrap_content` unless you are doing something with it programmatically. If you are going to use it as a `containter`, use a `FrameLayout`. — Jared Burrows, Jul 20 '15 at 14:33
I'm putting a fragment on it, doing a fragment transaction and providing the id of the RelativeLayout, i've also tried using FrameLayout same result. — Calc, Jul 20 '15 at 14:34
It is obvious you got this from Chris Banes's example: https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/include_list_viewpager.xml. Notice his `ViewPager` uses `match_parent`? — Jared Burrows, Jul 20 '15 at 14:38
Are you setting the height for the inserted fragment to match_parent? I did a test with your layout and it all seemed to work correctly. — bkurzius, Jul 20 '15 at 14:40
Yes, my code is based on that example. The problems starts when you change from ViewPager to FrameLayout/RelativeLayout. match_parent doesn't have an effect on the issue. — Calc, Jul 20 '15 at 14:41
@bkurzius - Yes, the fragment root layout is set to match_parent — Calc, Jul 20 '15 at 14:46
The issue has been solved: had a recyclerview in the fragment, but it was't the latest revision of it, when updating to com.android.support:recyclerview-v7:22.2.0 the issue has been solved — Calc, Jul 20 '15 at 15:10
@Calc -- great to hear - you should add it as an answer so others can benefit from it :-) — bkurzius, Jul 20 '15 at 15:13

score 3 · Answer 1 · answered Feb 17 '16 at 16:36

I have figured out the problem on showing fragment below toolbar when using the coordinator layout. The problem in my case is:

In this image it shows the Fragment is overlapped by Toolbar.

Now just put your AppBarLayout and FrameLayout inside LinearLayout like below,

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/mainappbar"
            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:layout_scrollFlags="scroll|enterAlways"/>

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

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

Now your problem is solved. And it will be like this.

The final image.

`AppBarLayout` should be a direct child of a `CoordinatorLayout`. See: http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html — Orbit, Feb 22 '16 at 06:39

score 2 · Answer 2 · answered Jul 20 '15 at 15:19

2

You will also see this issue if you have a ScrollView inside the fragment. So make sure you use a NestedScrollView instead:

<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

answered Jul 20 '15 at 15:19

bkurzius

4,020
2
34
34

What about LinearLayout? I'm having a similar issue with it. – Calc Jul 20 '15 at 17:38
Can you wrap it in a NestedScrollView? – bkurzius Jul 20 '15 at 19:18

score 1 · Answer 3 · answered May 16 '16 at 14:16

Had the same issue. Changing RelativeLayout to FrameLayout with parameter app:layout_behavior="@string/appbar_scrolling_view_behavior" solved my problem.

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

score 0 · Answer 4 · answered Jul 20 '15 at 15:11

0

The issue has been solved by updating the recyclerview library (to com.android.support:recyclerview-v7:22.2.0)

The fragment I was loading had a recyclerview in it.

answered Jul 20 '15 at 15:11

Calc

535
7
17

CoordinatorLayout with Toolbar and fragment

4 Answers4