Develop Reference

Fragment Tabs inside Fragment

I have in my Main Activity an Action bar navigation using tabs using Fragments (with Material Design), as below which works well, but now I wish to have Tab navigation within my Fragments...
// Add Fragments to Tabs in Main Activity
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new FeedsFragment(), "Latest Updates");
adapter.addFragment(new ClubTeamsFragment(), "Club Teams");
adapter.addFragment(new FixturesFragment(), "Fixtures");
adapter.addFragment(new ResultsFragment(), "Results");
adapter.addFragment(new ClubFieldsFragment(), "Club Fields");
viewPager.setAdapter(adapter);
}
I'm pretty sure that TabHost is now deprecated.
I wish to achieve the attached image. The blue tabs are at the Main Activity level and the gray date tabs are in the selected fragment view.
I have read a few post about using Tab Host or Fragment Activity, or do I use Activity that is extended to Fragment?

See below answer that I achieved with using fragment tabs inside fragment tabs that are in my MainActivity
Inside my fragment using getChildFragmentManager()
public class FixturesTabs extends Fragment {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRetainInstance(true);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fixtures_new_tabs,container, false);
// Setting ViewPager for each Tabs
ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
setupViewPager(viewPager);
// Set Tabs inside Toolbar
TabLayout tabs = (TabLayout) view.findViewById(R.id.result_tabs);
tabs.setupWithViewPager(viewPager);
return view;
}
// Add Fragments to Tabs
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getChildFragmentManager());
adapter.addFragment(new TodaysFixturesFragment(), "Today");
adapter.addFragment(new WeekFixturesFragment(), "Week");
adapter.addFragment(new MonthFixturesFragment(), "Month");
adapter.addFragment(new AllFixturesFragment(), "Month");
adapter.addFragment(new MyTeamsFixturesFragment(), "My Teams");
viewPager.setAdapter(adapter);
}
static class Adapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public Adapter(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);
}
}
}
And my XML named "fixtures_new_tabs.xml" to match the inflated layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/result_tabs"
android:background="#color/grey"
app:tabTextColor="#color/medium_grey"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabIndicatorColor="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>
</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.CoordinatorLayout>
</RelativeLayout>
Hope this helps or points others in the direction for their solution..
P.S. If you get a white screen after implementing this, you might have added the same parent fragment to it's child fragment.

I changed a few things in Han and BENN1TH solution because the tab did not align properly, i added only two fragment. (they added five fragments).
I hope this helps.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/result_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>

Android. Tablayout inside a tab of another tablayout

Is it possible to have a tablayout inside a tab of another tablayout? I have created the following image for a better explanation. The slide movement desired is as it is described in the image.
My main activity
Xml
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</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.CoordinatorLayout>
Code
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private final static int[] tabIcons = {
R.drawable.ic_tab_1,
R.drawable.ic_tab_2,
R.drawable.ic_tab_3,
R.drawable.ic_tab_4
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
}
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new Fragment1());
adapter.addFrag(new Fragment2());
adapter.addFrag(new Fragment3());
adapter.addFrag(new Fragment4());
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
void addFrag(Fragment fragment) {
mFragmentList.add(fragment);
}
}
}
Fragments
Xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#android:color/holo_blue_light"
android:id="#+id/fragment_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="myContext">
<TextView
android:text="It is just a text."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Code
public class Fragment1 extends Fragment {
public Fragment1() { }
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment.
return inflater.inflate(R.layout.fragment_1, container, false);
}
}
How should Fragment2_A and Fragment2_B XML and Java code be?

ok, so inside your fragment you have only TextView. Now for fragment_2 put another TabLayout and ViewPager (you don't need AppBar, and Coordinator, they will be already there from parent layout of Activity)
frag2.xml
<LinearLayout
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="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/frag2_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
<android.support.v4.view.ViewPager
android:id="#+id/frag2_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
you have to create Frag2 Fragment , init with above layout inside OnCreateView and then for frag2_viewpager ViewPager class set another adapter for frag2a.xml and frag2b.xml Fragments only, they may have lets assume only TextViews or whatever. TabLayout will be placed above, inside Frag2 (and one in Activity as on pic)

I know that this is not a direct answer to the question and that I might get penalized for this, but you should not nest tabs in tabs. Google uses design concepts called material design. One of the rules for tabs is not to nest them. Here is a link to the page: https://material.google.com/components/tabs.html#tabs-usage. I think that it is really important that we as developers follow this to make the Android platform as universal and as amazing as it can be.
Thanks,
Oak

Simple
Everything will remain same like you set ViewPager in Activity. Just you need to use getChildFragmentManager() in Fragment instead of getFragmentManager().
From getChildFragmentManager() documentation
Return a private FragmentManager for placing and managing Fragments
inside of this Fragment.
From getFragmentManager() documentation
Return the FragmentManager for interacting with fragments associated
with this fragment's activity.
You can see #this answer for complete code.

Inflated tab items in Tab Layout does not match parent in android

I have gone through these but does not seems to work
working with
android.support.design.widget.TabLayout
needs to set custom views to each child tab as a match parent to child size
pragmatically give a size
View v = LayoutInflater.from(this).inflate(R.layout.layout_two, null);
v.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tabLayout.getTabAt(0).setCustomView(v);
this works as a match parent because there is no background but once add a inflate view issue comes
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
though about the tabIndicator as well
setting its height to app:tabIndicatorHeight="0dp" or adding android:tabStripEnabled="false" does not help.
here is a picture with boundaries which clearly shows the small gap like padding(blue bar is my TabLayout with two tabs )
left one is inflated
right one is normal .setIcon
any help to make inflated one match parent with no gaps ?
Here is my code
XML
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_layout"
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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="30dp">
//------- INSIDE THIS I HAVE A TAB
<android.support.v7.widget.Toolbar
android:background="#drawable/capture"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
/>
//------ HERE comes THE TAB That I DEAL
<android.support.design.widget.TabLayout
android:tabStripEnabled="false"
app:tabIndicatorHeight="0dp"
android:id="#+id/tab_layout"
android:scrollbars="none"
android:layout_below="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:tabTextColor="#d3d3d3"
android:minHeight="?attr/actionBarSize"
android:orientation="vertical" >
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:background="#467"
android:id="#+id/viewpager"
android:layout_below="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
myClass
public class LayoutExampleActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layout_example);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPagerAdaptor(viewPager);
tabLayout.setupWithViewPager(viewPager);
setTabs();
}
private void setupViewPagerAdaptor(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentOne(), "First");
adapter.addFragment(new GalleryFragment(), "Second");
// adapter.addFragment(new FragmentOne(), "Third");
viewPager.setAdapter(adapter);
}
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);
}
}
public void setTabs() {
tabLayout.getTabAt(0).setCustomView(R.layout.layout_one);
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
}
}

Set tabPaddingStart and tabPaddingEnd attributes.
like this:
<android.support.design.widget.TabLayout
...
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp" >
This question might be duplicated.
see: Cannot remove Padding from Tabs when using Custom views with Tab Layout

Android | stop TabLayout reload/refresh my Fragments

I've a similar tab layout, with 4 tabs.
When I go from tab 0 to tab 2 and then I come back to tab 0, Fragment0 is reloaded.. Same problem when I go from a tab to another "away" tab.
I would to load Fragment only first time and re-use them, without reloading.
This is a part of my code (I've using this tutorial):
MyActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if(getSupportActionBar()!=null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = MyActivity.this.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(ContextCompat.getColor(MyActivity.this, R.color.colorPrimaryDark));
}
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setupWithViewPager(viewPager);
setupTabIcons(); //I have only icon, not text.
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(MyFragment.newInstance(0));
adapter.addFragment(MyFragment.newInstance(1));
adapter.addFragment(new DifferentFragment());
adapter.addFragment(new TestFragment());
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = 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) {
mFragmentList.add(fragment);
}
#Override
public CharSequence getPageTitle(int position) {
return null;
}
}
my_activity.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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</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.CoordinatorLayout>

As you can see in the Documentation setOffscreenPageLimit
Inside your function setupViewPager(ViewPager viewPager) add this:
viewPager.setOffscreenPageLimit(limitNumberOfPages); //before setAdapter
viewPager.setAdapter(adapter);
And the limitNumberOfPages is an int that contains the amount of pages that can be scrolled without reloading the fragments. If you have 4 tabs, you should use:
int limitNumberOfPages = 3;
The default number for this property is 1.

I solved it by myself
Simple, use:
viewPager.setOffscreenPageLimit(numberOfPages);
From reference: Set the number of pages that should be retained to either side of the current page in the view hierarchy in an idle state.
In my case, I need 3 pages that should be retained.

ViewPager holds Fragments left and/or right of the selected Tab.
This is needed for fast animating tab change.
You can keep references of your Fragments in Your Activity, but this references can be null.

Scrolling fragment should collapse toolbar

I have the following program, in which I want to add a collapsing toolbar. It is a tab-layout, with multiple fragments attached.
XML File
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabContentStart="72dp" />
</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.CoordinatorLayout>
JAVA File
public class Competitions extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = getIntent();
setContentView(R.layout.competition);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Competitions");
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new IntChal(), "International Challenges");
adapter.addFragment(new XMach(), "Xtreme Machines");
adapter.addFragment(new TVoltz(), "Technovoltz");
adapter.addFragment(new Robotron(), "Robotron");
adapter.addFragment(new Dimensions(), "Dimensions");
adapter.addFragment(new Tinker(), "Tinkerer");
adapter.addFragment(new Aero(), "Aerostrike");
adapter.addFragment(new Lamp(), "Solar Urja Lamp");
viewPager.setAdapter(adapter);
}
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);
}
}
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
onBackPressed();
return true;
}
return super.onOptionsItemSelected(item);
}
}
I had tried this before, but when I replaced my toolbar with a collapsing toolbar, all that happened that it would collapse if I scroll the toolbar portion. What I require is that on scrolling the fragment down, the toolbar should collapse. How do I do that.
P.S. I am a beginner , so please explain why your solution works.
EDIT
Okay, what I want is that when I scroll the fragment, the toolbar should collapse on it's own. With the following solutions, what is happening is that I have to manually first collapse the toolbar , and then scroll through the fragment, which is not what I want. Please help me do the same

Try to create Scrolling Activity project in android studio. Which gives you a collapsing toolbar. Steps: Android studio -> Add New Project -> Give project details -> in step Add an activity to mobile select Scrolling Activity . Done

Change your toolbar like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
See example here at 'https://github.com/chrisbanes/cheesesquare' for more reference, it is working fine for me. i hope it can help you.

seem your layout is correct, refer this tutorial it will help you to achieve your goal.
Update:
Adding app:layout_scrollFlags="scroll|enterAlways" to toolbar will resolve your issue.