Come si animano le viste nella barra degli strumenti quando l'utente scorre?

Question

Sto provando a inserire animazioni nella mia applicazione. Si prega di trovare la foto allegata per ottenere un'idea di animazione.

ho usato CoordinatorLayout. Il mio layout di ricerca e la barra degli strumenti sono ospitati all'interno di AppBarLayout/CollapsingToolbarLayout. Sotto questo è il mio frammento di hosting NestedScrollView.

Sono in grado di nascondere il layout di ricerca quando l'utente scorre usando i flag di scorrimento. Sto cercando di implementare un CoordinatorLayout.Behavior che inizierà a spostare l'icona del carrello a sinistra e avvierà l'icona di ricerca per scalare da 0 a 1; non appena l'utente scorre e il layout di ricerca inizia a nascondersi. Quando il layout di ricerca è completamente nascosto, voglio mostrare la barra degli strumenti come nella seconda schermata. E tornerà allo stato originale come mostrato nella prima schermata quando l'utente scorre verso il basso e il layout di ricerca inizia a comparire spostando lentamente il carrello verso destra e ridimensionando l'icona di ricerca.

Inizialmente ho messo l'icona di ricerca sulla barra degli strumenti come nascosta e l'icona di ricerca & icona di ricerca si trova all'interno di una visualizzazione lineare.

Si prega di trovare il mio xml activity_home_page.xml

<?xml version="1.0" encoding="utf-8"?> 
<com.example.ui.customviews.CustomDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/ab_app_bar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:layout_width="match_parent" 
       android:layout_height="131dp" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

       <LinearLayout 
        android:id="@+id/ll_search_layout" 
        android:layout_width="match_parent" 
        android:layout_height="75dp" 
        android:layout_gravity="bottom" 
        android:orientation="vertical" 
        android:visibility="visible" 
        app:layout_scrollFlags="scroll|snap"> 

        <LinearLayout 
         android:id="@+id/ll_search_box" 
         android:layout_width="match_parent" 
         android:layout_height="51dp" 
         android:layout_marginBottom="@dimen/dimen_12_dp" 
         android:layout_marginLeft="@dimen/dimen_8_dp" 
         android:layout_marginRight="@dimen/dimen_8_dp" 
         android:layout_marginTop="@dimen/dimen_12_dp" 
         android:background="@drawable/round_corner_layout_white" 
         android:elevation="@dimen/dimen_5_dp" 
         android:focusableInTouchMode="true" 
         android:orientation="horizontal"> 

         <EditText 
          android:id="@+id/et_search" 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          android:layout_gravity="center" 
          android:layout_marginLeft="@dimen/dimen_15_dp" 
          android:layout_weight="80" 
          android:background="@android:color/transparent" 
          android:hint="Search for Products" 
          android:padding="@dimen/dimen_5_dp" 
          android:textColor="@color/black" 
          android:textColorHint="@color/hint_text_color" 
          android:textSize="@dimen/dimen_text_16_sp" /> 

         <ImageView 
          android:id="@+id/iv_search_icon" 
          android:layout_width="@dimen/dimen_22_dp" 
          android:layout_height="@dimen/dimen_24_dp" 
          android:layout_gravity="center" 
          android:layout_marginLeft="@dimen/dimen_17_dp" 
          android:layout_marginRight="@dimen/dimen_20_dp" 
          android:src="@drawable/ic_search_grey" /> 
        </LinearLayout> 

       </LinearLayout> 

       <include 
        layout="@layout/layout_primary_toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/toolbar_primary_height" 
        android:layout_gravity="top" 
        app:layout_collapseMode="pin"/> 

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

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

     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:background="@color/askme_blue" 
      app:layout_behavior="com.GetIt.animation.SearchLayoutBehavior"/> 

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

      <FrameLayout 
       android:id="@+id/container" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="1" /> 

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

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

    <fragment 
     android:id="@+id/navigation_drawer" 
     android:name="com.example.ui.fragment.SideMenuFragment" 
     android:layout_width="@dimen/navigation_drawer_width" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" /> 
</com.example.ui.customviews.CustomDrawerLayout> 

mio XML per layout_primary_toolbar.xml è

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/toolbar_primary_height" 
    android:background="@color/askme_blue" 
    app:contentInsetEnd="0dp" 
    app:contentInsetStart="0dp" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <LinearLayout 
     android:id="@+id/layout_toolbar" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:orientation="horizontal"> 

     <ImageView 
      android:id="@+id/iv_drawer_menu" 
      android:layout_width="@dimen/dimen_22_dp" 
      android:layout_height="@dimen/dimen_22_dp" 
      android:layout_gravity="center" 
      android:layout_marginLeft="@dimen/dimen_16_dp" 
      android:layout_marginRight="@dimen/dimen_15_dp" 
      android:src="@drawable/ic_drawer_menu" /> 

     <ImageView 
      android:id="@+id/iv_back_btn" 
      android:layout_width="@dimen/dimen_22_dp" 
      android:layout_height="@dimen/dimen_20_dp" 
      android:layout_gravity="center" 
      android:layout_marginLeft="@dimen/dimen_16_dp" 
      android:layout_marginRight="@dimen/dimen_15_dp" 
      android:src="@drawable/ic_back_button" 
      android:visibility="gone"/> 

     <LinearLayout 
      android:id="@+id/ll_location" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center"> 

      <com.GetIt.ui.customviews.TextViewRRegular 
       android:id="@+id/toolbar_title" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Delhi" 
       android:textColor="@color/white" 
       android:textSize="20sp" 
       android:visibility="visible" /> 

      <ImageView 
       android:id="@+id/toolbar_location_change" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:layout_marginLeft="2dp" 
       android:layout_marginTop="2dp" 
       android:src="@drawable/ic_edit_location" 
       android:visibility="gone"/> 
     </LinearLayout> 


    </LinearLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_gravity="right" 
     android:gravity="right" 
     android:layout_marginRight="@dimen/dimen_16_dp"> 

     <RelativeLayout 
      android:id="@+id/rl_cart_count" 
      android:layout_width="@dimen/dimen_40_dp" 
      android:layout_height="@dimen/dimen_40_dp" 
      android:layout_centerVertical="true"> 

      <ImageView 
       android:layout_width="@dimen/dimen_25_dp" 
       android:layout_height="@dimen/dimen_24_dp" 
       android:layout_centerInParent="true" 
       android:clickable="false" 
       android:focusable="false" 
       android:focusableInTouchMode="false" 
       android:scaleType="center" 
       android:src="@drawable/ic_cart" /> 

      <TextView 
       android:id="@+id/tv_cart_count" 
       android:layout_width="@dimen/dimen_17_dp" 
       android:layout_height="@dimen/dimen_17_dp" 
       android:layout_alignParentRight="true" 
       android:layout_alignParentTop="true" 
       android:layout_marginRight="@dimen/dimen_3_dp" 
       android:layout_marginTop="@dimen/dimen_3_dp" 
       android:background="@drawable/cart_count_background_circle" 
       android:elevation="@dimen/dimen_5_dp" 
       android:gravity="center" 
       android:textColor="@color/white" 
       android:textSize="@dimen/dimen_text_10_sp" 
       android:textStyle="bold" 
       android:visibility="visible" /> 
     </RelativeLayout> 

     <RelativeLayout 
      android:id="@+id/rl_search" 
      android:layout_width="@dimen/dimen_40_dp" 
      android:layout_height="@dimen/dimen_40_dp" 
      android:layout_centerVertical="true" 
      android:layout_marginLeft="14dp" 
      android:layout_toRightOf="@+id/rl_cart_count"> 

      <ImageView 
       android:id="@+id/iv_search" 
       android:layout_width="@dimen/dimen_24_dp" 
       android:layout_height="@dimen/dimen_24_dp" 
       android:layout_centerInParent="true" 
       android:src="@drawable/ic_search" /> 
     </RelativeLayout> 
    </RelativeLayout> 

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

io sono bloccato su questo per ultimi 7 ore. Sono nuovo di animazione Android.

Inizialmente sto nascondendo rl_search (casella di ricerca) al livello di programmazione. Voglio che quando ll_search_layout scorre verso l'alto (che è la sua posizione originale aveva rl_search non è stato reso nascosto) e rl_search dovrebbe scalare da 0 a 1.

Ho usato ObjectAnimator con LinearInterpolator ma non funziona affatto.

Qualche suggerimento su come raggiungere questo obiettivo?

P.S. - Posso postare il codice se ne avete bisogno per riferimento.

Grazie

Answer 1

Dopo aver provato per oltre 2 giorni, finalmente sono in grado di eseguire l'animazione. Sto postando questa risposta per gli altri se anche loro vogliono fare qualcosa del genere.

Non ho utilizzato l'utilità di animazione di Android ma un trucco per aumentare e ridurre il riempimento e il ridimensionamento su e giù per l'icona di ricerca.

Questa è la mia classe di comportamento

public class SearchLayoutBehavior extends CoordinatorLayout.Behavior<ImageView> { 

    Context mContext; 

    private static final int DIRECTION_UP = 1; 
    private static final int DIRECTION_DOWN = -1; 
    private static final int CART_PADDING_LOWER_LIMIT = 0; 
    private static int CART_PADDING_UPPER_LIMIT; 
    private static final float SEARCH_SCALING_LOWER_LIMIT = 0.0f; 
    private static final float SEARCH_SCALING_UPPER_LIMIT = 1.0f; 
    private float CART_PADDING_MULTIPLICATION_FACTOR; 
    private float SEARCH_SCALE_MULTIPLICATION_FACTOR; 

    RelativeLayout mRlSearch, mRlParentCart; 
    Toolbar mToolbar; 
    LinearLayout mLlSearchLayout; 

    boolean mIsSetupDone = false; 
    int mScrollingDirection, mPrevDiff1, mPrevDiff2; 

    public SearchLayoutBehavior() { 
     super(); 
    } 

    public SearchLayoutBehavior(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     mContext = context; 
    } 

    @Override 
    public boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) { 
     return (dependency.getId() == R.id.ab_app_bar); 
    } 

    @Override 
    public boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) { 
     mRlParentCart = (RelativeLayout) dependency.findViewById(R.id.rl_parent_cart_count); 
     mRlSearch = (RelativeLayout) dependency.findViewById(R.id.rl_search); 
     mToolbar = (Toolbar) dependency.findViewById(R.id.toolbar); 
     mLlSearchLayout = (LinearLayout) dependency.findViewById(R.id.ll_search_layout); 

     int searchLayoutBottom = mLlSearchLayout.getBottom(); 
     int searchLayoutTop = mLlSearchLayout.getTop(); 
     int toolbarBottom = mToolbar.getBottom(); 

     int diff1 = searchLayoutBottom - toolbarBottom; 
     int diff2 = searchLayoutTop - toolbarBottom; 

     if (!mIsSetupDone) { 
      CART_PADDING_UPPER_LIMIT = mContext.getResources().getDimensionPixelSize(R.dimen.cart_animation_move_left); 
      CART_PADDING_MULTIPLICATION_FACTOR = (float) CART_PADDING_UPPER_LIMIT/diff1; 
      SEARCH_SCALE_MULTIPLICATION_FACTOR = (float) 1/diff1; 
      mPrevDiff1 = diff1; 
      mPrevDiff2 = -diff1; 
      mIsSetupDone = true; 
     } 

     if (mScrollingDirection == DIRECTION_UP && mPrevDiff1 >= diff1) { 
      moveCart(mRlParentCart, mPrevDiff1 - diff1, true); 
      mPrevDiff1 = diff1; 
     } else if (mScrollingDirection == DIRECTION_DOWN && mPrevDiff2 <= diff2) { 
      moveCart(mRlParentCart, diff2 - mPrevDiff2, false); 
      mPrevDiff2 = diff2; 
     } 

     if (diff2 == 0) { 
      mPrevDiff1 = diff1; 
      mPrevDiff2 = -diff1; 
     } 

     return true; 
    } 

    private void moveCart(final View view, float by, boolean doMoveLeft) { 
     int paddingRight = view.getPaddingRight(); 
     float scaleX = mRlSearch.getScaleX(); 
     float scaleY = mRlSearch.getScaleY(); 

     if (doMoveLeft) { 
      paddingRight += (int) (by * CART_PADDING_MULTIPLICATION_FACTOR); 
      if (paddingRight >= CART_PADDING_UPPER_LIMIT) { 
       view.setPadding(0, 0, CART_PADDING_UPPER_LIMIT, 0); 
      } else { 
       view.setPadding(0, 0, paddingRight, 0); 
      } 

      scaleX += by * SEARCH_SCALE_MULTIPLICATION_FACTOR; 
      scaleY += by * SEARCH_SCALE_MULTIPLICATION_FACTOR; 
      if (Float.compare(scaleX, SEARCH_SCALING_UPPER_LIMIT) >= 0) { 
       mRlSearch.setScaleX(SEARCH_SCALING_UPPER_LIMIT); 
      } else { 
       mRlSearch.setScaleX(scaleX); 
      } 

      if (Float.compare(scaleY, SEARCH_SCALING_UPPER_LIMIT) >= 0) { 
       mRlSearch.setScaleY(SEARCH_SCALING_UPPER_LIMIT); 
      } else { 
       mRlSearch.setScaleY(scaleY); 
      } 

     } else { 
      paddingRight -= (int) (by * CART_PADDING_MULTIPLICATION_FACTOR); 
      if (paddingRight <= CART_PADDING_LOWER_LIMIT) { 
       view.setPadding(0, 0, CART_PADDING_LOWER_LIMIT, 0); 
      } else { 
       view.setPadding(0, 0, paddingRight, 0); 
      } 

      scaleX -= by * SEARCH_SCALE_MULTIPLICATION_FACTOR; 
      scaleY -= by * SEARCH_SCALE_MULTIPLICATION_FACTOR; 

      if (Float.compare(scaleX, SEARCH_SCALING_LOWER_LIMIT) == -1) { 
       mRlSearch.setScaleX(SEARCH_SCALING_LOWER_LIMIT); 
      } else { 
       mRlSearch.setScaleX(scaleX); 
      } 

      if (Float.compare(scaleY, SEARCH_SCALING_LOWER_LIMIT) == -1) { 
       mRlSearch.setScaleY(SEARCH_SCALING_LOWER_LIMIT); 
      } else { 
       mRlSearch.setScaleY(scaleY); 
      } 
     } 
    } 

    @Override 
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, ImageView child, View target, int dx, int dy, int[] consumed) { 
     //Determine direction changes here 
     if (dy > 0 && mScrollingDirection != DIRECTION_UP) { 
      mScrollingDirection = DIRECTION_UP; 
     } else if (dy < 0 && mScrollingDirection != DIRECTION_DOWN) { 
      mScrollingDirection = DIRECTION_DOWN; 
     } 
    } 

    @Override 
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, ImageView child, View directTargetChild, View target, int nestedScrollAxes) { 
     return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0; 
    } 

} 

Questo è il mio XML che utilizza il layout coordinatore. Quando il layout di ricerca si sposta verso l'alto, il carrello si sposta a sinistra e l'icona di ricerca si ingrandisce.

<com.example.ui.customviews.CustomDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/ab_app_bar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:layout_width="match_parent" 
       android:layout_height="131dp" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

       <LinearLayout 
        android:id="@+id/ll_search_layout" 
        android:layout_width="match_parent" 
        android:layout_height="75dp" 
        android:layout_gravity="bottom" 
        android:orientation="vertical" 
        android:visibility="visible" 
        android:background="@drawable/search_layout_twin_background" 
        app:layout_scrollFlags="scroll|snap"> 

        <LinearLayout 
         android:id="@+id/ll_search_box" 
         android:layout_width="match_parent" 
         android:layout_height="51dp" 
         android:layout_marginBottom="@dimen/dimen_12_dp" 
         android:layout_marginLeft="@dimen/dimen_8_dp" 
         android:layout_marginRight="@dimen/dimen_8_dp" 
         android:layout_marginTop="@dimen/dimen_12_dp" 
         android:background="@drawable/round_corner_layout_white" 
         android:elevation="@dimen/dimen_5_dp" 
         android:focusableInTouchMode="true" 
         android:orientation="horizontal"> 

         <EditText 
          android:id="@+id/et_search" 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          android:layout_gravity="center" 
          android:layout_marginLeft="@dimen/dimen_15_dp" 
          android:layout_weight="80" 
          android:background="@android:color/transparent" 
          android:hint="Search for Products" 
          android:padding="@dimen/dimen_5_dp" 
          android:textColor="@color/black" 
          android:textColorHint="@color/hint_text_color" 
          android:textSize="@dimen/dimen_text_16_sp" /> 

         <ImageView 
          android:id="@+id/iv_search_icon" 
          android:layout_width="@dimen/dimen_22_dp" 
          android:layout_height="@dimen/dimen_24_dp" 
          android:layout_gravity="center" 
          android:layout_marginLeft="@dimen/dimen_17_dp" 
          android:layout_marginRight="@dimen/dimen_20_dp" 
          android:src="@drawable/ic_search_grey" /> 
        </LinearLayout> 

       </LinearLayout> 

       <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/toolbar_primary_height" 
    android:background="@color/askme_blue" 
    app:contentInsetEnd="0dp" 
    app:contentInsetStart="0dp" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <LinearLayout 
     android:id="@+id/layout_toolbar" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:orientation="horizontal"> 

     <FrameLayout 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:layout_gravity="center"> 

      <ImageView 
       android:id="@+id/iv_drawer_menu" 
       android:layout_width="@dimen/dimen_22_dp" 
       android:layout_height="@dimen/dimen_22_dp" 
       android:layout_gravity="center" 
       android:layout_marginLeft="@dimen/dimen_16_dp" 
       android:layout_marginRight="@dimen/dimen_15_dp" 
       android:background="?attr/selectableItemBackgroundBorderless" 
       android:src="@drawable/ic_drawer_menu" /> 

      <ImageView 
       android:id="@+id/iv_back_btn" 
       android:layout_width="@dimen/dimen_22_dp" 
       android:layout_height="@dimen/dimen_20_dp" 
       android:layout_gravity="center" 
       android:layout_marginLeft="@dimen/dimen_16_dp" 
       android:layout_marginRight="@dimen/dimen_15_dp" 
       android:background="?attr/selectableItemBackgroundBorderless" 
       android:src="@drawable/ic_back_button" 
       android:visibility="gone" /> 
     </FrameLayout> 

     <LinearLayout 
      android:id="@+id/ll_location" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:layout_gravity="center" 
      android:background="?attr/selectableItemBackgroundBorderless"> 

      <TextView 
       android:id="@+id/toolbar_title" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:text="Delhi" 
       android:textColor="@color/white" 
       android:textSize="20sp" 
       android:visibility="visible" /> 

      <ImageView 
       android:id="@+id/toolbar_location_change" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:layout_marginLeft="@dimen/dimen_3_dp" 
       android:layout_marginTop="@dimen/dimen_4_dp" 
       android:src="@drawable/ic_edit_location" 
       android:visibility="visible" /> 
     </LinearLayout> 


    </LinearLayout> 

    <FrameLayout 
     android:layout_width="@dimen/dimen_100_dp" 
     android:layout_height="match_parent" 
     android:layout_gravity="right" 
     android:layout_marginRight="@dimen/dimen_16_dp" 
     android:gravity="right"> 

     <RelativeLayout 
      android:id="@+id/rl_search" 
      android:layout_width="@dimen/dimen_40_dp" 
      android:layout_height="@dimen/dimen_40_dp" 
      android:layout_gravity="center_vertical|right" 
      android:layout_marginLeft="14dp" 
      android:background="?attr/selectableItemBackgroundBorderless"> 

      <ImageView 
       android:id="@+id/iv_search" 
       android:layout_width="@dimen/dimen_24_dp" 
       android:layout_height="@dimen/dimen_24_dp" 
       android:layout_centerInParent="true" 
       android:src="@drawable/ic_search" /> 
     </RelativeLayout> 

     <RelativeLayout 
      android:id="@+id/rl_parent_cart_count" 
      android:layout_width="94dp" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical|right" 
      android:gravity="right" 
      android:paddingRight="54dp"> 

      <RelativeLayout 
       android:id="@+id/rl_cart_count" 
       android:layout_width="@dimen/dimen_40_dp" 
       android:layout_height="@dimen/dimen_40_dp" 
       android:layout_gravity="center_vertical|right" 
       android:background="?attr/selectableItemBackgroundBorderless"> 

       <ImageView 
        android:layout_width="@dimen/dimen_25_dp" 
        android:layout_height="@dimen/dimen_24_dp" 
        android:layout_centerInParent="true" 
        android:clickable="false" 
        android:focusable="false" 
        android:focusableInTouchMode="false" 
        android:scaleType="center" 
        android:src="@drawable/ic_cart" /> 

       <TextView 
        android:id="@+id/tv_cart_count" 
        android:layout_width="@dimen/dimen_17_dp" 
        android:layout_height="@dimen/dimen_17_dp" 
        android:layout_alignParentRight="true" 
        android:layout_alignParentTop="true" 
        android:layout_marginRight="@dimen/dimen_3_dp" 
        android:layout_marginTop="@dimen/dimen_3_dp" 
        android:background="@drawable/cart_count_background_circle" 
        android:elevation="@dimen/dimen_5_dp" 
        android:gravity="center" 
        android:textColor="@color/white" 
        android:textSize="@dimen/dimen_text_10_sp" 
        android:textStyle="bold" 
        android:visibility="visible" /> 
      </RelativeLayout> 
     </RelativeLayout> 
    </FrameLayout> 

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

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

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

     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:background="@color/askme_blue" 
      app:layout_behavior="com.GetIt.animation.SearchLayoutBehavior"/> 

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

      <FrameLayout 
       android:id="@+id/container" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="1" /> 

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

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

    <fragment 
     android:id="@+id/navigation_drawer" 
     android:name="com.example.ui.fragment.SideMenuFragment" 
     android:layout_width="@dimen/navigation_drawer_width" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" /> 
</com.example.ui.customviews.CustomDrawerLayout> 

Ecco come sarà.

Answer 2

progettare il layout, come di seguito con CoordinatorLayout e AppBarLayout e aggiungere un Toolbar al suo interno.

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/coordinatorlayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context=".dashboard.DashboardActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbarlayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <include 
      layout="@layout/toolbar_default" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:tabGravity="fill" 
      app:tabMaxWidth="0dp" 
      app:tabIndicatorHeight="4dp" 
      app:tabMode="fixed" 
      app:tabIndicatorColor="@android:color/white" 
      android:background="@color/AppPrimary"/> 
    </android.support.design.widget.AppBarLayout> 

    <include layout="@layout/content_dashboard" /> 

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

E in res layout del contenuto del dashboard definire un comportamento di layout per il tuo contenuto come di seguito:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context=".dashboard.DashboardActivity" 
    tools:showIn="@layout/activity_dashboard"> 


    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager_main" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

</RelativeLayout> 

E 'una vecchia moda po' ma è possibile controllare la mia soluzione senza il layout coorinator dal link sottostante: Android Toolbar + Tab Layout + Drawer, Hide toolbar when scrolling and take TabLayout to the top

Buona fortuna.