Place a LinearLayout between AppBarLayout and NestedScrollView

890 views Asked by At

I need to place a LinearLayout between AppBarLayout and NestedScrollView.
To clarify: It has to be OUTSIDE the nested scrollview, above it.

So far, this is the best behaviour I've managed to get: GIF Preview

With Gudin's Answer: GIF Preview

Note how the layout disappears when I scroll all the way up. That's not supposed to happen either.

This is the XML file (Updated with Gudin's Answer)

<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
        <android.support.design.widget.AppBarLayout
            android:layout_height="300dp"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="true">
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:statusBarScrim="?attr/colorPrimary"
                app:contentScrim="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                <ImageView
                        android:id="@+id/facePicture"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        app:layout_collapseMode="parallax"/>
                <android.support.v7.widget.Toolbar
                        android:id="@+id/toolBar"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_width="match_parent"
                        app:layout_collapseMode="pin" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@android:color/white"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
                <android.support.percent.PercentRelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp">
                    <ImageView
                        android:src="@drawable/audio_selected"
                        android:layout_height="24dp"
                        android:layout_width="24dp"
                        app:layout_marginLeftPercent="15%"
                        android:layout_alignParentLeft="true" />
                    <ImageView
                        android:src="@drawable/video"
                        android:layout_height="24dp"
                        android:layout_width="24dp"
                        android:layout_centerHorizontal="true" />
                    <ImageView
                        android:src="@drawable/gallery_disabled"
                        android:layout_height="24dp"
                        android:layout_width="24dp"
                        app:layout_marginRightPercent="15%"
                        android:layout_alignParentRight="true" />
                </android.support.percent.PercentRelativeLayout>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_margin="16dp"
                    android:background="@color/scheme_verydarkgray"/>
            </LinearLayout>
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_gravity="fill_vertical">
            <LinearLayout
                android:id="@+id/detailsPanel"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white"
                android:padding="16dp">
                <TextView
                    android:id="@+id/nameLabel"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="LOREM IPSUM DOLOR SIT AMET"
                    android:textColor="#6D6E71"
                    android:textSize="48sp"
                    android:layout_marginRight="16dp"
                    android:layout_marginLeft="16dp"
                    android:gravity="center"
                    fontPath="fonts/bebasneue_light.ttf" />
                <TextView
                    android:id="@+id/ageLabel"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="00 ANNI"
                    android:textColor="#6D6E71"
                    android:textSize="28sp"
                    android:layout_marginBottom="16dp"
                    android:layout_marginRight="16dp"
                    android:layout_marginLeft="16dp"
                    android:gravity="center"
                    fontPath="fonts/bebasneue_light.ttf" />
                <TextView
                    android:id="@+id/storyLabel"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="16dp"
                    android:layout_marginLeft="16dp"
                    android:textColor="#6D6E71"
                    android:textSize="20sp"
                    fontPath="fonts/helvetica-light.otf"
                    android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at fermentum arcu, sed dapibus odio. Vivamus non tincidunt est. Nullam efficitur erat ac tellus malesuada finibus. Maecenas porttitor, enim quis consequat aliquet, magna lacus interdum orci, sed scelerisque mi nisi sit amet ante. Proin laoreet, lacus vel interdum pharetra, enim leo egestas ipsum, sed dictum erat nulla volutpat tellus. Nunc volutpat nisi mauris, ut aliquam ligula condimentum at. Maecenas commodo diam dolor, vel efficitur magna dignissim eu. Donec purus eros, mattis vitae ante at, sodales ullamcorper ante. Donec sed luctus nisl, lacinia gravida augue. In ornare tortor id dolor hendrerit, in faucibus est pellentesque.  Vivamus mattis aliquet odio, sit amet dignissim mi ultrices ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque et nisl dictum, venenatis erat quis, fermentum diam. Vivamus consequat maximus orci. Donec ut imperdiet augue. Morbi egestas pulvinar congue. Praesent fermentum sapien non mauris suscipit, ac scelerisque tellus blandit. Mauris condimentum, erat non vulputate mattis, elit tellus mattis leo, eget malesuada leo nisl quis massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>  
</android.support.design.widget.CoordinatorLayout>

Thank you :)

2

There are 2 answers

2
JoKr On BEST ANSWER

What's happening is that CoordinatorLayout is drawing Toolbar on top of LinearLayout. You need to add app:layout_behavior="@string/appbar_scrolling_view_behavior" to your LinearLayout.

1
Shashank Verma On

use like this:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:id="@+id/main.appbar"
    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:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/placeholder"
            android:scaleType="centerCrop"
            android:id="@+id/image"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="80sp"
            android:paddingTop="27sp"
            app:layout_collapseMode="pin" />


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

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

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


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#ffffff"
        android:id="@+id/linearback"
        android:paddingTop="10dp">
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_marginTop="15dp"
            android:gravity="right">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Date:"
            android:id="@+id/Datefetch"
            android:textColor="#000000"
            android:layout_gravity="end"
            />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="01-01-2017"
                android:textColor="#000000"
                android:id="@+id/date"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:textColorHint="#000000"/>
        </LinearLayout>
        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Info:"
            android:textColor="#000000"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:textSize="28sp"
            android:paddingBottom="5dp"
            />
        <TextView android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@+id/content1"
            android:textColor="#000000"
            android:layout_marginLeft="10dp"
            android:textColorHint="#000000"
            android:layout_marginRight="10dp"
            android:hint="Your Content Here..........."
            android:paddingBottom="5dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Games and Events:"
            android:textColor="#000000"
            android:textSize="28sp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:paddingBottom="5dp"
            />
       <android.support.v7.widget.RecyclerView
           android:layout_height="wrap_content"
            android:layout_width="wrap_content"
           android:id="@+id/game_events_rec"
           />
        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Venue:"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:textColor="#000000"
            android:textSize="28sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:textColor="#000000"
            android:id="@+id/venueeve"

            />

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:src="@drawable/my_library_add_black_48x48"
    app:layout_anchor="@id/main.appbar"
    android:id="@+id/addeventfab"
    app:backgroundTint="#ffff11"
    app:layout_anchorGravity="bottom|right|end"
    />