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 tr

Answer 1

Set an id to your LinearLayout:

        <LinearLayout
            android:@"+id/my_linear_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

And after that create your buttons below your linear layout, to align them:

        <Button
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:text="My Button 1"
        android:id="@+id/mesa_btn_salva"

        android:layout_below="@+id/my_linear_layout" />

All of that inside your ScroolView.

And that's all.

Answer 2

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.