Collapsing toolbar android example

Collapsing Toolbar in Android using androidx Jetpack

May 18, 2020 · 3 min read

Androidx is a major upgrade to previously used support libraries, providing backward compatibility across Android versions. In this tutorial, we will use latest androidx jetpack along with material design libraries for captioned UI view.

App bars can be customised to accommodate image, toolbar and can react to different scrolling effects like elements sliding through in and out of view. This is made possible by using Coordinator Layout as parent container, in junction with App bar and CollapsingBar layouts.

CoordinatorLayout allo w s communication between its child views. Here, Collapsing toolbar can be considered as wrapper toolbar for adding additional features. For this to happen, it should be used as child of Appbar and appbar layout has to be a part of CoordinatorLayout, to make the functionality work.

In the picture above, Toolbar and ImageView are encapsulated inside CollapsingToolbar to help customising Toolbar, i.e apply UI behavioural and positional change.

Lets begin with a basic example.

Setup

Add following dependencies in gradle.build file to use aforementioned layouts.

Style.xml

Ensure MaterialComponents based theme is included in style.xml. I have included . NoActionBar since we’ll be explicitly including it activity layout.

I have additionally added background and text colour in colors.xml to give a different look across app. This is optional.

XML Layout

Lets run through our layout example ahead of explanation

app:layout_scrollFlags: To make the toolbar react to the scroll events, it is typically set to “scroll|exitUntilCollapsed”. Other values- expandAlwaysCollapsed,expandAlway,snap,exitUntilCollapsed

app:collapsedTitleGravity: Specifies the gravity of title in the container when collapsed.

app:contentScrim: Specifies drawable or Color value when scrolled sufficiently off screen

app:layout_collapseMode: Specifies how child views of collapsing toolbar layout move when layout is moving. Parallax- moves in parallax fashion, Pin-view placed in fixed position

content_scrolling.xml will have Textview to be displayed below toolbar while scrolling.

Activity

Import below libraries

In addition to existing code, add below snippet inside onCreate() method

Instance of toolbar view is passed as parameter to setSupportActionBar() method to enable toolbar view.

setTitle() and setContentScrimColor() on collapsing layout manager instance changes color and scrim color respectively upon scrolling (Note: Scrim color may also be set within layout resource file).

Источник

Как декларативно описать коллапсирующий тулбар

Хочу представить решение того, как можно описать CollapsingToolbar, с акцентом на читаемости кода. В статье не будет объясняться, что такое и как написать свой CoordinatorLayout.Behavior. Если читателю интересно в этом разобраться, есть много статей, в том числе на хабре. Если разбираться не хочется — ничего страшного: я постарался вынести написание CollapsingToolbar так, чтобы можно было абстрагироваться от CoordinatorLayout.Behavior и OnOffsetChangedListener.

Термины

Зачем понадобилось писать свое решение

Я просмотрел несколько подходов в «интернетах», и практически все были построены следующим образом:

1. Задается фиксированная высота для AppBarLayout.
2. Пишется CoordinatorLayout.Behavior, в котором какими-то вычислениями (закешированная высота view складывается с bottom другого view и за вычетом margin умножается на проскролл, вычисленный здесь же) меняют какую-то вью.
3. Другие вью меняют в OnOffsetChangedListener AppBarLayout-а.

Вот пример Behavior с описанным подходом, 2.5к звезд на Гитхабе.

Поправить верстку для этого решения можно, но меня смущает другое. Некоторые вью управляются через OnOffsetChangedListener, некоторые — через Behavior, что-то работает из коробки. Разработчику, чтобы понять всю картину, придется пробежаться по множеству классов, и если для новой вью придется добавить поведение, которое зависит от других Behavior-ов и от вью, которые изменяются в OnOffsetChangedListener, могут вырасти костыли и баги на ровном месте

Кроме того, в данном примере не показано, как быть, если в тулбар будут добавляться дополнительные элементы, которые влияют на высоту этого тулабара.

В гифке в начале статьи видно, как по нажатию на кнопку скрывается TextView — и NestedScroll подтягивается выше, чтобы не возникало пустого пространства).

Как это сделать? Решения, которые первыми приходят на ум, — написать еще один CoordinatorLayout.Behavior для NestedScroll (сохранив логику базового AppBarLayout.Behavior) или засунуть тулбар в AppBarLayout и менять его на OnOffsetChangedListener. Я пробовал оба решения, и получался завязанный на детали реализации код, с которым довольно сложно будет разобраться кому-то другому и нельзя будет переиспользовать.

Буду рад, если кто-то поделится примером, где такая логика реализована «чисто», а пока покажу свое решение. Идея в том, чтобы иметь возможность декларативно описать в одном месте, какие вьюхи и как должны себя вести.

Как выглядит апи

Итак, для создания CoordinatorLayout.Behavior нужно:

• унаследовать BehaviorByRules;
• переопределить методы, возвращающие AppBarLayout, CollapsingToolbarLayout и длину скролла (высоту AppBarLayout).
• переопределить метод setUpViews — описать правила, как вью будет себя вести при измененнии проскролла аппБара.

TopInfoBehavior для тулбара из гифки в начале статьи будет выглядеть так (далее в статье объясню, как это работает):

Как это работает

Задача сводится к написанию правил:

Тут все ясно — приходит float-значение от 0 до 1, отражающее процент проскролла ActionBar, приходит вью и ее первоначальный стейт. Интереснее выглядит BaseBehaviorRule — правило, от которого наследуются другие базовые правила.

Для базовых правил определяется размах значений (min, max) и interpolator. Этого хватит для того, чтобы описать практически любое поведение.

Допустим, мы хотим задать альфу для нашего вью в диапазоне 0.5 до 0.9. Также мы хотим, чтобы вначале скролла вью быстро становилась прозрачной, а затем скорость изменений падала.
Правило будет выглядеть так:

А вот реализация BRuleAlpha:

И, наконец, код BehaviorByRules. Для тех, кто писал свой Behavior, все должно быть очевидно (кроме того, что внутри onMeasureChild, об этом расскажу ниже):

Так что там с onMeasureChild?

Это нужно для решения проблемы, о которой писал выше: если какая-то часть тулбара исчезает, NestedScroll должен подъехать выше. Чтобы он подъехал выше, нужно уменьшить высоту CollapsingToolbarLayout.

Есть еще один неочевидный метод — canUpdateHeight. Он нужен, чтобы можно было разрешить наследнику задать правило, когда нельзя менять высоту. Например, если view, от которого зависит высота, в данный момент скрыта. Не уверен, что это покроет все кейсы, но если у кого есть идеи, как сделать лучше, — отпишите, пожалуйста, в комментарии или в личку.

Источник

Android CollapsingToolbarLayout — Material Design Tutorial -2

In this tutorial, we will learn to create a collapsing toolbar layout that was introduced with Design Support library . Before starting anything, let’s check for the new layouts that were introduced with design library :

This is a super powered FrameLayout. We can specify behaviours for child views of coordinatorlayout for various interections.

AppBarLayout should be used as a direct child of coordinatorLayout. Basically, it is a vertical Linear Layout , children of which can manage the behaviour when the content is scrolled. setScrollFlags(int) or app:layout_scrollFlags is used to provide their children their desired scrolling behavior.

This layout is a wrapper for toolbar which implements a collapsing app bar . It is used as a direct child of AppBarLayout.

CollapsingToolbarLayout has the following features :

A Title that is larger when the layout is fully visible and becomes smaller when the layout is scrolled off the screen. setTitle(CharSequence)can be used to set the title .collapsedTextAppearance and expandedTextAppearance attributes are used to change the title appearance.

A full-bleed scrim that will be shown or hidden when the scroll position has hit a certain threshold.We can change it using setContentScrim(Drawable).

Status bar scrim:

A scrim that will be shown or hidden behind the status bar when the scroll position hits a threshold value. setStatusBarScrim(Drawable) can be used to change this. This will work only on lollipop devices.

1. Create a project on Android Studio with an Activity “ScrollingActivity” and its corresponding layout “activity_scrolling.xml” .

You can see in the activity_scrolling.xml file that CoordinatorLayout is the base layout and AppbarLayout is working as parent layout of CollapsingToolbarLayout.

Also we are using the palette library to change the Content Scrim and StatusBar Scrim color of the collapsing toolbar layout in the ScrollingActivity :

That’s it. Cone this project from github hereand try to run it . If you have any query or if you are having any problem running this project, please comment below.

Источник

Android CollapsingToolbarLayout Example

Android Tutorial

Welcome to Android CollapsingToolbarLayout Example. In this tutorial, we’ll discuss and implement CollapsingToolBarLayout in our application.

Android CollapsingToolbarLayout

Android CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. This type of layout is commonly seen in the Profile Screen of the Whatsapp Application.
This layout consists of:

• Collapsing Title: The title is larger when the layout is expanded. The text size becomes smaller as the layout is collapsed and scrolled off the screen.
• app:layout_scrollFlags: The scroll flags of this layout is typically set to “scroll|exitUntilCollapsed”.
• app:collapsedTitleGravity: Specifies the gravity of title in the container when collapsed.
• app:contentScrim: This requires specifying a drawable or color value of the CollapsingToolbarLayouts content when it has been scrolled sufficiently off screen eg. ?attr/colorPrimary.
• app:scrimAnimationDuration: Specifies the duration used for scrim visibility animations. This requires an integer value such as “100”.

If you’ve updated to the latest SDK recently choose the Scrolling Activity type (it contains a ready-made implementation of CollapsingToolbarLayout) while creating a new project.

Running the default new project should show an output like this:

In this tutorial, we’ll be doing changes in the default project such as showing an ImageView, showing the toolbar equivalent icon from the FAB button, when it’s collapsed.

Android CollapsingToolbarLayout Example Project Structure

Android CollapsingToolbarLayout Code

The activity_scrolling.xml is given below:

app:layout_anchor and app:layout_anchorGravity anchors the FAB to the bottom right of the AppBarLayout

Note: content_scrolling.xml stays as the default for this tutorial.

The menu_scrolling.xml file is defined as given below

The code for ScrollingActivity.java is defined below:

In the above code, to know whether the CollapsingToolbarLayout is collapsed or expanded, we add a listener addOnOffsetChangedListener on the AppBarLayout instance. Depending upon the if else conditions we show or hide the toolbar info option.

The output of the application in action is given below

This brings an end to this tutorial. You can download the Android CollapsingToolbarLayout Project from the link given below.

Источник

Русские Блоги

Обучение AppBarLayout и CollapsingToolbarLayout от MaterialDesign

1. Краткое введение

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

Два, используйте

1、CoordinatorLayout

Прежде чем использовать AppBarLayout и CollapsingToolbarLayout, давайте сначала поговорим об этом CoordinatorLayout. CoordinatorLayout буквально переводится как «координирующий макет». Как следует из названия, он используется для координации вложенных макетов и элементов управления. Чтобы использовать его, вы должны установить его как корень всего макета. В то же время установите для свойства app: appbar_scrolling_view_behavior значение «специальный дочерний элемент управления» Значение для координации позиции отображения дочернего элемента управления во всем макете. Эта статья не будет подробно объяснять это, нам нужно только знать, что для использования AppbarLayout для «улучшения» Toolbar вам необходимо использовать CoordinatorLayout. Пример кода для использования CoordinatorLayout:

Из приведенного выше кода мы можем узнать, что для элемента управления NestedScrollView установлено только свойство app: appbar_scrolling_view_behavior. Да, NestedScrollView является упомянутым выше «специальным дочерним элементом управления». Существует 3 таких «специальных дочерних элемента управления», соответственно. Использование RecyclerView, ViewPager и NestedScrollView в основном одинаково, а свойство app: appbar_scrolling_view_behavior действительно только для этих трех «специальных дочерних элементов управления». Для этого NestedScrollView вы можете рассматривать его как расширенную версию ScrollView. Что ж, давайте представим главного героя этой статьи.

2、AppBarLayout

Ниже приводится описание AppBarLayout в официальном документе:

AppBarLayout — это вертикальный LinearLayout, который реализует функцию жестов прокрутки панели приложения в Material Design. Дочерний View AppBarLayout должен объявлять желаемое «поведение при прокрутке», которое может быть определено свойством layout_scrollFlags или методом setScrollFlags ().
AppBarLayout работает только как прямой дочерний View для CoordinatorLayout.
Чтобы AppBarLayout знал, когда прокручивать дочерние представления, мы также должны предоставить прокручиваемый вид в макете CoordinatorLayout, который мы называем прокручиваемым представлением. Связь между представлением с прокруткой и AppBarLayout устанавливается путем установки для Behavior представления с прокруткой значения AppBarLayout.ScrollingViewBehavior.

В сочетании с кодом, опубликованным в разделе CoordinatorLayout выше, вторую половину этого описания нетрудно понять, и более сложным для понимания должен быть атрибут layout_scrollFlags. Прокручиваемый вид в описании — это упомянутый выше «специальный дочерний элемент управления». Имейте в виду, что в описании говорится, что свойство layout_scrollFlags установлено для прямых дочерних элементов управления AppbarLayout. Давайте посмотрим, какие свойства ayout_scrollFlags доступны:

Значение атрибута scrollFlags

эффект

scroll

Пусть AppBarLayout и представление прокрутки будут интегрированы, когда прокручиваемое представление прокручивается, AppBarLayout также прокручивается вместе с ним. Это обязательное значение для «расширенной» панели инструментов, и его можно использовать с другими значениями для достижения различных «расширенных» эффектов. При использовании только прокрутки эффект аналогичен добавлению HeaderView в ListView.

scroll

Значение атрибута scrollFlags	эффект
scroll | enterAlways	Когда прокручиваемое представление прокручивается вверх, AppBarLayout также выкатывается за пределы экрана.После прокрутки представления прокручивается вниз, AppBarLayout также перемещается на экран.

enterAlways

Значение атрибута scrollFlags

эффект

scroll | enterAlways | enterAlwaysCollapsed

Когда прокручиваемый вид прокручивается вверх, AppBarLayout также выкатывается за пределы экрана. Когда прокручиваемый вид прокручивается вниз, AppBarLayout сначала медленно прокручивается до свернутой высоты (т. Е. Минимальной высоты), пока прокручиваемый вид не прокручивается вверх, AppBarLayout затем Сначала медленно прокрутите до исходной высоты (в это время вид прокрутки также снова будет прокручиваться вместе с AppBarLayout).

enterAlwaysCollapsed

Значение атрибута scrollFlags

эффект

scroll | exitUntilCollapsed

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

exitUntilCollapsed

Значение атрибута scrollFlags

эффект

scroll | snap

Snap имеет значение спешки, и эффект такой же, как и означает. Когда прокручиваемое представление находится в состоянии, когда оно больше не может прокручиваться вниз (то есть достигло вершины), прокрутите прокручиваемое представление вверх в это время, и AppBarLayout сразу же развернется с экрана, или Прокрутите страницу прокрутки вниз, AppBarLayout сразу перейдет на экран. Есть ощущение тяжести.

Что ж, «улучшение» панели инструментов AppBarLayout почти похоже на это, но, чтобы исправить один момент, на самом деле AppBarLayout — это не просто «улучшение» панели инструментов, это то же самое для других элементов управления, но более распространена комбинация AppBarLayout и панели инструментов. Теперь давайте посмотрим, как CollapsingToolbarLayout может «улучшить» панель инструментов.

3、CollapsingToolbarLayout

«Улучшение» CollapsingToolbarLayout для панели инструментов состоит в том, что она делает панель инструментов складной, чтобы на ней было больше интерактивных шаблонов (фактически, больше интерактивной анимации). Давайте сначала посмотрим на эффекты, которые могут быть достигнуты:

Чтобы добиться эффекта, показанного на рисунке выше, его необходимо использовать вместе с AppBarLayout. Использовать CollapsingToolbarLayout очень просто. Просто оберните панель инструментов напрямую. Элемент управления ImageView можно добавить в качестве «фона» CollapsingToolbarLayout. Фактически, CollapsingToolbarLayout сам является FrameLayout, поэтому его дочерние элементы управления Размещение должно начинаться с левого верхнего угла и складываться по очереди. Однако по умолчанию панель инструментов сначала скрыта.

В этом коде есть деталь, требующая внимания. Вы можете обнаружить, что свойство app: layout_scrollFlags больше не установлено для панели инструментов в коде, а для элемента управления CollapsingToolbarLayout. Это неудивительно, поскольку, как упоминалось выше, свойство app: layout_scrollFlags установлено для прямых дочерних элементов управления AppBarLayout. Посмотрим, как это работает:

Это эффект по умолчанию. Вы можете видеть, что во время процесса прокрутки ImageView и заголовок прокручиваются вверх или вниз вместе. В этом процессе панель инструментов будет отображаться только тогда, когда CollapsingToolbarLayout свернут, а заголовок выполнил масштабирование, положение и прозрачность. Дождитесь анимации, и панель инструментов выполнит прозрачную анимацию.Два заголовка перекрываются или разделяются, и похоже, что есть только один заголовок. Кроме того, в приведенном выше коде макета есть стили для панели инструментов, но он не работает. CollapsingToolbarLayout предоставляет атрибуты стиля текста, которые могут устанавливать стили текста для большого заголовка (расширенный заголовок) и подзаголовка (свернутый заголовок) соответственно.

Код стиля текста в style.xml выглядит следующим образом:

Установите стиль развернутого заголовка и стиль свернутого заголовка для CollapsingToolbarLayout соответственно

Этого недостаточно. Если вы хотите изменить цвет фона на сплошной цвет и строку состояния, когда CollapsingToolbarLayout свернут, вы можете установить это с помощью следующего кода:

ContentScrim устанавливает цвет фона CollapsingToolbarLayout при сворачивании. statusBarScrim устанавливает цвет строки состояния, когда она сложена, что может обеспечить эффект погружения, но этот атрибут должен поддерживаться Android 5.0 или более поздней версии. Более того, некоторые домашние машины имеют ограничения на строку состояния и не могут действовать, например система молотка , Строка состояния имеет полупрозрачный цвет, и этот атрибут не может действовать, поэтому этот эффект зависит от телефона и версии системы. Посмотрим, как это работает:

Да, так себе, но это почти готово, вам нужно установить эффект параллакса для картинки «фон», и текст заголовка отображается внизу по центру. Установка эффекта параллакса для изображения «фон» может быть выполнена путем установки свойства app: layout_collapseMode, если это свойство является дочерним элементом управления CollapsingToolbarLayout, есть три значения: none, pin, parallax. Эффект параллакса заключается в том, что при свертывании CollapsingToolbarLayout этот макет (или элемент управления) будет иметь эффект складывания параллакса; эффект закрепления заключается в том, что после свертывания CollapsingToolbarLayout этот макет (или элемент управления) будет зафиксирован вверху. «Нет» является значением по умолчанию, то есть не имеет никакого эффекта. Если честно, я чувствую, что нет никакой разницы между «pin» и «none» (если вы считаете, что я ошибаюсь, пожалуйста, просветите меня). Что касается положения заголовка, его можно настроить с помощью app: collapsedTitleGravity и app: collapsedTitleGravity. Используется так же, как layout_gravity, поэтому я не буду об этом говорить. Вставьте код и просто посмотрите на эффект.

Источник