3

Задача: сделать поле поиска(используем для фона CardView), находящееся прямо под toolbar и наполовину выпирающее из AppBarLayout. Пример ниже:

введите сюда описание изображения

Первый найденный мной способ. Тут я сделал разметку с помощью отрицательного margin у CardView:

...
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginBottom="-28dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />
    </android.support.design.widget.AppBarLayout>
...

Второй способ. C помощью app:layout_anchor задаю CardView якорь в bottom AppbarLayout и увеличиваю его elevation.

<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"
android:fitsSystemWindows="true"
tools:context="com.example.helloworld.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_marginBottom="28dp"/>

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

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom"
        app:cardElevation="5dp"
    />
</android.support.design.widget.CoordinatorLayout>

Однако в обоих случаях возникает проблема при скроллинге RecyclerView и скрытии содержимого AppBarLayout. На экране остается часть CardView, которая выходит за пределы AppBarLayout(RecyclerView на картинке ниже отключен):

введите сюда описание изображения

Вопросы:

  1. Какой из этих способов лучше? Есть ли лучше? Какие?
  2. Как решить проблему при скроллинге и скрывать все элементы? Обернуть AppBarLayout в еще один layout и уже его скрывать? Или добавить ScroolListener и скрывать CardView вручную?
  3. Второй способ идентичен шаблону ScrollingActivity в Android Studio. Только вместо моего CardView там находится FloatingActionButton, который исчезает при скроллинге(но не сразу). Как реализована данная возможность и как ее прикрутить к CardView?
1
  • Мягко говоря это не соответствует принципам material design, и даже есть отголоски такого использования в Anti-patterns, но дело ваше мне так лично - нравится. Просто проблема очевидна и предсказуема, если вы играете с -margin. Представьте что этот элемент как FAB, при scroll накрутите на него анимацию -scale + invisible и обратно, примерно как у FAb, это то что мне пришло сразу в голову, думаю решений здесь уйма, и ограничения только ваша фантазия. 30 апр 2016 в 7:16

1 ответ 1

1

Я делал так:

  1. AppBarLayout прозрачен.
  2. Под ним ImageView c высотой чуть большей AppBar-a
  3. На AppBarLayout повешен слушатель onOffsetChangeListener, скролящий ImageView из п.2

Если охота копаться в коде, то вот: тык

введите сюда описание изображения

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.