wake-up-neo.net

Wie verwende ich ein TabLayout mit der Toolbar in CollapsingToolbarLayout?

Ich schaue mir das chrisbanes/cheesesquare an und versuche TabLayout mit einer Toolbar in ein CollapsingToolbarLayout zu packen, und hier ist mein Code

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/primary_dark"
            Android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="110dip"
                Android:layout_gravity="top"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"/>

        </Android.support.design.widget.CollapsingToolbarLayout>

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

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

Wenn die CollapsingToolbar geöffnet wird, ist dies etwas, was genau das ist, was ich suche:

enter image description here

Aber wenn ich es zusammenbringe (indem ich das Bild hochziehe), bekomme ich so etwas 

enter image description here

Dies liegt an dem Grund, warum ich die Symbolleiste auf eine Höhe von 110 Dip eingestellt habe, wenn ich die Standardeinstellungen der Tabs und den Titelleisten der Symbolleiste überlasse. Ich suche also nach dem richtigen Weg, damit der Titel der Toolbar an der richtigen Stelle in der Appbar erscheint und das Tablayout darunter ist. Gibt es einen Weg, wie dies erreicht werden kann?

37
Todor Grudev

So habe ich es geschafft, ich glaube nicht, dass dies die beste Lösung ist. Wenn jemand einen besseren Weg findet, zögern Sie nicht, die Antwort zu posten.

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="206dip"
            Android:background="@color/primary_dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            Android:gravity="bottom"/>
    </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>
21
Todor Grudev

Nach 2 ganzen Tagen des Versuches, eine reine Android-Lösung zu finden, ist hier meine Lösung. 

Ziel: Registerkarten unter der Symbolleiste mit Bildhintergrund hinter beiden Ansichten

(TL; DR: Siehe beigefügte XML)

Das Verhalten, das ich erreichen möchte, ist, dass CollapsingToolbarLayout und TabLayout oben in einem Bild angezeigt werden. Wenn der "Header" nach oben (aus dem Bildschirm) gescrollt wird, zeigt er die ActionBar (Symbolleiste) an. mit dem TabLayout darunter. 

Das Problem:  

Da CollapsingToolbarLayout alle untergeordneten Ansichten mit Ausnahme der Ansicht Toolbar verbirgt, muss TabLayout außerhalb von CollapsingToolbarLayout, jedoch innerhalb von AppBarLayout platziert werden Es ist am oberen Bildschirmrand und unter der Toolbar "angedockt". Das Problem ist jetzt, dass die in der CollapsingToolbarLayout platzierte ImageView sich nicht unter der TabLayout befindet, sondern vertikal darüber. 

Die Lösung:  

Um dieses Problem zu lösen, müssen Sie ImageView vergrößern, damit wir das TabLayout innerhalb des CollapsingToolbarLayout platzieren können. Da wir jedoch TabLayout außerhalb von CollapsingToolbarLayout platziert haben, müssen Sie sicherstellen, dass ImageView gezeichnet wird, auch wenn die übergeordnete Ansicht (CollapsingToolbarLayout) kürzer ist. clipChildren = "false" ZUR RESCUE! clipChildren weist eine ViewGroup an, die untergeordnete Ansicht NICHT zu beschneiden, wenn sie größer als ihre Größe ist. Jetzt können wir ImageView jetzt größer machen und es wird immer noch unter TabLayout gezeichnet. Auf diese Weise können wir sowohl das CollapsingToolbarLayout als auch das TabLayout über einem Nice-Bild haben!

Mein Layout xml:

<?xml version="1.0" encoding="utf-8"?>

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:clipChildren="false" /////IMPORTANT!!!!!!
    Android:theme="@style/AppTheme.AppBarOverlay">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/toolbar_layout"
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:clipChildren="false"  /////IMPORTANT!!!!!!
        Android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

        <ImageView
            Android:layout_width="match_parent"
            Android:layout_height="200dp"
            Android:scaleType="centerCrop"
            Android:src="@drawable/poster"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </Android.support.design.widget.CollapsingToolbarLayout>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/main_tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabMode="scrollable" />
</Android.support.design.widget.AppBarLayout>


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

21

Es stellt sich heraus, dass Sie, da AppBarLayout LinearLayout erweitert, zwei CollapsingToolBarLayouts (erweitert FrameLayout) enthalten können. Was ich tat, war das erste CollapsingToolBarLayout-Haus, dessen Inhalte ich verschwinden wollte, und ihm die AppBarLayout-Flagge gegeben:

app: layout_scrollFlags = "scroll | exitUntilCollapsed"

Für das zweite CollapsingToolbarLayout, das tatsächlich über die Registerkarten verfügte, habe ich die Scroll-Flags auf Folgendes gesetzt:

app: layout_scrollFlags = "scroll | enterAlways"

Das endgültige XML sieht so aus und es gibt mir, was ich will.

    <?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/pager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="@dimen/quadruple_margin"
            app:layout_collapseParallaxMultiplier="0.7"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                Android:id="@+id/header_view"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:animateLayoutChanges="true"
                Android:background="@color/black_40">

                <!-- YOUR CONTENT HERE -->

            </RelativeLayout>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/action_bar"
                Android:layout_width="match_parent"
                Android:layout_height="@dimen/abc_action_bar_default_height_material"
                app:contentInsetLeft="@dimen/triple_margin"
                app:contentInsetStart="@dimen/triple_margin"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.AppCompat.NoActionBar"
                app:theme="@style/Theme.AppCompat.NoActionBar" />
        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="48dp"
                Android:layout_gravity="bottom"
                Android:layout_marginTop="@dimen/half_margin"
                app:layout_scrollFlags="enterAlways"
                app:tabBackground="@color/transparent"
                app:tabGravity="center"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/white"
                app:tabTextColor="@color/grey_400" />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>
14
Tunji_D

Ich habe dieses sample - Projekt erstellt, bei dem ich TabLayout in CollapsingToolbarLayout verwende

Getestet auf API 14-23. Funktioniert ohne Probleme.

7
Vito Valov

Ich habe eine einfache Lösung gefunden, damit es mit transparentem TabLayout Hintergrund funktioniert:

  • verwenden Sie expandedTitleMarginBottom in CollapsingToolbarLayout, um zu vermeiden, dass der erweiterte Titel überlappt. TabLayout
  • setzen Sie layout_height auf TabLayout als konstanten Wert
  • addiere layout_marginBottom zu Toolbar mit demselben Wert wie TabLayoutlayout_height
<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:expandedTitleMarginBottom="70dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <YourMagicViewWithBackgroundImageTextAndOtherStuff
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="50dp"
            app:layout_collapseMode="pin" />

        <Android.support.design.widget.TabLayout
            Android:layout_width="match_parent"
            Android:layout_height="50dp"
            Android:layout_gravity="bottom" />

    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
5
sosite

Diesen Code verwenden XML

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapse_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="250dp"
        Android:fitsSystemWindows="true"
        app:contentScrim="@color/PrimaryColor"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            Android:id="@+id/img"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/background_material"
            Android:fitsSystemWindows="true"
            Android:scaleType="fitXY"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:gravity="top"
            Android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleMarginTop="15dp"/>



        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabsInLogin"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_gravity="bottom"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="@Android:color/white" />

    </Android.support.design.widget.CollapsingToolbarLayout>

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

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpagerDetail"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Java-Code

  collapsingToolbarLayout =    (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar);
    collapsingToolbarLayout.setTitleEnabled(false);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(cheeseName);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
2
Ramesh Singh

minimieren der Symbolleiste mit Registerkarten, die ein Beispiel für eine Bibliothek zur Materialdesign-Unterstützung mit Quellcode verwenden

Ich habe die Funktion zum Minimieren von Symbolleisten der neuen Bibliothek zur Materialdesignunterstützung verwendet.

hier ist die reduzierte Ansichtshöhe 256 dB und die Höhe der Registerkarten 56 dB

ich machte folgenden Pfad, ich schneide das Bild in zwei Teile, einen für die reduzierte Ansicht und einen für die Registerkarten.

ich habe Bilder nach dp in Pixel Größen mit hochauflösendem Draw xxxhdpi geschnitten und in einen Draw-Ordner gelegt, damit er an alle Bildschirmgrößen angepasst werden kann

ich habe ein 2000x1246 Bild

oberes Bild 256dp = 2000x1024 Pixel

unteres Registerbild 56dp = 2000x224 Pixel

Hier ist das vollständige Beispiel mit Quellcode

 enter image description here

2
nirav kalola

Hier ist meine Idee, dies zu tun.

Ich platziere das Tabulator-Layout außerhalb der App-Leiste und wickle es mit vertikalem linearem Layout ein

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    Android:orientation="vertical">

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabDetail"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

Wenn Sie TabLayout nicht mit einem anderen Layout mit doppelter Höhe umschließen. Wenn Sie layout_anchor auf AppBar setzen, befindet sich nur die Hälfte von TabLayout in AppBar.

Hier ist meine ganze XML-Datei.

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpagerDetail"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/detail_backdrop_height"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginBottom="54dp">

        <ImageView
            Android:id="@+id/backdrop"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </Android.support.design.widget.CollapsingToolbarLayout>

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

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    Android:orientation="vertical">

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabDetail"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

Ich bin mir nicht sicher, ob dieser Wert für dp zu Ihrer Bildschirmgröße passt, aber bei mir. Wenn jemand eine bessere Antwort hat, bitte teilen.

Es tut mir leid, wenn ich einen Fehler in meinem Code oder in meinem Englisch mache. Danke !!

1
Boonya Kitpitak

Ich hatte ein ähnliches Problem und meine Lösung war lächerlich einfach. Alles, was ich tun musste, war, die Symbolleiste als Unterstützungsaktionsleiste festzulegen (ich benutze eine Theme.NoActionBar-Stilbasis)

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
1
Trouble Zero

Toolbar> setze den unteren Rand auf 48dp und layout_height auf attr/actionBarSize

<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/detail_backdrop_height"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/primary_dark"
        Android:minHeight="150dip"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginBottom="60dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            Android:id="@+id/backdrop"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_gravity="top"
            Android:layout_marginBottom="38dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom"/>

    </Android.support.design.widget.CollapsingToolbarLayout>

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

0
Chew Kok
<?xml version="1.0" encoding="utf-8"?>
<ui.screen.ProfileView
    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.support.design.widget.CoordinatorLayout
        Android:id="@+id/content"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <Android.support.v4.view.ViewPager
            Android:id="@+id/profile_viewpager"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <Android.support.design.widget.AppBarLayout
            Android:id="@+id/profile_appbar_layout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@Android:color/transparent"
            app:elevation="2dp">

            <Android.support.design.widget.CollapsingToolbarLayout
                Android:id="@+id/collapsing_toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:expandedTitleTextAppearance="@Android:color/transparent"
                app:elevation="2dp">

                <LinearLayout
                    Android:id="@+id/profile_user_layout"
                    Android:layout_width="match_parent"
                    Android:layout_height="192dp"
                    Android:background="?attr/colorPrimary"
                    Android:clipChildren="false"
                    Android:clipToPadding="false"
                    Android:orientation="vertical"
                    Android:paddingBottom="24dp"
                    Android:paddingLeft="24dp"
                    Android:paddingRight="24dp"
                    Android:paddingTop="64dp"
                    app:layout_collapseMode="parallax">

                    <LinearLayout
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:clipChildren="false"
                        Android:orientation="horizontal">

                        <FrameLayout
                            Android:layout_width="96dp"
                            Android:layout_height="96dp"
                            Android:clipChildren="false">

                            <de.hdodenhof.circleimageview.CircleImageView
                                Android:id="@+id/profile_user_photo"
                                Android:layout_width="86dp"
                                Android:layout_height="86dp"
                                Android:src="@mipmap/ic_launcher"
                                app:border_width="1dp"
                                app:border_color="@color/white" />

                            <View
                                Android:id="@+id/profile_user_medal"
                                Android:layout_width="24dp"
                                Android:layout_height="24dp"
                                Android:background="@drawable/medal"
                                Android:layout_marginRight="6dp"
                                Android:layout_marginTop="2dp"
                                Android:layout_gravity="top|right" />

                        </FrameLayout>

                        <LinearLayout
                            Android:id="@+id/profile_user_details"
                            Android:layout_width="wrap_content"
                            Android:layout_height="wrap_content"
                            Android:layout_weight="1"
                            Android:orientation="vertical"
                            Android:layout_marginLeft="16dp">

                            <TextView
                                Android:id="@+id/profile_user_name"
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:text="Kateřina Bíla"
                                Android:textColor="@color/white"
                                Android:textSize="24sp" />

                            <TextView
                                Android:id="@+id/profile_user_completed_activities"
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:text="Dokoncene 4 z 5"
                                Android:textColor="@color/white"
                                Android:textSize="16sp" />

                            <LinearLayout
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:orientation="horizontal">

                                <TextView
                                    Android:id="@+id/profile_user_progress_text"
                                    Android:layout_width="wrap_content"
                                    Android:layout_height="wrap_content"
                                    Android:textSize="20sp"
                                    Android:textColor="@color/white"
                                    Android:text="50%" />

                                <com.rey.material.widget.ProgressView
                                    Android:id="@+id/profile_user_progress_bar"
                                    Android:layout_width="match_parent"
                                    Android:layout_height="6dp"
                                    Android:visibility="visible"
                                    Android:layout_gravity="center_vertical"
                                    Android:layout_marginLeft="8dp"
                                    Android:paddingRight="16dp"
                                    app:pv_progressMode="determinate"
                                    app:pv_circular="false"
                                    app:pv_autostart="true"
                                    app:lpd_strokeSize="3dp"
                                    app:lpd_strokeColor="@color/red"
                                    app:lpd_strokeSecondaryColor="@color/white"
                                    app:lpd_maxLineWidth="62dp"
                                    app:lpd_minLineWidth="31dp"
                                    app:pv_progressStyle="@style/ProfileTotalProgressBar"
                                    app:pv_progress="0.5" />


                            </LinearLayout>


                        </LinearLayout>
                    </LinearLayout>


                </LinearLayout>

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

            </Android.support.design.widget.CollapsingToolbarLayout>

            <FrameLayout
                Android:layout_width="match_parent"
                Android:layout_height="48dp"
                app:elevation="2dp">

                <Android.support.design.widget.TabLayout
                    Android:id="@+id/profile_tab_layout"
                    Android:layout_width="match_parent"
                    Android:layout_height="48dp"
                    Android:layout_gravity="top"
                    Android:background="?attr/colorPrimary"
                    app:tabTextColor="@color/white_87"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="@color/white"
                    app:tabIndicatorHeight="4dp"
                    app:tabMode="fixed"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextAppearance="@style/TabTextAppearance"
                    app:elevation="2dp" />

            </FrameLayout>

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

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

</ui.screen.ProfileView>

Das funktioniert bei mir aber nur auf Geräten mit API 19+ 

0
Lubos Mudrak

Alle oben genannten Codes reduzieren nur die "CollapsingtoolbarLayout" -Komponenten. Das heißt, wenn wir die Seite mit "ViewPager" -Inhalten scrollen, funktioniert es nicht.

Ich ersetze den "ViewPager" durch "FrameLayout", jetzt funktioniert es, was wir erwarten.

Ich erwarte gerne, wenn durch die Seite von Viewpager geblättert wird, sollte "CollapsingToolbarLayout" zu hören sein. Dafür habe ich die "NestedScrollView" verwendet. Problem ist jedoch, dass "ViewPager" in "NestedScrollView" nicht funktioniert.

So endlich habe ich mit FrameLayout erreicht. 

Das Problem ist jedoch "tabLayout.setOnTabSelectedListener (new TabLayout.OnTabSelectedListener () {" ist depricated)

<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.support.v4.view.ViewPager
        Android:id="@+id/viewPager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="250dp"
        Android:fitsSystemWindows="true"
        >

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                Android:visibility="gone"
                Android:src="@drawable/srl_mallikaarjuna_lrg"
                app:layout_collapseMode="parallax"

                />


            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                >
                <RelativeLayout
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent">
                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:gravity="center_horizontal|center_vertical"
                        Android:text="Calendar"/>
                </RelativeLayout>

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

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tab_layout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"
              >

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

        </Android.support.design.widget.CollapsingToolbarLayout>

    </Android.support.design.widget.AppBarLayout>
    <Android.support.v4.widget.NestedScrollView

    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="#fefefe"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

  <FrameLayout
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      Android:id="@+id/frame_container">

  </FrameLayout>

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


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

Erstellen des Tablayouts ohne ViewPager: http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-Android-without-viewpager

0
Kona Suresh

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

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        Android:minHeight="?attr/actionBarSize" >

        <include layout="@layout/YOUR-CONTENT-LAYOUT" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            Android:fitsSystemWindows="false"
            app:contentScrim="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>

<LinearLayout
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    Android:orientation="vertical" >

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="48dp"
        app:layout_scrollFlags="scroll"
        Android:background="@color/primary_color" />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent" />
</LinearLayout>

0
Hemanth

Der folgende Code implementiert die Aktion Werkzeugleiste Erweitern/Reduzieren.

Grundsätzlich haben wir eine
CoordinatorLayout (FrameLayout)
AppBarLayout (vertikales LinearLayout, das viele der Funktionen von Materialdesigns implementiert),
CollapsingToolbarLayout (ist ein Wrapper für die Toolbar)
ImageView und Symbolleiste

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            Android:id="@+id/header"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/logo"
            Android:minHeight="300dp"
            Android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />


    </Android.support.design.widget.CollapsingToolbarLayout>


<Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            Android:gravity="bottom"/>

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


    <FrameLayout
        Android:id="@+id/fr_container_home"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout

In deiner Klasse 

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);
0
vrbsm

Wie bereits erwähnt, sieht es so aus (aus den Dokumenten):

Die Navigationsschaltfläche ist vertikal im .__ der Symbolleiste ausgerichtet. Mindesthöhe, falls eingestellt.

Basierend auf dem ursprünglichen Layout können Sie also Folgendes tun:

<Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/primary_dark"
            Android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

             <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_height="?actionBarSize"
                Android:layout_gravity="bottom"/>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="110dip"
                Android:layout_gravity="top"
                app:titleMarginTop="13dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </Android.support.design.widget.CollapsingToolbarLayout>

Dabei ist app: titleMarginTop der Abstand, der benötigt wird, um die Toolbar-Größe minus TabLayout-Größe abzüglich der Textgröße zu erhalten, und es sollte sich gut ausrichten.

0
AllDayAmazing

Ich habe das TabLayout außerhalb des AppBarLayout platziert und den ViewPager und das TabLayout in einem LinearLayout zusammengefasst.

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="210dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:background="@color/profile_header_bg_color"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        Android:background="@color/profile_header_bg_color">

        <ImageView
            Android:layout_width="match_parent"
            Android:paddingTop="60dp"
            Android:layout_height="210dp"
            Android:background="@color/profile_header_bg_color"
            Android:id="@+id/user_details"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Light"
            Android:background="@color/profile_header_bg_color"
            app:layout_collapseMode="pin"/>

    </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/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="fill_parent" />
</LinearLayout>

0
user1942887