it-roy-ru.com

Как использовать TabLayout с панелью инструментов внутри CollapsingToolbarLayout?

Я смотрю на chrisbanes/cheesesquare и пытаюсь поместить TabLayout с панелью инструментов внутри CollapsingToolbarLayout, и вот мой код

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

Это вызывает что-то вроде этого, когда открывается CollapsingToolbar, и это именно то, что я ищу:

enter image description here

Но когда я сворачиваю его (потянув изображение вверх), я получаю что-то вроде этого 

enter image description here

И это из-за причины, по которой я установил высоту панели инструментов на 110 dip, если оставить настройки по умолчанию, вкладки и заголовок панели инструментов перекрываются. Поэтому я ищу правильный способ сделать это так, чтобы заголовок панели инструментов был в нужном месте на панели приложений, а табуляция находилась под ним. Есть ли способ, которым это может быть достигнуто?

37
Todor Grudev

Вот как мне удалось это сделать, я не думаю, что это лучшее решение, хотя, если кто-то найдет лучший способ, пожалуйста, не стесняйтесь опубликовать ответ.

<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

После двух целых дней попыток найти чистое решение для Android, вот мое решение. 

Цель: вкладки под панелью инструментов с фоновым изображением позади обоих видов

(TL; DR: см. XML в приложении)

Поведение, которого я хочу добиться, это иметь CollapsingToolbarLayout и TabLayout поверх изображения, а когда «заголовок» прокручивается вверх (за пределы экрана), то для отображения ActionBar (панель инструментов) с TabLayout под ним. 

Эта проблема:  

Поскольку CollapsingToolbarLayout будет скрывать все дочерние представления при свертывании, кроме представления Toolbar, то TabLayout необходимо поместить вне CollapsingToolbarLayout, но внутри AppBarLayout, чтобы он «закреплен» в верхней части экрана и под панелью инструментов . Теперь проблема в том, что ImageView, размещенный внутри CollapsingToolbarLayout, не будет находиться под TabLayout, а будет располагаться над ним вертикально. 

Решение:  

Чтобы решить эту проблему, нам нужно сделать ImageView выше, чтобы, если бы мы поместили TabLayout внутри CollapsingToolbarLayout, он охватит его. Но поскольку мы поместили TabLayout вне CollapsingToolbarLayout, нам необходимо убедиться, что ImageView отрисовывается, даже если его родительское представление (CollapsingToolbarLayout) короче. clipChildren = "false" К СПАСЕНИ! clipChildren приказывает ViewGroup НЕ обрезать дочернее представление, если они больше его размера, поэтому теперь мы можем сделать ImageView выше, и он все равно будет отрисован в TabLayout. Таким образом, мы можем иметь и CollapsingToolbarLayout, и TabLayout над изображением Nice!

My 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
Alexandros Ioannou

Оказывается, поскольку AppBarLayout расширяет LinearLayout, в нем может быть два CollapsingToolBarLayouts (расширяет FrameLayout). То, что я сделал, было первым CollapsingToolBarLayout, в котором содержалось содержимое, которое я хотел удалить, и присвоил ему флаг AppBarLayout:

приложение: layout_scrollFlags = "свиток | exitUntilCollapsed"

Для второго CollapsingToolbarLayout, у которого действительно есть вкладки, я установил флаги прокрутки:

приложение: layout_scrollFlags = "Спиральные | enterAlways"

Окончательный 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"
    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

Я создал этот образец проект, где я использую TabLayout внутри CollapsingToolbarLayout

Проверено на API 14-23. Работает без проблем.

7
Vito Valov

Я нашел простое решение, чтобы оно работало с прозрачным фоном TabLayout:

  • используйте expandedTitleMarginBottom в CollapsingToolbarLayout, чтобы избежать наложения расширенного заголовка TabLayout
  • установите layout_height в TabLayout как постоянное значение
  • добавить layout_marginBottom в Toolbar с тем же значением, что и 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

Используйте этот код 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 код

  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

сворачивающаяся панель инструментов с вкладками с использованием нового примера библиотеки поддержки проектирования материалов с исходным кодом

Я использовал официальную функцию свертывания панели инструментов новой библиотеки поддержки дизайна материалов.

здесь свернутая высота представления 256dp и высота вкладок 56dp

я сделал следующий путь, я разрезал изображение на две части, одну для свернутого вида и одну для вкладок.

я вырезал изображения в соответствии с размерами dp to pixel с высокой разрешающей способностью xxxhdpi и помещал их в папку для рисования, чтобы их можно было настроить на все размеры экрана

у меня есть изображение 2000x1246

верхнее изображение 256dp = 2000x1024 пикселей

изображение нижней вкладки 56dp = 2000x224 пикселей

Вот полный пример с исходным кодом

 enter image description here

2
nirav kalola

Вот моя идея сделать это.

Я размещаю макет вкладки за пределами панели приложений, оборачиваю его вертикальной линейной компоновкой и устанавливаю позицию следующим образом

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

Если вы не оберните TabLayout еще одним макетом в два раза выше. Когда вы устанавливаете layout_anchor на AppBar, только половина TabLayout будет в AppBar.

Вот весь мой XML-файл.

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

Я не уверен, подойдет ли этот набор значений dp вашему размеру экрана, но он соответствует моему. Если у кого есть лучший ответ, пожалуйста, поделитесь.

Извините, если я сделал ошибку в своем коде или моем английском. Спасибо !!

1
Boonya Kitpitak

У меня была похожая проблема, и мое решение было смехотворно простым. Все, что мне нужно было сделать, это установить панель инструментов в качестве панели действий поддержки (я использую базу в стиле Theme.NoActionBar)

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

Панель инструментов> установите нижнюю границу на 48dp, а layout_height на? 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>

Это работает для меня, но только на устройствах с API 19+ 

0
Lubos Mudrak

Все вышеперечисленные коды сворачивают только компоненты "CollapsingtoolbarLayout". Это означает, что если мы прокручиваем страницу контента ViewPager, он не работает.

Я заменил «ViewPager» на «FrameLayout», теперь он работает, что мы ожидали.

Я ожидаю, как, если прокрутить страницу Viewpager, то "CollapsingToolbarLayout" должен быть прослушан. для этого я использовал «NestedScrollView». Но проблема в том, что ViewPager не работает в NestedScrollView.

Итак, наконец, я достиг с FrameLayout. 

Но проблема в том, что "tabLayout.setOnTabSelectedListener (new TabLayout.OnTabSelectedListener () {" удален

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

Создание табуляции с помощью 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

Приведенный ниже код реализует действие панели инструментов «Развернуть/Свернуть».

В основном у нас будет
CoordinatorLayout (FrameLayout)
AppBarLayout (вертикальный LinearLayout, который реализует многие из особенностей дизайна вещей),
CollapsingToolbarLayout (это оболочка для панели инструментов)
ImageView и панель инструментов

<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

В вашем классе 

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

Как кто-то указывал ранее, похоже, что это потому, что (из документов):

Кнопка навигации вертикально выровнена внутри панели инструментов минимальная высота, если установлена.

Поэтому на основе первоначального макета вы можете сделать что-то вроде этого:

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

Где app: titleMarginTop - это интервал, необходимый для получения размера панели инструментов минус размер TabLayout минус размер текста, и он должен хорошо выравниваться.

0
AllDayAmazing

Я поместил TabLayout вне AppBarLayout и обернул ViewPager и TabLayout вместе в LinearLayout.

<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