2

Я с трудностями, пытаясь реализовать панель инструментов, как в изображениях ниже:Сворачивание панели инструментов с изображением, вкладки и FAB

enter image description here

Однако, я не смог добавить плавающую кнопку Действие, как показано на образ. Я использую библиотеку поддержки дизайна Googles. Есть идеи?

Мой текущий код XML:

<?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/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <FrameLayout 
       android:layout_width="match_parent" 
       android:layout_height="250dp" 
       app:layout_collapseMode="parallax" 
       app:layout_collapseParallaxMultiplier="0.7"> 

       <ImageView 
        android:id="@+id/imgBackdrop" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:scaleType="centerCrop" /> 

       <View 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:background="#20000000" /> 

      </FrameLayout> 


      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       style="@style/Widget.PinList.ActionBar.Transparent" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" /> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       style="@style/PinListTabLayout" 
       android:layout_width="match_parent" 
       android:layout_height="60dp" 
       app:layout_collapseMode="pin" /> 

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

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewPager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/background" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</android.support.design.widget.CoordinatorLayout> 
+0

Почему вы используете два CollapsingToolbarLayout? Я думаю, вы должны использовать только один – buzeeg

+0

В этом случае TabLayout всегда накладывал FrameLayout. Я пробовал много комбинаций только с одним CollapsingToolbarLayout, но никто из них не работал для меня – dmacan23

ответ

5

Я нашел решение. Я думал, что app:layout_anchorGravity может ссылаться только на такие элементы, как атрибуты позиционирования RelativeLayout. Но, очевидно, я был неправ. Я только добавил этот код выше ViewPager в предыдущем XML:

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="10dp" 
    android:layout_marginRight="10dp" 
    android:src="@drawable/ic_action_add" 
    app:layout_anchor="@id/collapsing_toolbar" 
    app:layout_anchorGravity="bottom|right|end" /> 
1

Смотрите мое решение here. Работает на API 14-23. Надеюсь, что вам помогут