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

by Amardeep Yadav · Published November 9, 2017 · Updated November 19, 2017

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

2. Android CoordinatorLayout with ViewPager, Toolbar and Tabs

3. Android CoordinatorLayout CollapsingToolbar and Floating Action Button

4. 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

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

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

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

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

<?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();
            }
        });
    }
}

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

1. Create 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>

<?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);

    }

}

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);
    }
}

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>

<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 & 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;
    }

}

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 & 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);
        }
    }
}

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

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

<?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;
    }
}

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;
    }
}

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

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>

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

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

<?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();
            }
        });
    }
}

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

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>

<?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);
    }

}

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. If you have any other questions in mind then make sure to visit our ask section.

Share this post

Comments4
Pingbacks2

Sumit kamble says:

January 7, 2018 at 5:15 pm

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

Amardeep Yadav says:

January 7, 2018 at 6:01 pm

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" />

android:id="@+id/recyclerView"

AbdulRehman says:

June 2, 2018 at 7:30 pm

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

- Amardeep Yadav says:
  
  June 7, 2018 at 6:36 pm
  
  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.

Android CoordinatorLayout Examples – Toolbar, Collapsing Toolbar, Tabs, ViewPager | loopwiki.com | Online Coding

November 23, 2017

[…] Android CoordinatorLayout Examples – Toolbar, Collapsing Toolbar, Tabs, ViewPager […]
Android CoordinatorLayout with CollapsingToolbar and Tabs – SAEGEUL LEE BLOG

September 17, 2018

[…] https://www.loopwiki.com/ui-ux-design/android-coordinatorlayout-examples/ […]

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

You may also like...

6 Responses

Leave a Reply Cancel reply

Advertisements

Categories

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

Download Project

Demo

Add design library

Android CoordinatorLayout with Toolbar and Fab Example

Android CoordinatorLayout with ViewPager, Toolbar and Tabs

Android Coordinatorlayout with CollapsingToolbar and Fab

Android CoordinatorLayout with CollapsingToolbar and Tabs

You may also like...

Android Material Login And Registration Screen Design

Create gallery android application – Android Picasso Image Library

#3 Android RecyclerView Tutorial – Layout Managers

6 Responses

Leave a Reply Cancel reply

Advertisements

Categories