Пользовательские представления в панели инструментов, например, Airbnb explore screen

Question

Я хочу добавить несколько полей ввода в верхнюю панель приложения (панель инструментов) для поиска в моем приложении. Я вижу, что Airbnb делает это в лучшем виде! Я пробовал различные сценарии, используя AppBarLayout в CoordinatorLayout, но все это не удалось. Можно ли получить тот же или аналогичный эффект? Если да, как мы это делаем?

Вот скриншоты, когда я красть вниз верхнюю панель:

Answer 1

Да, можно создать с помощью AppBar макет, я пытался ту же задачу, наконец у меня есть таким образом, я думаю, что ниже код полезен для вас

<?xml version="1.0" encoding="utf-8"?> 
    <layout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 
     <!--your toolbar--> 
     <include 
      android:id="@+id/toolbar_wrapper" 
      layout="@layout/common_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" /> 

     <android.support.design.widget.CoordinatorLayout 
      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:background="@color/color_fafafa" 
       android:orientation="vertical"> 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:background="@color/color_ffffff" 
        android:orientation="vertical" 
        app:layout_scrollFlags="scroll"> 

        <!--your scrolling layout, in your case it will be edit texts and search fields--> 
       </LinearLayout> 
      </android.support.design.widget.AppBarLayout> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical" 
       app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

       <android.support.design.widget.TabLayout 
        android:id="@+id/tab_layout" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/dp_49" 
        android:background="@color/color_ffffff" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
        app:tabIndicatorColor="@color/colorAccent" 
        app:tabSelectedTextColor="@color/color_727272" 
        app:tabTextColor="@color/color_b6b6b6" /> 

       <View 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/dp_1" 
        android:background="@color/color_d9d9d9" /> 
       <!--your main layout--> 
       <android.support.v4.view.ViewPager 
        android:id="@+id/detail_pager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:nestedScrollingEnabled="true" /> 
      </LinearLayout> 

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

Answer 2

Если вы все еще ищете ответ, я попытался сделать что-то подобное. Моя раскладка

<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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:ignore="RtlHardcoded"> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/main.collapsing" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> 

      <android.support.v7.widget.Toolbar 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:visibility="invisible" 
       app:contentInsetEnd="0dp" 
       app:contentInsetStart="0dp"> 

       <LinearLayout 
        android:id="@+id/summarized_search_layout" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_gravity="top|center_horizontal" 
        android:layout_marginEnd="12dp" 
        android:layout_marginStart="12dp" 
        android:background="@drawable/background_blue_light_rounded" 
        android:orientation="horizontal" 
        android:padding="12dp" 
        app:layout_collapseMode="none"> 

        <ImageView 
         android:layout_width="20dp" 
         android:layout_height="20dp" 
         android:layout_gravity="center_vertical" 
         android:src="@drawable/menu_search" /> 

        <TextView 
         android:id="@+id/summarized_search_text" 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_gravity="center_vertical" 
         android:layout_marginStart="12dp" /> 

       </LinearLayout> 

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

      <LinearLayout 
       android:id="@+id/extended_search_layout" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom|center_horizontal" 
       android:layout_marginTop="6dp" 
       android:orientation="vertical" 
       app:layout_collapseMode="parallax" 
       app:layout_collapseParallaxMultiplier="1"> 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginEnd="12dp" 
        android:layout_marginStart="12dp" 
        android:background="@drawable/background_blue_light_rounded" 
        android:orientation="horizontal" 
        android:padding="12dp"> 

        <ImageView 
         android:layout_width="20dp" 
         android:layout_height="20dp" 
         android:layout_gravity="center_vertical" 
         android:src="@drawable/menu_profile" /> 

        <TextView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_vertical" 
         android:layout_marginStart="12dp" /> 

       </LinearLayout> 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginEnd="12dp" 
        android:layout_marginStart="12dp" 
        android:layout_marginTop="12dp" 
        android:background="@drawable/background_blue_light_rounded" 
        android:orientation="horizontal" 
        android:padding="12dp"> 

        <ImageView 
         android:layout_width="20dp" 
         android:layout_height="20dp" 
         android:layout_gravity="center_vertical" 
         android:src="@drawable/menu_calendar" /> 

        <TextView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_vertical" 
         android:layout_marginStart="12dp" /> 

       </LinearLayout> 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginEnd="12dp" 
        android:layout_marginStart="12dp" 
        android:layout_marginTop="12dp" 
        android:background="@drawable/background_blue_light_rounded" 
        android:orientation="horizontal" 
        android:padding="12dp"> 

        <ImageView 
         android:layout_width="20dp" 
         android:layout_height="20dp" 
         android:layout_gravity="center_vertical" 
         android:src="@drawable/menu_poi" /> 

        <TextView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_vertical" 
         android:layout_marginStart="12dp" /> 

       </LinearLayout> 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginEnd="12dp" 
        android:layout_marginStart="12dp" 
        android:layout_marginTop="12dp" 
        android:background="@drawable/background_blue_light_rounded" 
        android:orientation="horizontal" 
        android:padding="12dp"> 

        <ImageView 
         android:layout_width="20dp" 
         android:layout_height="20dp" 
         android:layout_gravity="center_vertical" 
         android:src="@drawable/menu_poi" /> 

        <TextView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_vertical" 
         android:layout_marginStart="12dp" /> 

       </LinearLayout> 

       <Button 
        android:id="@+id/validation_button" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="end" 
        android:layout_marginEnd="12dp" 
        android:layout_marginTop="12dp" 
        android:text="GO" /> 

      </LinearLayout> 

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tablayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabGravity="fill" 
      app:tabMode="fixed"> 

      <android.support.design.widget.TabItem 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Search" /> 

      <android.support.design.widget.TabItem 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Popular" /> 

      <android.support.design.widget.TabItem 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Favorites" /> 

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

     <android.support.v4.widget.NestedScrollView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scrollbars="none"> 

      <android.support.v7.widget.CardView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="8dp" 
       app:cardElevation="8dp" 
       app:contentPadding="16dp"> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:lineSpacingExtra="8dp" 
        android:text="@string/lorem" 
        android:textSize="18sp" /> 
      </android.support.v7.widget.CardView> 


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

    </LinearLayout> 


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

Вы можете видеть, я использую Toolbar с visibility = invisible, чтобы заставить мое расположение, чтобы остаться частично видимым. Я не очень горжусь этим трюком, но я не нашел другого решения.

Как только у вас есть макет, это просто вопрос анимации в зависимости от хода смещения.

Если вы добьетесь успеха, я был бы рад увидеть ваш код, потому что я не очень доволен своим.

Надеюсь, это может вам помочь.