Come al pin due pulsanti sotto della barra degli strumenti durante lo scorrimento

voglio ottenere qualcosa di simile, come mostrato nella immagine

Ho provato questo codice, ma non è in grado pulsante per perno superiore dell'immagine o della barra degli strumenti

qui sotto

In questo sto cercando di avere una barra degli strumenti e di seguito ho una scrollview annidata e all'interno di quella scrollview ho ancora una scrollview (scrollview2).

voglio PIN o ancorare un pulsante per scrollview2 e quando ho scorrere questo scrollview2 fino allora voglio pulsante al pin per barra degli strumenti

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

th è esattamente ciò che voglio ottenere.

Ho una barra degli strumenti che crolla che voglio scorrere a metà e sono in grado di farlo.

Inoltre ho due pulsanti in scrollview annidato che voglio appuntare sulla barra degli strumenti quando eseguo lo scrolldown come mostrato in gif.

fonte

2016-04-22 Mohit Goel

Sto già utilizzando il layout del coordinatore nel mio codice xml. si prega di controllare. –

Segui questo link può aiutarti: http://stackoverflow.com/questions/17780591/making-a-middle-element-to-get-stuck-in-the-header-scrollview-listview –

@MohitGoel Prova con la mia risposta sotto. –

Vorrei suggerire di sfruttare lo CoordinatorLayout inserendo il contenuto sopra le schede all'interno di uno CollapsingToolbarLayout. E l'utilizzo di un TabLayout invece di due Buttons, che dovrebbe essere più in linea con le linee guida di progettazione Android (anche se si può solo scambiare la TabLayout per LinearLayout con due pulsanti, se il vostro preferito):

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

Si noti che il TabLayout è al di fuori dello CollapsingToolbarLayout, ma ancora all'interno dello AppBarLayout. Ciò manterrà il TabLayout bloccato sotto lo Toolbar e qualsiasi contenuto inserito all'interno dello CollapsingToolbarLayout. E non c'è bisogno di più layout NestedScrollView.

Ci possono essere alcuni problemi con la spaziatura del LinearLayout (alcuni contenuti possono essere nascosto sotto il Toolbar), ma se questo è il caso, si dovrebbe essere in grado di impostare il margine superiore del LinearLayout a ?attr/actionBarSize. Non ho provato nulla di tutto ciò, quindi commenta se ti imbatti in problemi.

È anche possibile scambiare la NestedScrollView per una ViewPager (assicurarsi di mantenere la app:layout_behavior però). Ciò consentirebbe di legare facilmente le schede a due frammenti usando mTabLayout.setupWithViewPager(mViewPager).

EDIT Dopo la prova, purtroppo questo non sembra funzionare il modo in cui avevo sperato. Il problema è che parte del contenuto è nascosta sotto lo Toolbar, anche se si imposta il margine superiore su ?attr/actionBarSize. Questo perché, per qualche motivo, l'altezza della barra di stato non è inclusa nel margine superiore del layout. È possibile provare a indovinare quale margine deve essere, ma ciò può portare a un riempimento imprevisto tra la barra degli strumenti e il contenuto.

fonte

2016-04-22 14:07:12 Bryan

Grazie per la soluzione. Sto tentando di aggiungere un'immagine nella barra degli strumenti. Anche se sto dando la sua larghezza come match parent, continua a dare un po 'di padding alla vista di immagini. –

@MohitGoel Huh, è strano. Pubblica il tuo nuovo layout? Forse vedrò qualcosa che ti sei perso. – Bryan

C'è qualche altro modo per fare questa cosa? –

Impostare un id alla LinearLayout:

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

E dopo che creano i pulsanti sotto il layout lineare, per allinearle:

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

Tutto questo all'interno del vostro ScroolView.

E questo è tutto.

fonte

2016-04-22 13:37:08

NestedScrollView può avere un solo figlio. Inoltre, se aggiungo semplicemente il pulsante sotto il layout lineare, esso non verrà bloccato sotto NestedScrollView e sulla barra degli strumenti dopo lo scorrimento. –

Questo è vero, ho dimenticato. Quindi crea una vista relativa e metti il layout lineare (my_linear_layout) all'interno e il pulsante. –

Come al pin due pulsanti sotto della barra degli strumenti durante lo scorrimento

risposta

Problemi correlati