Today, I´d like to take a look to the Coordinator Layout and some basic ideas about App Bar Layout. Together, they can do some nice animated effects. In this occasion, we´ll see how to hide the toolbar while we start scrolling down, and then show it again as soon as we start scrolling down.
We´ll also see how to make a Floating Action Button animate to leave enough space for a Snack Bar to show.
Coordinator Layout
The Coordinator Layout is one of the new powerful layouts introduced in the new design support library. We already talked about the Navigation View and the Floating Action Button, but now it´s time to put everything to work together and coordinate their animations.
That´s what this new layout is all about: based on a set of rules defined in Behaviors, we can define how views inside the Coordinator Layout relate each other and what can be expected when one of them changes. I´ll talk about behaviours in a future post, but they identify which views another view depend on, and how they behave when any of these views changes.
App Bar Layout
This layout must surround the views that conform the toolbar to make them animate the way we want based on a scrolling view. We can define the scrolling view in XML using this attribute:
[xml]
app:layout_behavior="@string/appbar_scrolling_view_behavior"
[/xml]
This will add a behavior to the view, which can be listened by the AppBarLayout to animate its children.
For example, in MaterializeYourApp example, I´m using a RecyclerView in main activity. This is how the XML looks like:
[xml]
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
[/xml]
By using some scroll flags, we can specify the behaviour of the views inside the layout. We have these different options:
- scroll: This means it will scroll while scrolling the targeted view (our recycler view in this case).
- enterAlways: When we scroll up, the view will immediately reappear.
- enterAlwaysCollapsed: if the view has a collapsed mode, it will reappear collapsed when scrolling up.
- exitUntilCollapsed: it won´t exit from the screen until the view is collapsed.
I´ll review some of these flags in next articles, but for the main activity, we just want it to scroll with the scrolling view and to re-enter as soon as we scroll up. So that´s the combination the Toolbar will use:
[xml]
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
[/xml]
This is the important line:
[xml]
app:layout_scrollFlags="scroll|enterAlways" />
[/xml]
Coordinator Layout, Floating Action Bar and Snack Bar
This is almost for free, but it´s interesting to know that FloatingActionButton behavior will pay attention to Snack Bar views and move to leave them enough space to paint. The only requirements are that the FAB is inside a Coordinator Layout and that we attach the SnackBar to it:
[java]
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
Snackbar.make(content, "FAB Clicked", Snackbar.LENGTH_SHORT).show();
}
});
[/java]
The content view in this case is the CoordinatorLayout, so when the FAB is clicked, the SnackBar appears and the FAB animates with it.
Conclusion
Thanks to CoordinatorLayout and AppBarLayout you are starting to discover the amazing animations you can get without hardly any code. This is going to be bigger when you are able to create more complex toolbars which animate in many different ways, really useful to create lively detail screens. But this will have to wait to the next article, where I’ll talk about Collapsing Toolbar Layout. In the meanwhile, you can check the working code in MaterializeYourApp repo example.
How you should use the CoordinatorLayout with fragments? Should it be placed in the fragment or in the activity?
I can’t think on any drawback of using them in a fragment, it depends on how you organize the layout. But unless you are using different toolbars depending on the fragment, you probably place your toolbar inside the activity layout, and the toolbar should be inside the coordinator.
That’s what I thought, but I’ve noticed that when you implement a parallax image, it goes into the CollapsingToolbarLayout containing the Toolbar therefore I should also put the image on the activity and not the fragment, I think in this case a callback must be implemented to set the image
The problem with the CoordinatorLayout is not using it with fragments, but from my experience – the FloatingActionButton. If you, for example have a ViewPager with a TabLayout instead of the RecyclerView from your example, and want to have a Floating Action Button positioned at the bottom of the screen in only one of the tab fragments, and you want to have a collapsible Toolbar, the toolbar pushes the button off screen and the button appears only when the toolbar is collapsed. The only solution I’ve found to this problem is placing the FAB in the activity layout as a direct descendant of the CoordinatorLayout and then show/hide it when you need too… Pretty unacceptable workaround if you ask me.
i need to use linearlayout in the place of recyclerview,will it work
You need to use a NestedScrollView with the Linear inside.
Hello.
I made an app with custom behaviors etc. I tried to add Snackbar to it and I had some problems.
With further searching I found out that the problem was that setting a custom Behavior to my FAB, and pushing the FAB when Snackbar was showing wasn’t working. If I don’t use any behavior for the FAB it works.
My FAB behavior is used to hide the FAB when scrolling, so I have Toolbar and FAB hide when I scroll
Here it is: http://pastebin.com/bEzwdzYr
Is there any way to have both FAB hide and FAB pushing up when Snackbar is showing?
I tried to extend my behavior for Snackbar to implement push up (and it works), but while the Snackbar is showing, if I scroll down the FAB, it gets hidden properly and then if I scroll up the FAB, it gets back to its original position overlapping the Snackbar.
Here is the extended Behavior: http://pastebin.com/kWHp6U83
I cannot get Snackbar state (showing or not), or determine when Snackbar is dismissed, to adjust FAB translation and I haven’t found anything that does the whole work properly. Only inconsistent workarounds.
Any thoughts?
Thanks.
GridView not working like nestedscrollview and recyclerview.
Anyone figured out how to get this coordinator layout to work with a gridview… documentation says it only works with nested/recycle view…. Buy must be someway to get the same effect? No?
No, you can’t really use it with GridView or ListView as they don’t implement the NestedChild interface. However, you should replace the GridView with a RecyclerView and either a GridLayoutManager or a StaggeredGridLayoutManager to get the same effect. https://developer.android.com/reference/android/support/v7/widget/GridLayoutManager.html
sir, how can we set snackbar permanent to the layout (if onclick presences don’t don’t hide the snackbar). please help me i am new to android…..