Android CoordinatorLayout Examples – Toolbar, Collapsing Toolbar, Tabs, ViewPager

Android CoordinatorLayout is a layout which provides control over design library components. Design library components like FloatingActionButton, SnackBar, AppBarLayout etc. These components behave differently when added to CoordinatorLayout. Term Coordinate means bring the different elements of (a complex activity or organization) into a harmonious or efficient relationship. So basically CoordinatorLayout provide control over components and how they behave in presence of each other.

In this post, we will understand how to create different types CoordinatorLayout. With CoordinatorLayout we will design following screens

1. Android CoordinatorLayout with Toolbar and Floating Action Button

Android CoordinatorLayout with Toolbar and Floating Action Button

2. Android CoordinatorLayout with ViewPager, Toolbar and Tabs

Android CoordinatorLayout with ViewPager, Toolbar and Tabs

3. Android CoordinatorLayout CollapsingToolbar and Floating Action Button

Android CoordinatorLayout CollapsingToolbar and Floating Action Button

4. Android CoordinatorLayout with ViewPager, CollapsingToolbar and Tabs

Android CoordinatorLayout with ViewPager, CollapsingToolbar and Tabs

Download Project

DOWNLOAD PROJECT

Demo

NOTE: Before starting to add Picasso Library in your project or if you don’t know how to add Read this nice Answer Click here

Add design library

add the following dependency in your build.gradle file

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

Android CoordinatorLayout with Toolbar and Fab Example

Android CoordinatorLayout with Toolbar and Floating Action Button

1. Create new layout -> activity_toobar_and_fab.xml. This layout will contain AppBarLayout, Toolbar, FloatingActionButton, and layout content_toobar_and_fab arrange them as shown below 

 

2. Now create new layout -> content_toobar_and_fab.xml. All of your main content goes here.

 

3. Create a new class which will be our activity class Package Name ->CollapsingToobarFab.java.

Now when user will click on FloatingActionButton SnackBar will come from the bottom. But you can see the following image when SnackBar comes FloatingActionButton shifts up to make space for SnackBar. This behavior is handled by CoordinatorLayout.

Android CoordinatorLayout with ViewPager, Toolbar and Tabs

Android CoordinatorLayout with ViewPager, Toolbar and Tabs

1. Create new layout -> activity_toolbar_tabs.xml.  Add TabLayout inside AppBarLayout.  Following is the layout for CoordinatorLayout with Toolbar and Tabs.

2. Create new Activity class Package Name -> ToolbarTabs.java.

3. Create new class Package Name->ViewPagaerAdapter.java add following code to it. This will serve as the adapter for our ViewPager.

4. Create new layout ->fragment_demo.xml 

5. Create new class Package Name -> DemoFragment.java

 

6. Create new class Package Name->DemoAdapter.java

7. Create new layout -> custom_row_demo.xml. This class is structure of single item of RecyclerView Learn more about RecyclerView here  Android RecyclerView Tutorial – Introduction

 

8. Create new class Package Name-> DemoItem.java. This class will serve Data Model for RecyclerView items.

 

9. Creates new class Package Name->Space.java. This class is ItemDecoration class to add space between RecyclerView items.

Now run application and  you will see following output

Android Coordinatorlayout with CollapsingToolbar and Fab

Android Coordinatorlayout with CollapsingToolbar and Fab

1. Create new layout ->activity_collapsing_toobar_fab.xml. This layout will contain our CollapsingToolbar.

2. Now our Main content goes inside content_collapsing_toobar_fab.xml. So create new layout -> content_collapsing_toobar_fab.xml.

 

3. Create new class Package Name->CollapsingToolbarFab.java 

Done run application.

Android CoordinatorLayout with CollapsingToolbar and Tabs

Android CoordinatorLayout with ViewPager, CollapsingToolbar and Tabs

1.  First, follow steps 3 to 9 from CoordinatorLayout with Toolbar and Tabs.

2.  Create new layout ->activity_collapsing_toobar_tabs.xml

 

2.  Create new class Package name -> CollapsingToolbarTabs.java

Done now run the application.

If you still have any queries, please post them in the comments section below, I will be happy to help you. If you have any other questions in mind then make sure to visit our ask section.

 

Share this post

Hello there, My name is Amardeep founder of loopwiki.com. I have experience in many technologies like Android, Java, Php etc. In this variety of technologies, I love Android App Development. If you have any idea and you want me to develop for you then let’s have chat Email: [email protected]

2 Comments

  • Sumit kamble

    Thank you sir, I have one question how can I hide toolbar when I will scroll recyclerview or any nested scroll view container?

    • Welcome sumit, To hide toolbar as you scroll you can behavior to the scroll container as shown below

Leave a Reply

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