Cómo fijar dos botones debajo de la barra de herramientas mientras se desplaza

Introduzca aquí la descripción de la imagen

Quiero lograr algo como esto como se muestra en la imagen

He intentado este código pero no puedo fijar el botón debajo de la imagen superior o de la barra de herramientas

En esto estoy tratando de tener barra de herramientas y por debajo de que tengo scrollview anidado y dentro de ese scrollview tengo un scrollview más (scrollview2).

Quiero fijar o ancla un botón a scrollview2 y cuando hago scroll scroll2 hacia arriba entonces quiero que el botón de pin a la barra de herramientas

<?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>

Esto es exactamente lo que quiero lograr.

Tengo una barra de herramientas de colapso que quiero desplazar la mitad y soy capaz de lograr eso.

Además tengo dos botones en scrollview anidado que quiero pin a la barra de herramientas cuando scrolldown como se muestra en gif.

Yo sugeriría tomar ventaja de la CoordinatorLayout poniendo el contenido por encima de las pestañas dentro de un CollapsingToolbarLayout . Y usando TabLayout lugar de dos Buttons , lo que debería estar más en línea con las directrices de diseño de Android (aunque sólo puede cambiar el TabLayout para un LinearLayout con dos botones si lo prefiere):

 <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>

Observe que el TabLayout está fuera del CollapsingToolbarLayout , pero todavía dentro de AppBarLayout . Esto mantendrá el TabLayout clavado debajo de la Toolbar y cualquier contenido que coloque dentro de la CollapsingToolbarLayout . Y no hay necesidad de múltiples diseños NestedScrollView .

Puede haber algunos problemas con el espaciado de LinearLayout (algún contenido puede estar oculto bajo la Toolbar ), pero si ese es el caso, debería ser capaz de establecer el margen superior de LinearLayout a ?attr/actionBarSize . No he probado nada de esto, así que comenta si te encuentras con problemas.

Incluso puede intercambiar el NestedScrollView por un ViewPager (asegúrese de mantener la app:layout_behavior ). Esto le permitiría amarrar fácilmente las pestañas a dos fragmentos usando mTabLayout.setupWithViewPager(mViewPager) .

EDIT Después de las pruebas, por desgracia, esto no parece funcionar de la manera que esperaba. El problema es que parte del contenido se oculta debajo de la Toolbar , incluso si se establece el margen superior en ?attr/actionBarSize . Esto se debe a que, por alguna razón, la altura de la barra de estado no está incluida en el margen superior del diseño. Usted podría tratar de adivinar lo que el margen superior debe ser, pero esto puede conducir a un relleno inesperado entre la barra de herramientas y el contenido.

Establezca un id en LinearLayout:

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

Y después de eso crear sus botones debajo de su disposición lineal, para alinearlos:

  <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" />

Todo eso dentro de tu ScroolView.

Y eso es todo.