Intereting Posts
Переопределите андроидную аппаратную кнопку назад, заставьте ее выйти на одну страницу и вернуть ее на следующих страницах Android onCreate onResume Cordova + Android – android-windowSoftInputMode adjustPan не работает Путь Android Studio к различным каталогам Набор рингтонов – набор радиокнопок Проблемы с бинарным файлом для Android Настроил список предложений для автозаполнения текста Android получает цвет как строковое значение Android TextView не выбирается в CoordinatorLayout? (TextView не поддерживает выбор текста. Отменен выбор) Проверьте, завершена ли анимация AnimatorSet? ActionBarCompat & Transparency Какое разрешение экрана я должен учитывать при разработке приложения для Android? Значок Android уведомления большой, есть ли способ удалить значок меньшего размера в правом нижнем углу? Установка системных изображений Intel x86 Atom в автономном режиме (вручную) для Android Ссылка на ссылку сброса Firebase не работает

Как использовать 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, что именно то, что я ищу:

Введите описание изображения здесь

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

Введите описание изображения здесь

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

Solutions Collecting From Web of "Как использовать 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="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> 

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

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

(TL; DR: см. Прилагаемый XML)

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

Проблема:

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

Решение:

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

Мой макет 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" /> 

Оказывается, поскольку 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> 

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

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

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

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

Сворачивание панели инструментов с вкладками с использованием новой библиотеки поддержки дизайна материалов с исходным кодом

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

Здесь свернутая высота просмотра – 256dp, а высота вкладок – 56dp

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

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

У меня есть изображение 2000×1246

Top image 256dp = 2000×1024 пиксель

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

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

Введите описание изображения здесь

Использовать этот код 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); 

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

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

 <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 соответствовать размеру вашего экрана, но он работает с моим. Если кто-нибудь лучше ответит, пожалуйста, поделитесь.

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

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

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); 

В приведенном ниже коде реализована панель инструментов Expand / Collapse.

В основном у нас будет
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); 

Я разместил 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> 

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

 <?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> 1 <?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+

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

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

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

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

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

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

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

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

Итак, я добился успеха с помощью FrameLayout.

Но проблема такова: tabLayout.setOnTabSelectedListener (новый 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> 

Создание Tablayout без ViewPager: http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager

Мне удалось получить эту работу, поместив TabLayout во второй CollapsingToolbarLayout с установленным флажком прокрутки для ввода Always Collapsed.

 <android.support.design.widget.AppBarLayout android:id="@+id/event_guide_appbar" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/event_guide_collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginBottom="80dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/event_guide_banner_image" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/darkened_placeholder" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/event_guide_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.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> <android.support.design.widget.TabLayout android:id="@+id/event_guide_tabbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:theme="@style/BaseTheme" app:layout_scrollFlags="scroll|exitUntilCollapsed" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/event_guide_swipe_refresh" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/light_gray" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.meetball.activity.EventGuideActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/event_guide_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.v4.widget.SwipeRefreshLayout> 

Попробуйте поместить Toolbar в CollapsingToolbar с помощью app:layout_collapseMode="pin" и TabLayout снаружи с помощью app:layout_scrollFlags="enterAlways"