How to pin two buttons below toolbar while scrolling

Question

I want to achieve something like this as shown in image

I have tried this code but not able to pin button below top image or toolbar

In this I am trying to have toolbar and below that i have nested scrollview and inside that scrollview I have one more scrollview(scrollview2).

I want to pin or anchor a button to scrollview2 and when i scroll this scrollview2 up then i want button to pin to toolbar

 <?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:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">



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

        <ImageView
            android:id="@+id/homescrn_logo"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:scaleType="fitXY"
            android:src="@drawable/restaurant"
            app:layout_collapseMode="parallax" />

    </android.support.v7.widget.Toolbar>


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


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

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

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/scrlview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="@color/colorAccent"></LinearLayout>

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/colorAccent"></LinearLayout>
    </LinearLayout>

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

<Button
    android:id="@+id/bt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hi I am here"
    app:layout_anchor="@id/scrlview"
    app:layout_anchorGravity="center|bottom" />

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <RelativeLayout
            android:id="@+id/rl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:background="@drawable/restaurant" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true">

                <TextView
                    android:id="@+id/tv_business_profilescrn_business_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="16dp"
                    android:text="Chillis Kuwait"
                    android:textColor="#fff"
                    android:textSize="20sp" />


                <RelativeLayout
                    android:id="@+id/rl_business_profilescrn"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_business_profilescrn_business_name"
                    android:paddingBottom="10dp"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp">

                    <TextView
                        android:id="@+id/tv_business_profilescrn_type"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingRight="40dp"
                        android:text="Restaurent"
                        android:textColor="#fff"
                        android:textSize="20sp" />

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/tv_business_profilescrn_type"
                        android:background="#4989f2">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingLeft="5dp"
                            android:paddingRight="5dp"
                            android:text="Open"
                            android:textSize="20sp" />
                    </RelativeLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:background="#db4437"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" />

                        <TextView
                            android:id="@+id/tv_ratings"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:padding="3dp"
                            android:text="4.5"
                            android:textColor="#fff" />

                    </LinearLayout>
                </RelativeLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/rl_business_profilescrn"
                    android:background="#db4437"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:paddingLeft="10dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:orientation="horizontal"
                            android:paddingLeft="20dp">

                            <LinearLayout
                                android:id="@+id/ll_followers"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="right"
                                    android:text="243"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />

                                <TextView
                                    android:id="@+id/tv_business_profile_folowers"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Followers"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />
                            </LinearLayout>

                            <View
                                android:layout_width="1dp"
                                android:layout_height="30dp"
                                android:layout_margin="10dp"
                                android:background="#fff" />
                        </LinearLayout>
                    </RelativeLayout>

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_centerVertical="true"
                            android:orientation="horizontal">

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

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="right"
                                    android:text="243"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Likes"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />
                            </LinearLayout>

                            <View
                                android:layout_width="1dp"
                                android:layout_height="30dp"
                                android:layout_margin="10dp"
                                android:background="#fff" />
                        </LinearLayout>


                    </RelativeLayout>

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:paddingRight="16dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:orientation="vertical">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="right"
                                android:text="243"
                                android:textColor="#fff"
                                android:textSize="20sp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Views"
                                android:textColor="#fff"
                                android:textSize="20sp" />
                        </LinearLayout>


                    </RelativeLayout>
                </LinearLayout>
            </RelativeLayout>
        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <RelativeLayout
                android:id="@+id/rl_business_profilescrn_top_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="20dp"
                    android:src="@drawable/ic_back_300wt" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_share_300wt" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_share_300wt" />
                </LinearLayout>

            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>

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


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

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

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#db4437"
                android:text="Local Feed" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#db4437"
                android:text="My Feed" />
        </LinearLayout>

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />


        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

this is what exactly i want to achieve.

I have a collapsing toolbar which I want to scroll half and I am able to achieve that.

Further I have two buttons in nested scrollview which i want to pin to toolbar when I scrolldown as shown in gif.

Answer 1

I would suggest taking advantage of the CoordinatorLayout by putting the content above the tabs inside a CollapsingToolbarLayout. And using a TabLayout instead of two Buttons, which should be more in line with the Android design guidelines (though you could just swap the TabLayout for a LinearLayout with two buttons if your prefer):

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

    <android.support.design.widget.AppBarlayout android:id="@+id/app_bar"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay" android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <LinearLayout android:id="@+id/toolbar_content"
                android:layout_width="match_parent" android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_collapseMode="parallax">

                <!-- YOUR SCROLLING TOOLBAR CONTENT HERE -->

            </LinearLayout>

            <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
                android:backgroud="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"
                app:layout_collapseMode="pin"/>

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

        <android.support.design.widget.TabLayout android:id="@+id/tab_layout"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            app:tabIndicatorColor="?attr/colorAccent"
            app:menu="@menu/tabs_main"/>

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

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

        <!-- YOUR MAIN SCROLLING CONTENT HERE -->

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

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

Notice that the TabLayout is outside of the CollapsingToolbarLayout, but still inside of the AppBarLayout. This will keep the TabLayout pinned underneath the Toolbar and whatever content you put inside the CollapsingToolbarLayout. And no need for multiple NestedScrollView layouts.

There may be some problems with the spacing of the LinearLayout (some content may be hidden under the Toolbar), but if that is the case, you should be able to set the top margin of the LinearLayout to ?attr/actionBarSize. I haven't tested any of this, so comment if you run into issues.

---

You can even swap out the NestedScrollView for a ViewPager (make sure you keep the app:layout_behavior though). This would allow you to easily tie the tabs to two fragments using mTabLayout.setupWithViewPager(mViewPager).

---

EDIT After testing, unfortunately this does not seem to work the way I had hoped. The problem is that part of the content is hidden underneath the Toolbar, even if you set the top margin to ?attr/actionBarSize. This is because, for some reason, the height of the status bar is not included in the top margin of the layout. You could try to guess what the top margin should be, but this can lead to unexpected padding between the toolbar and the content.