LinearLayout overlapping Support CoordinatorLayout

Question

It's the first time I use CoordinatorLayout, and I don't really understand how it works.

My LinearLayout is overlapping my Toolbar, as if I were in a FrameLayout, or RelativeLayout, and I don't know how to tell it to go below ( Like android:layout_below with RelativeLayout )

Here is my code:

<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="192dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:src="@drawable/logo2"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/appbar"
        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">

            .... Very Large Form ...
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Another doubt: Almost all the examples I saw were with CoordinateLayout managing RecyclerView. My Layout is not a RecyclerView, just a very long form. Does it make sense doing it this way?

Answer 1

Try nesting your content inside of a NestedScrollView. Don't forget to include the layout_behavior XML tag.

 <android.support.v4.widget.NestedScrollView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

     <!-- Your scrolling content -->

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

Additional resources: http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

Answer 2

I found a solution. I suppose it's not be the best solution out there, but it makes everything looks OK and it allow us to continue with CoordinatorLayout's animations.

I just set the Fragment's margintTop and marginBot to the exact same DPs that the toolbar on top has and that the bottom nav bar has.

In my case, my toolbar and my navbar have "?attr/actionBarSize" height. So I just set the top and bot margins of my fragment to "?attr/actionBarSize"

Again, it's not as good as using Linear or Relative Layout, but I'm afraid if we chose that solution we waste CoordinatorLayout's animations.

on Toolbar and BottomNavBar:

android:layout_height="?attr/actionBarSize"

and in my Fragment:

android:layout_marginTop="?attr/actionBarSize"
android:layout_marginBottom="?attr/actionBarSize"