Working with the AppBar and Collapsed Toolbar layouts in Kotlin (2023)

In this chapter, we look at the ways in which the app bar can be customized in an activity layout and made to respond to scroll events that occur in other views on the screen. By using the CoordinatorLayout in conjunction with the AppBarLayout and CollapsingToolbarLayout containers, the app bar can be configured to display an image and animate in and out of view. For example, scrolling up a list can be configured so that the app bar disappears from view and reappears when you scroll down.

Starting with an overview of the elements that can make up an app bar, this chapter will work through a variety of examples of how to set up the app bar.

contents

The anatomy of an AppBar

The app bar is the area that appears at the top of the screen when an app is running and can be configured to contain a variety of different elements, including the status bar, toolbar, status bar, tabs and a flexible blank area. For example, Figure 39-1 shows an application bar that contains a status bar, a toolbar, and a tab bar:

The flex area can be filled with an empty background color or with an image displayed in an ImageView object, as shown in Figure 39-2:

As shown in the rest of this chapter, if the main content area of ​​the Activity UI layout contains scrollable content, the app bar elements can be configured to expand and collapse as the content is scrolled. the screen.

The sample project

For the purposes of this example, modifications will be made to the CardDemo project created in the previous chapter titled "Android RecyclerView and CardView Tutorial". First, start Android Studio and load this project.

After loading the project, run the application, and as you scroll down the list, notice that the toolbar remains visible, as shown in Figure 39-3:

The first step is to make some configuration changes so that the toolbar collapses when scrolling up and expands when scrolling down.

Coordination of RecyclerView and Toolbar

Load the activity_card_demo.xml file into the layout editing tool, switch to text mode, and examine the XML layout layout, the hierarchy of which is represented by the diagram in Figure 39-4:

At the top level of the hierarchy is the LayoutCoordinator which, as its name suggests, coordinates the interactions between the various elements of the child view it contains. For example, as highlighted in "Working with the Floating Action Button and Coffee Shop," the coordinator layout automatically slides the floating action button up to match the appearance of a coffee shop when displayed, then moves the part back down once the bar has closed. .

The LayoutCoordinator can be used in a similar way to make app bar items appear and disappear based on the hover action of specific views within the view hierarchy. One such element within the layout hierarchy shown in Figure 39-4 is RecyclerView. To achieve this coordinated behavior, it is necessary to define properties both on the element being scrolled and on the elements with which the scrolling will be coordinated.

On the scrolling element (RecyclerView in this case), the android:layout_behavior property must be set to appbar_scrolling_view_behavior . In the activity_card_demo.xml file, find the RecyclerView element, and note that this property was already set in the previous chapter:

<android.support.v7.widget.RecyclerViewandroid:id="@+id/recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

The only child of AppBarLayout in the view hierarchy is the toolbar. In order for the toolbar to respond to scroll events that occur in the RecyclerView, the app:layout_scrollFlags property must be set on this element. The value assigned to this property depends on the type of interaction required and must be one or more of the following:

• Displacement- Indicates that the view should be scrolled off the screen. If this is not set, the display will remain fixed at the top of the screen while scrolling.

• always between- When used in conjunction with the scroll option, scrolling up causes the view to collapse. Any scroll down in this mode causes the preview to reappear.

• enterAlwaysColapsed- When a view is defined, that view will not expand from the collapsed state until the scroll down reaches the list boundary. If the minHeight property is set, the view will appear during the initial scroll motion, but only until the min height is reached. It then stays at that height and doesn't fully expand until it reaches the top of the list. Note that this option only works when used in conjunction with the enterAlways and scroll options. For example:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"android:minHeight="20dp"

• exitUntilCollapsed – If set, the view collapses during an up scroll motion until the minHeight threshold is reached. At that point, it will stay at that height until you change the direction of travel.

For the purposes of this example, the Scroll and EnterAlways options are set on the toolbar as follows:

<android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:popupTheme ="@style/AppTheme.PopupOverlay"app:layout_scrollFlags="scroll|enterAlways"/>

Rerun the app with the appropriate properties and scroll up the list of the RecyclerView. This should cause the toolbar to disappear from view (Figure 39-5). Scrolling down should make the toolbar reappear.

Introducing the Collapsible Toolbar Design

The CollapsingToolbarLayout container extends the standard toolbar, providing a greater variety of options and a greater level of control over the collapsing of the app bar and its children in response to coordinated scroll actions. The CollapsingToolbarLayout class is intended to be added as a child of AppBarLayout and provides features such as automatically adjusting the font size of the toolbar title when showing and hiding the toolbar. A parallax mode allows certain app bar content to be hidden when collapsed, while a pinning mode allows app bar elements to remain in a fixed position during collapse.

A canvas option is also available to set the color the toolbar should transition to during the minimize sequence.

To see these features in action, the app bar contained in the activity_card_demo.xml file is modified to use the CollapsingToolbarLayout class along with the addition of an ImageView to better demonstrate the effect of parallax mode. The new view hierarchy used by the CollapsingToolbarLayout is represented by the diagram in Figure 39-6:

Load the activity_card_demo.xml file into the layout editing tool in text mode and change the layout to read the following:

<?xmlversion="1.0"codificación="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns: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: fitSystemWindows="true"tools:context=".CardDemoActivity"><android.support.v7.widget.RecyclerViewandroid:id="@+id/recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"app: layout_behavior="@string/appbar_scrolling_view_behavior"/><android.support.design.widget.AppBarLayoutandroid:layout_height="200dp"android:layout_width="match_parent"android:theme="@style/AppTheme.AppBarOverlay"><android.support .design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_scrollFlags="scroll|enterAlways"android:fitsSystemWindows="true"app:contentScrim= "?atributo/columna orPri mary"app:expandedTitleMarginStart="48dp"app:expandedTitleMarginEnd="64dp"><ImageViewandroid:id="@+id/backdrop"android:layout_width="match_parent"android:layout_height="200dp"android:scaleType="centerCrop " android:fitsSystemWindows="true"app:layout_collapseMode="parallax"android:src="@drawable/appbar_image"/><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width = "match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:popupTheme="@style/AppTheme.PopupOverlay"app:layout_scrollFlags="scroll|enterAlways"app:layout_collapseMode=" pin "/></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><includelayout="@layout/content_card_demo"/></android.support.design.widget.CoordinatorLayout >

In addition to adding the new elements to the old layout, the background color property setting has been removed. The benefit of this change is that it provides a transparent toolbar, so more parts of the image are visible in the app bar.

Using the file system browser for your operating system, locate and copy the appbar_image.jpg image file into the project_icons folder of the book code example download. Right-click on the application -> res -> drawable entry in the Project tool window and choose Paste from the menu that appears.

When run, the application bar should appear as shown in Figure 39-7:

As you scroll up the list, the app bar gradually closes. During collapse, the image fades to the color defined by the Scrim property, while the font size of the title text decreases at a corresponding rate, until only the toolbar is visible:

The toolbar remained visible during the initial phase of the scroll movement (the toolbar will also disappear as the scroll movement continues upwards) when the flex area is collapsed because the toolbar element in the activity_card_demo file .xml is configured to use PIN mode:

app:design_collapseMode="pin"

If the minimize mode had been set to parallax, the toolbar would have collapsed along with the image preview.

If you continue to scroll up, the toolbar will also collapse, leaving only the status bar visible:

Since the Scroll-Flags property for the CollapsingToolbarLayout element includes the enterAlways option, scrolling down will cause the app bar to expand again.

To lock the toolbar in place so that it no longer disappears from view when you scroll up, replace enterAlways with exitUntilCollapsed in the layout_scrollFlags property of the CollapsingToolbarLayout element in the activity_card_demo.xml file, as follows:

<android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_scrollFlags="scroll|exitUntilCollapsed"android:fitsSystemWindows="true" aplicación:contentScrim="?attr/colorPrimary"aplicación:expandedTitleMarginStart="48dp"aplicación:expandedTitleMarginEnd="64dp">

Change screen title and color

As a final task, edit the CardDemoActivity.kt file and add code to the onCreate() method to change the title text in the collapsed layout manager instance and set a different screen color (note that the screen color also can be set in the layout resource file):

packagecom.ebookfrenzy.carddemo..importandroid.graphics.Color..classCardDemoActivity:AppCompatActivity(){..overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_card_demo)setSupportActionBar(barra de herramientas)collapsing_toolbar. title="MyToolbarTitle"collapsing_toolbar.setContentScrimColor(Color.GREEN)layoutManager=LinearLayoutManager(this)recycler_view.layoutManager=layoutManageradapter=RecyclerAdapter()recycler_view.adapter=adaptador}..}

Run the app one last time and notice that the new title appears in the app bar, and when you scroll now, the toolbar turns green as it disappears from view.

abstract

Appearing at the top of most Android apps, the app bar can consist of several different elements, including a toolbar, tabbed layout, and even an image view. When embedded in a main CoordinatorLayout object, several options are available to control how the app bar behaves in response to scroll events in the main content of the activity. To better control this behavior, the CollapsingToolbarLayout manager provides several additional levels of control over how the app bar content expands and collapses relative to the scroll activity.