Android Collapsing Toolbar Layout

Collapsing Toolbar Layout is the newly introduced in Lollipop, using which you can create awesome scrolling effect.

According to the android documentation Collapsing Toolbar layout is a wrapper for Toolbar which implements a collapsing app bar.

It is designed to be used as a direct child of a AppBarLayout

 

Example Of Collapsing ToolBarLayout:

  • Let’s Understand the XML Tags in the above XML layout

CoordinatorLayout

  • A powerful FrameLayout that specifies behavior for child view for various interactions. Allows Floating views to be anchored in layout.

AppBarLayout:

  • It is Responsible for implementing many features of material design app bar.

CollapsingToolbarLayout

  • Wrapper for Toolbar that makes the header image collapse into the toolbar adjusting its tittle size. What’s left is image view which hold our actual header’s image and Toolbar which we are familiar with.

NestedScrollView

  • It’s a spical scroll view for the smooth scrolling effect, inside this place the desired content
  • scroll: this flag should be set for all views that want to scroll off the screen – for view that do not use this flag ,they will remain pinned to the top of the screen

Note

  • All views using this scroll flag must be declared before a view that do not use the flag. This ensure that all views exit from the top,levaing the fixed element behind.
  • For the CollapsingToolbarlayout  XML tag set the layout_scrollFlags property with scroll|exitUntilCollapses
  • And we also have to add some dependencies in the gradle file which a given bellow.

OutPut

Leave a Reply

Your email address will not be published. Required fields are marked *