Android Parallax Scrolling Effect

Create Amazing Animations with Android Design Support Library

         Easily create stunning animations with less code using the Android design support library. Toolbar has become a popular choice over ActionBar/AppBar due to its versatility and customizability. This tutorial will show you how to create an expandable/collapsible toolbar with parallax scrolling effects using widgets such as AppBarLayout, CoordinatorLayout, CollapsingToolbarLayout, etc.

     For parallax scrolling, use Coordinator Layout as the base layout and add AppbarLayout, Nested Scrollview, or Recyclerview as direct child layouts. Discover how to configure parallax effects and different Toolbar animations in this guide. Learn about the layout structure of the Coordinator Layout. 

CoordinatorLayout

CoordinatorLayout is a layout in Android that provides a top-level container for windows and serves as a base for swipe-to-refresh, scrolling techniques, floating action buttons (FAB), Snackbars, and other material design components. It is used to coordinate the behavior of multiple child views, allowing them to interact with each other and respond to gestures.

Maximize the Potential of Your Android Layouts with CoordinatorLayout

Do you want to take your Android layouts to the next level? Look no further than CoordinatorLayout. This super-powered FrameLayout provides two primary use cases: as a top-level application decor or chrome layout, and as a container for specific interactions with one or more child views.

With CoordinatorLayout, you can specify Behaviors for child views, enabling them to interact with one another and respond to gestures. The result? A wide range of interactions and layout modifications, from sliding drawers and panels to swipe-dismissable elements and sticky buttons.

Take advantage of the power of CoordinatorLayout by assigning anchor views to its children. These anchors correspond to arbitrary descendants of the CoordinatorLayout, providing even more customization options for your layouts. Upgrade your Android layouts today with CoordinatorLayout. 

Consider the following picture:

       The CoordinatorLayout coordinates Views within the layout. In this example, it contains an AppbarLayout, a scrollable view, and an anchored FloatingActionButton. The AppbarLayout includes a CollapsingToolbarLayout with an ImageView and Toolbar. The NestedScrollView contains a TextView. The FloatingActionButton is anchored to the AppbarLayout.

 

<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:background="@android:color/background_light" android:fitsSystemWindows="true" >

<!-- AppbarLayout -->

<!-- CollapsingToolbarLayout -->

<!-- ImageView and Toolbar -->

<!-- /CollapsingToolbarLayout -->

<!-- /AppbarLayout -->

<!-- NestedScrollView -->

<!-- TextView -->

<!-- /NestedScrollView -->

<!-- FloatingActionButton -->

</android.support.design.widget.CoordinatorLayout>

AppBarLayout

AppBarLayout is a special type of Toolbar that serves as a container for branding, navigation, search, and action items. The desired scrolling behavior of the AppBarLayout can be set through the setScrollFlags() method. The real power of AppBarLayout lies in the proper management of different scroll flags in its views.

CollapsingToolbarLayout

CollapsingToolbarLayout is a wrapper for the Toolbar that implements a collapsing app bar. It is designed to be used as a direct child of the AppBarLayout and is commonly seen in profile screens in applications such as WhatsApp. This layout includes components such as the Collapsing Title, scrollFlags, CollapsedTitleGravity, ContentScrim, etc.

Toolbar

Toolbar is a standard toolbar used within application content. Unlike the action bar, which is part of the Activity's window decor controlled by the framework, a Toolbar can be placed anywhere within the view hierarchy. The Toolbar can be designated as the action bar for an Activity by using the setActionBar() method.

Behavior

App bars have four main regions (referred to as blocks) that make up their scrolling structure: status bar, toolbar, tab bar/search bar, and flexible space, which accommodates images or extended app bars.

To add an AppBarLayout:

1. Add the latest design library to your build.gradle file:

dependencies {

compile 'com.android.support:design:X.X.X'

// X.X.X specifies the version

}

1. Make your Activity extend android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {

1. Add the Toolbar inside an AppBarLayout, and the AppBarLayout inside a CoordinatorLayout:

<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:orientation="vertical">

Layout xml

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="@dimen/toolbar_elevation">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/AppTheme.Widget.Toolbar"/>

</android.support.design.widget.AppBarLayout>

...

</android.support.design.widget.CoordinatorLayout> "

From that point, the configuration depends on some flags described below.

Standard app bar

AppbarLayout flags:

SCROLL_FLAG_ENTER_ALWAYS: When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling.

SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED: An additional flag for 'enterAlways' which modifies the returning view to only initially scroll back to it's collapsed height.

SCROLL_FLAG_EXIT_UNTIL_COLLAPSED: When exiting (scrolling off screen) the view will be scrolled until it is 'collapsed'.

SCROLL_FLAG_SCROLL: The view will be scroll in direct relation to scroll events.

SCROLL_FLAG_SNAP: Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge.

Specs:

The standard app bar height is 56dp on mobile and 64dp on larger screen sizes.

The app bar has two scrolling options:

• The app bar can scroll off-screen with the content and return when the user reverse scrolls.
• The app bar can stay fixed at the top with content scrolling under it.

App bar with tabs

The standard app bar component that can include the following blocks: a toolbar, tab bar, or flexible space.

Tabs may have one of these behaviors:

• The tab bar stays anchored at the top, while the toolbar scrolls off.

• The app bar stays anchored at the top, with the content scrolling underneath.

• Both the toolbar and tab bar scroll off with content. The tab bar returns on reverse-scroll, and the toolbar returns on complete reverse scroll.

Flexible space

Because the app bar is flexible, it can be extended to accommodate larger typography or images. To extend the app bar, add a flexible space block.

Flexible space may be displayed one of two ways:

• The flexible space shrinks until only the toolbar remains. The title shrinks to 20sp in the navigation bar. When scrolling to the top of the page, the flexible space and the title grow into place again.

• The whole app bar scrolls off. When the user reverse scrolls, the toolbar returns anchored to the top. When scrolling all the way back, the flexible space and the title grow into place again.

Flexible space with image

Use flexible space to accommodate images in the app bar with the desired aspect ratio.

In this example, the aspect ratio is 4:3. When scrolling, the content pushes up the image, which shrinks the flexible space. At the end of the transformation, the image gets tinted with the primary color, independent of scrolling.

Flexible space with overlapping content

Content can overlap the app bar.

The app bar has two scrolling options:

• The app bar is initially positioned behind the content. Upon upward scroll, the app bar should scroll faster than the content, until the content no longer overlaps it. Once anchored in place, the app bar lifts up for content to scroll underneath.

• The app bar can scroll off-screen with the content and return when the user reverse scrolls.In this interaction, the app bar cannot include tabs.