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
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
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
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
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 & 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
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
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.
8 Comments
cant able to comment
dear sir, wanna make an coordinate layout page , m new to android studio, please guide , wanna scrollong + image insert
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.
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" />