Android CoordinatorLayout is a layout that 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 the presence of each other.

In this post, we will understand how to create different types of CoordinatorLayout. With CoordinatorLayout we will design the 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

Demo

Android CoordinatorLayout Examples - Toolbar, Collapsing Toolbar, Tabs, ViewPager | loopwiki.com

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 a 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 

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.loopwiki.coordinatelayoutexamples.Samples.ToobarAndFab">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <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/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_toobar_and_fab" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_black_24dp"
        android:tint="@android:color/white"/>

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

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.loopwiki.coordinatelayoutexamples.Samples.ToobarAndFab"
    tools:showIn="@layout/activity_toobar_and_fab">

    <TextView
        android:background="@drawable/background_border"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:layout_margin="4dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:text="Your Main Content Goes here" />

</RelativeLayout>

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

package com.loopwiki.coordinatelayoutexamples.Samples;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import com.loopwiki.coordinatelayoutexamples.R;

public class CollapsingToobarFab extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toobar_fab);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }
}

Now when users 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 a new layout -> activity_toolbar_tabs.xml.  Add TabLayout inside AppBarLayout.  Following is the layout for CoordinatorLayout with Toolbar and Tabs.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.loopwiki.coordinatelayoutexamples.Samples.ToolbarTabs">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <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/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />


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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_black_24dp"
        android:tint="@android:color/white" />

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

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

package com.loopwiki.coordinatelayoutexamples.Samples;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import com.loopwiki.coordinatelayoutexamples.Fragments.DemoFragment;
import com.loopwiki.coordinatelayoutexamples.R;
import com.loopwiki.coordinatelayoutexamples.ViewPagerAdapter;

public class ToolbarTabs extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar_tabs);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        ViewPager mViewPager = findViewById(R.id.viewpager);
        ViewPagerAdapter mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        mViewPagerAdapter.addFragment(DemoFragment.newInstance(), "Tab 1");
        mViewPagerAdapter.addFragment(DemoFragment.newInstance(), "Tab 2");
        mViewPagerAdapter.addFragment(DemoFragment.newInstance(), "Tab 3");
        mViewPager.setAdapter(mViewPagerAdapter);
        TabLayout mTabLayout = findViewById(R.id.tabs);
        mTabLayout.setupWithViewPager(mViewPager);

    }

}

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

package com.loopwiki.coordinatelayoutexamples;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by amardeep on 11/7/2017.
 */

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

4. Create new layout ->fragment_demo.xml 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.loopwiki.coordinatelayoutexamples.Fragments.DemoFragment">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/recyclerViewDemo"
        android:layout_height="match_parent" />

</FrameLayout>

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

package com.loopwiki.coordinatelayoutexamples.Fragments;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.loopwiki.coordinatelayoutexamples.Adpaters.DemoAdapter;
import com.loopwiki.coordinatelayoutexamples.Helpers.Space;
import com.loopwiki.coordinatelayoutexamples.Models.DemoItem;
import com.loopwiki.coordinatelayoutexamples.R;

import java.util.ArrayList;
import java.util.List;


public class DemoFragment extends Fragment {


    public DemoFragment() {
    }


    public static DemoFragment newInstance() {
        DemoFragment fragment = new DemoFragment();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_demo, container, false);
        RecyclerView recyclerViewDemo = view.findViewById(R.id.recyclerViewDemo);
        recyclerViewDemo.setLayoutManager(new LinearLayoutManager(getContext()));
        recyclerViewDemo.addItemDecoration(new Space(20, 1));
        recyclerViewDemo.setAdapter(new DemoAdapter(feedItems(), getContext()));
        return view;
    }

    private List<DemoItem> feedItems() {
        String[] Titles = {"Taylor Swift - Look What You Made Me", "Bebe Rexha - Meant to Be", "Andra &amp; Mara - Sweet Dreams", "Sam Smith - Too Good At Goodbyes "};
        String[] Description = {"By TaylorSwiftVEVO ", "By Bebe Rexha", "BySamSmithWorldVEVO", "SamSmithWorldVEVO "};
        String[] ImageUrls = {"https://cdn.pixabay.com/photo/2016/01/14/06/09/guitar-1139397_640.jpg", "https://cdn.pixabay.com/photo/2017/10/30/10/35/dance-2902034_640.jpg", "https://cdn.pixabay.com/photo/2017/09/17/11/10/luck-2758147_640.jpg", "https://cdn.pixabay.com/photo/2016/12/17/16/59/guitar-1913836_640.jpg"};
        List<DemoItem> demoItems = new ArrayList<>();
        for (int i = 0; i < 6; i++) {
            for (int j = 0; j < Titles.length; j++) {
                DemoItem demoItem = new DemoItem(Titles[j], Description[j], ImageUrls[j]);
                demoItems.add(demoItem);
            }
        }
        return demoItems;
    }

}

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

package com.loopwiki.coordinatelayoutexamples.Adpaters;

import android.app.Activity;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.loopwiki.coordinatelayoutexamples.Models.DemoItem;
import com.loopwiki.coordinatelayoutexamples.R;
import com.squareup.picasso.Picasso;

import java.util.List;

/**
 * Created by amardeep on 11/7/2017.
 */

public class DemoAdapter extends RecyclerView.Adapter {
    List<DemoItem> demoItems;
    Context context;

    public DemoAdapter(List<DemoItem> demoItems, Context context) {
        this.demoItems = demoItems;
        this.context = context;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View row=inflater.inflate(R.layout.custom_row_demo, parent, false);
        return new DemoItemHolder(row);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        DemoItem currentDemoItem = demoItems.get(position);
        DemoItemHolder demoItemHolder = (DemoItemHolder) holder;
        demoItemHolder.Title.setText(currentDemoItem.title);
        demoItemHolder.Description.setText(currentDemoItem.Description);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        Picasso.with(context).load(currentDemoItem.imageUrl).placeholder(R.drawable.ic_image_black_24dp).centerCrop().resize(displayMetrics.widthPixels, displayMetrics.heightPixels / 3).into(demoItemHolder.Thumbnail);

    }

    @Override
    public int getItemCount() {
        return demoItems.size();
    }

    public class DemoItemHolder extends RecyclerView.ViewHolder {
        ImageView Thumbnail;
        TextView Title, Description;

        public DemoItemHolder(View itemView) {
            super(itemView);
            Thumbnail = itemView.findViewById(R.id.imageViewThumbnail);
            Title = itemView.findViewById(R.id.textViewTitle);
            Description = itemView.findViewById(R.id.textViewDes);
        }
    }
}

7. Create a new layout -> custom_row_demo.xml. This class is a structure of a single item of RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageViewThumbnail"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageViewThumbnail"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textViewTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <TextView
                android:id="@+id/textViewDes"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
        </LinearLayout>
    </RelativeLayout>

</android.support.v7.widget.CardView>

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

package com.loopwiki.coordinatelayoutexamples.Models;

/**
 * Created by amardeep on 11/7/2017.
 */

public class DemoItem {
    public String title;
    public String Description;
    public String imageUrl;

    public DemoItem(String title, String Description, String imageUrl) {
        this.title = title;
        this.Description = Description;
        this.imageUrl = imageUrl;
    }
}

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

package com.loopwiki.coordinatelayoutexamples.Helpers;

import android.graphics.Rect;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by amardeep on 11/7/2017.
 */

public class Space extends RecyclerView.ItemDecoration {
    int space;
    int spanCount;

    public Space(int space, int spanCount) {
        this.space = space;
        this.spanCount = spanCount;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if (parent.getChildLayoutPosition(view) <= spanCount) {
            outRect.top = space;
        }
        outRect.right = space;
        outRect.left = space;
        outRect.bottom = space;
    }
}

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.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.loopwiki.coordinatelayoutexamples.Samples.CollapsingToobarFab">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_collapsing_toobar_fab" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:tint="@android:color/white"
        android:src="@drawable/ic_add_black_24dp" />

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

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.loopwiki.coordinatelayoutexamples.Samples.CollapsingToobarFab"
    tools:showIn="@layout/activity_collapsing_toobar_fab">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

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

package com.loopwiki.coordinatelayoutexamples.Samples;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import com.loopwiki.coordinatelayoutexamples.R;

public class CollapsingToolbarFab extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toobar_fab);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }
}

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.loopwiki.coordinatelayoutexamples.Samples.CollapsingToolbarTabs">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:toolbarId="@+id/toolbar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/imaViewMusic"
                android:layout_width="match_parent"
                android:layout_height="256dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:layout_marginTop="24dp"
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="pin" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_black_24dp"
        android:tint="@android:color/white" />

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

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

package com.loopwiki.coordinatelayoutexamples.Samples;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;

import com.loopwiki.coordinatelayoutexamples.Fragments.DemoFragment;
import com.loopwiki.coordinatelayoutexamples.R;
import com.loopwiki.coordinatelayoutexamples.ViewPagerAdapter;
import com.squareup.picasso.Picasso;

public class CollapsingToolbarTabs extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toobar_tabs);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
        ViewPagerAdapter mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        mViewPagerAdapter.addFragment(DemoFragment.newInstance(), "Tab 1");
        mViewPagerAdapter.addFragment(DemoFragment.newInstance(), "Tab 2");
        mViewPagerAdapter.addFragment(DemoFragment.newInstance(), "Tab 3");
        mViewPager.setAdapter(mViewPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);

        ImageView imageViewMusic = findViewById(R.id.imaViewMusic);
        Picasso.with(this).load("https://cdn.pixabay.com/photo/2015/04/13/13/37/dj-720589_640.jpg").fit().into(imageViewMusic);
    }

}

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.

Author

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 Conatct

8 Comments

  1. dear sir, wanna make an coordinate layout page , m new to android studio, please guide , wanna scrollong + image insert

  2. AbdulRehman Reply

    hello sir hope u will fine 🙂 sir i have a implmented your tutorial in my project which also have nav drawer so i mplemented your Android CoordinatorLayout with CollapsingToolbar and Tabs but sir on scrolling the parallax is not working and in tabs on scrolling the amount data is also not completely showing
    app_bar_main.xml

    and content_main.xml

    Sir Whats the solution please help

    • You should add drawer layout on the top of everything then include app_bar inside it as fist child and then inside app_bar add your content_main will work fine.

  3. Sumit kamble Reply

    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

      <android.support.v7.widget.RecyclerView
              android:id="@+id/recyclerView"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Write A Comment