How to pin two buttons below toolbar while scrolling

Enter image description here

I want to achieve something like this as shown in image

  • android.app.Application cannot be cast to android.app.Activity
  • How do I enforce a circular reference in a RelativeLayout?
  • Why to use Service if it runs in the same thread in android
  • Gallery items overlapping (bleed in)
  • How to maintain session in android?
  • MapFragment or MapView getMap() returns null on Lollipop
  • 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.

  • setOnclickListener vs OnClickListener vs View.OnClickListener
  • how to create custom UI for android MediaController
  • Multiple Table SQLite DB Adapter(s) in Android?
  • How to display image from URL on Android
  • Changing gradient background colors on Android at runtime
  • DELETE_FAILED_INTERNAL_ERROR Error while Installing APK
  • 2 Solutions collect form web for “How to pin two buttons below toolbar while scrolling”

    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.

    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.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.