51. Working with the AppBar and Collapsing Toolbar Layouts

In this chapter we will be exploring the ways in which the app bar within an activity layout can be customized and made to react to the scrolling events taking place within other views on the screen. By making use of the CoordinatorLayout in conjunction with the AppBarLayout and CollapsingToolbarLayout containers, the app bar can be configured to display an image and to animate in and out of view. An upward scrolling motion on a list, for example, can be configured so that the app bar recedes from view and then reappears when a downward scrolling motion is performed.

Beginning with an overview of the elements that can comprise an app bar, this chapter will then work through a variety of examples of app bar configuration.

51.1 The Anatomy of an AppBar

The app bar is the area that appears at the top of the display when an app is running and can be configured to contain a variety of different items including the status bar, toolbar, tab bar and a flexible space area. Figure 51-1, for example, shows an app bar containing a status bar, toolbar and tab bar:

Figure 51-1

The flexible space area can be filled by a blank background color, or as shown in Figure 51-2, an image displayed on an ImageView object:

Figure 51-2

As will be demonstrated in the remainder of this chapter, if the main content area of the activity user interface layout contains scrollable content, the elements of the app bar can be configured to expand and contract as the content on the screen is scrolled.

51.2 The Example Project

For the purposes of this example, changes will be made to the CardDemo project created in the earlier chapter entitled “An Android RecyclerView and CardView Tutorial”. Begin by launching Android Studio and loading this project.

Once the project has loaded, run the app and note when scrolling the list upwards that the toolbar remains visible as shown in Figure 51-3:

Figure 51-3

The first step is to make some configuration changes so that the toolbar contracts during an upward scrolling motion, and then expands on a downward scroll.

51.3 Coordinating the RecyclerView and Toolbar

Load the activity_main.xml file into the Layout Editor tool, switch to Code mode and review the XML layout design, the hierarchy of which is represented by the diagram in Figure 51-4:

Figure 51-4

At the top level of the hierarchy is the CoordinatorLayout which, as the name suggests, coordinates the interactions between the various child view elements it contains. As highlighted in “Working with the Floating Action Button and Snackbar” for example, the CoordinatorLayout automatically slides the floating action button upwards to accommodate the appearance of a Snackbar when it appears, then moves the button back down after the bar is dismissed.

The CoordinatorLayout can similarly be used to cause elements of the app bar to slide in and out of view based on the scrolling action of certain views within the view hierarchy. One such element within the layout hierarchy shown in Figure 51-4 is the ConstraintLayout. To...

51.4 Introducing the Collapsing Toolbar Layout

The CollapsingToolbarLayout container enhances the standard toolbar by providing a greater range of options and level of control over the collapsing of the app bar and its children in response to coordinated scrolling actions. The CollapsingToolbarLayout class is intended to be added as a child of the AppBarLayout and provides features such as automatically adjusting the font size of the toolbar title as the toolbar collapses and expands. A parallax mode allows designated content in the app bar to fade from view as it collapses while a pin mode allows elements of the app bar to remain in fixed position during the contraction.

A scrim option is also available to designate the color to which the toolbar should transition during the collapse sequence.

To see these features in action, the app bar contained in the activity_main.xml file will be modified to use the CollapsingToolbarLayout class together with the addition of an ImageView...

51.5 Changing the Title and Scrim Color

As a final task, edit the MainActivity.java file and add some code to the onCreate() method to change the title text on the collapsing layout manager instance and to set a different scrim color (note that the scrim color may also be set within the layout resource file):

package com.ebookfrenzy.carddemo;

.

.

import com.google.android.material.appbar.CollapsingToolbarLayout;

import android.graphics.Color;

.

.

.

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_card_demo);

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

        setSupportActionBar(toolbar);

 

     ...

51.6 Summary

The app bar that appears at the top of most Android apps can consist of a number of different elements including a toolbar, tab layout and even an image view. When embedded in a CoordinatorLayout parent, a number of different options are available to control the way in which the app bar behaves in response to scrolling events in the main content of the activity. For greater control over this behavior, the CollapsingToolbarLayout manager provides a range of additional levels of control over the way the app bar content expands and contracts in relation to scrolling activity.