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

Ответ 1

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

app:behavior_overlapTop="64dp"

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

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

app:expandedTitleMarginBottom="70dp"

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

Ответ 2

Это довольно просто, на самом деле. Вы могли бы достичь этого, используя комбинацию 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; удаление предустановленных теней, которые были заданы по умолчанию для ToolBars. Если вы этого не сделаете, тень создаст "шов" между вашим ToolBar и вашим FrameLayout, тем самым нарушив иллюзию того, что эти два являются одинаковыми.

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

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

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

Ответ 3

Я попытался реализовать такие эффекты, как вы сказали, которые называются 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>

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

Ответ 4

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

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

<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>

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

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);
    }
}

У меня было такое мнение: