Überlagern von Inhalten über AppBarLayout mit neuem Material Design

Fügen Sie einfach etwas hinzu

app:behavior_overlapTop="64dp"

zu Ihrem NestedScrollView und es wird über der erweiterten Symbolleiste platziert.

Außerdem solltest du etwas hinzufügen

app:expandedTitleMarginBottom="70dp"

zu Ihrem CollapsingToolbarLayout , damit der Titel nicht unter Ihrem überlagerten Scroll-Inhalt angezeigt wird.

Es ist wirklich ganz einfach. Sie können dies erreichen, indem Sie eine Kombination aus ToolBar, FrameLayout und Ihrer Inhaltsansicht verwenden (dies könnte ein ListView wie Ihr erstes Beispiel oder etwas anderes sein).

Die Idee ist, dass Ihr FrameLayout dieselbe Farbe wie Ihr ToolBar besitzt, wodurch die Illusion entsteht, dass ToolBar viel größer ist als es ist. Jetzt müssen Sie nur noch Ihre Inhaltsansicht als letzte (oder in API 21 und darüber: Besitzen Sie das höchste elevation-Attribut) festlegen, so dass es so aussieht, als würde sie über dem oben genannten FrameLayout schweben.

Siehe meine Abbildung unten:

Nun, da Sie die große Idee haben, ist hier ein echtes Live-XML-Snippet für solche Dinge. (Ich verwende dieses Layout tatsächlich in einer meiner Apps):

<!-- 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"/>

....

Beachten Sie, dass mein ly_content einen höheren Höhenwert hat als der von v_toolbar_extension. Auf diese Weise erhalten Sie den gewünschten Effekt "Überlagerte Symbolleiste".

Zu guter Letzt möchten Sie diese Zeile irgendwo in die onCreate() Ihrer Aktivität einfügen:

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

Dieser Code muss die ToolBar-Höhe auf Null setzen. Entfernen von voreingestellten Schatten, die ToolBars standardmäßig zugewiesen wurden. Wenn Sie dies nicht tun, wird der besagte Schatten eine "Naht" zwischen Ihrem ToolBar und Ihrem FrameLayout erzeugen, wodurch die Illusion zerstört wird, dass diese beiden gleich sind.

p.s. , Es ist auch wichtig, dass Sie Ihrer Inhaltsansicht auf jeder Seite eine Auffüllung geben. Auf diese Weise deckt Ihre Inhaltsansicht nicht die gesamte Bildschirmbreite ab (dies würde diesen Effekt unbrauchbar machen).

Hinweis: Ich sehe hier einige gute Antworten, die das Fehlen von FrameLayout erwähnen und stattdessen die ToolBar größer machen. Theoretisch funktioniert es zwar genauso gut wie meine vorgeschlagene Lösung, Sie haben jedoch möglicherweise Probleme, wenn Sie versuchen, den Bildlauf zu ändern. Auf diese Weise können Sie ToolBar und die Erweiterung nicht trennen. Sie werden entweder gezwungen sein, Toolbar statisch zu machen oder alle ToolBar-Elemente insgesamt zu scrollen (macht das Scrollen ein bisschen komisch).

Hinzu kommt die Tatsache, dass Sie eine benutzerdefinierte Zeichenfläche nicht ohne weiteres in eine Toolbar einordnen können. Daher ist es schwierig, dem oben genannten Beispiel für Google Play zu folgen. Wenn Sie meine Lösung verwenden, müssen Sie lediglich Toolbar transparent machen und stattdessen FrameLayout das Zeichen zeichnen.

Ich hatte eine ähnliche Anforderung und habe sie wie folgt erreicht.

Ihr Aktivitätsdesign sollte Theme.AppCompat.Light.NoActionBar..__ erweitern. Ich habe eine Layout-XML-Datei erstellt als

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

Und die Aktivität sollte so aussehen:

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

Ich habe eine Ansicht wie diese:

Ich habe versucht, die von Ihnen genannten Effekte mit dem Namen Card Toolbar in Android zu implementieren. Hier ist mein Layout, schau es dir an:

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

Ich hoffe, Sie werden begeistert sein.