Наложение содержимого над AppBarLayout с использованием нового дизайна материалов

Просто добавьте что-то вроде

app:behavior_overlapTop="64dp"

в ваш NestedScrollView, и он будет размещен над развернутой панелью инструментов.

Кроме того, вы должны добавить что-то вроде

app:expandedTitleMarginBottom="70dp"

в ваш CollapsingToolbarLayout, чтобы заголовок не отображался под наложенным содержимым прокрутки.

Это довольно просто, на самом деле. Вы можете добиться этого, используя комбинацию ToolBar, FrameLayout и вашего представления контента (может быть ListView, как ваш первый пример, или что-то еще).

Идея состоит в том, чтобы ваш FrameLayout имел тот же цвет, что и ваш ToolBar, создавая иллюзию того, что ToolBar намного больше, чем он есть на самом деле. Тогда все, что осталось сделать, это сделать ваше представление контента последним (или в API 21 и выше: обладать наивысшим атрибутом elevation), чтобы оно выглядело так, как будто оно парит над вышеупомянутым FrameLayout.

Смотрите мою иллюстрацию ниже:

Теперь, когда вы поняли основную идею, ниже приведен реальный фрагмент кода XML для выполнения такой задачи. (На самом деле я использую этот макет в одном из своих приложений):

<!-- Somewhere in your layout.xml -->

....

    <android.support.v7.widget.Toolbar
        android:id="@+id/tb_toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:contentInsetStart="72dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
    <FrameLayout
        android:id="@+id/v_toolbar_extension"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_below="@+id/tb_toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="2dp"/>

    <!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
    <FrameLayout
        android:id="@+id/ly_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tb_toolbar"
        android:elevation="3dp"/>

....

Обратите внимание, что у моего ly_content значение высоты выше, чем у v_toolbar_extension. Это то, что даст вам желаемый эффект «наложенной панели инструментов».

И последнее, но не менее важное: вы хотели бы добавить эту строку где-нибудь в onCreate() вашей активности:

/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);

Что эти коды сделают, так это установят ToolBar высоту на ноль; удаление предустановленных теней, которые были заданы по умолчанию для панелей инструментов. Если вы этого не сделаете, упомянутая тень создаст «шов» между вашими ToolBar и вашими FrameLayout, тем самым разрушив иллюзию того, что эти двое одинаковы.

p.s.. Также важно, чтобы содержимое отображалось с отступом с каждой стороны. При этом ваш вид контента не будет охватывать всю ширину экрана (что сделает этот эффект бесполезным).

Примечание. Я вижу здесь несколько хороших ответов, в которых упоминалось об отсутствии FrameLayout и вместо этого делалось ToolBar выше. Хотя теоретически это может работать так же хорошо, как предложенное мной решение, у вас могут возникнуть проблемы при попытке манипулировать прокруткой; сделав это, вы не сможете разделить ToolBar и его расширение. Вы будете вынуждены либо сделать Toolbar статическими, либо прокрутить все ToolBar целиком (делает прокрутку немного странной).

Добавьте к этому тот факт, что вы не можете легко назначить пользовательский рисунок в Toolbar. Следовательно, трудно следовать примеру Google Play, который вы привели выше. Хотя, если вы используете мое решение, все, что вам нужно сделать, это просто сделать свой Toolbar прозрачным и вместо этого назначить drawable для FrameLayout.

У меня было аналогичное требование, и я достиг его, как показано ниже.

Ваша тема активности должна расширять Theme.AppCompat.Light.NoActionBar. Я создал XML-файл макета как:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    android:layout_height="@dimen/action_bar_size_x2"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginTop="@dimen/action_bar_size"
    android:orientation="vertical" >

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="@string/app_name"
                android:textSize="24sp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

И Activity должно быть примерно таким:

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
        setSupportActionBar(maintoolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

Я получил такое представление:

Я пытался реализовать такие эффекты, как вы упомянули, которые называются Card Toolbar in Android, и это сработало, как и ожидалось. Вот мой макет, взгляните на него:

<FrameLayout 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:background="@color/background_material_light" >
<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_double_height"
    android:background="?attr/colorPrimary" />
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="@dimen/cardview_toolbar_spacer"
    android:layout_marginRight="@dimen/cardview_toolbar_spacer"
    android:layout_marginTop="?attr/actionBarSize"
    app:cardBackgroundColor="@android:color/white">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:alpha="0.12"
            android:background="@android:color/black" />
    </LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>

Надеюсь, вы будете вдохновлены.