Develop Reference

Tabs in TabLayout aren't available for click

I've got simple tabLayout within Fragment file which is CoordinatorLayout.
It works good, when user swipes, different Fragments are displayed.
The problem is, tabs aren't respond for clicking, user cannot select particular tab,it has oportunity to swipe only
Below I launch files containing XML, ViewPager2 adapter, and Fragment.java in which I've implemented mechanism for swiping.
For global, in MainActivity I've implemented toolbar, that's why in Fragment's TabLayout I'm using margin top 50dp.
I also lunch its code.
<androidx.coordinatorlayout.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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainFragment">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.MyApp.TabLayout"
android:layout_marginTop="56dp"
android:layout_below="#+id/toolbar"
app:tabMode="fixed" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end|right">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/minusFab"
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_remove_circle_outline_24px"
app:layout_constraintEnd_toEndOf="#id/plusFab"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/plusFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_marginTop="20dp"
android:layout_marginBottom="24dp"
android:src="#drawable/ic_add_circle_outline_24px"
app:layout_constraintBottom_toTopOf="#+id/mainFab"
app:layout_constraintEnd_toEndOf="#+id/mainFab"
app:layout_constraintTop_toBottomOf="#+id/minusFab" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/mainFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:src="#drawable/ic_expand_less_24px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I've configured all mechanisms responsible for tabs logic:
public class ViewPagerAdapter extends FragmentStateAdapter {
public ViewPagerAdapter(#NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
#NonNull
#Override
public Fragment createFragment(int position) {
switch (position)
{
case 0: return new FirstFragment();
case 1: return new SecondFragment();
case 2: return new ThirdFragment();
default:
return null;
}
}
#Override
public int getItemCount() {
return 3;
}
}
And implementation in Fragment.Java
public class MainFragment extends Fragment {
public MainFragment() {
// Required empty public constructor
}
#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_main, container, false);
ViewPager2 viewPager2 = view.findViewById(R.id.viewPager);
viewPager2.setAdapter(new ViewPagerAdapter(getActivity()));
TabLayout tabLayout = view.findViewById(R.id.tab_layout);
TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
#Override
public void onConfigureTab(#NonNull TabLayout.Tab tab, int position) {
switch (position){
case 0: tab.setText("First");
break;
case 1: tab.setText("Second");
break;
case 2: tab.setText("Third");
break;
}
}
}
);
tabLayoutMediator.attach();
// Inflate the layout for this fragment
return view;
}
}
MainActivity Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.FragmentsWithTabs.AppBarOverlay"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.FragmentsWithTabs.PopupOverlay">
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/color_mode_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|end"
android:text="Switch here"
android:textAppearance="#style/TextAppearance.AppCompat.Small" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph"
tools:layout_editor_absoluteX="127dp"
tools:layout_editor_absoluteY="297dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

You have to add listener on tablayout to listen tab select event. Like,
tabLayout.setupWithViewPager(viewPager);
tabLayout.setOnTabSelectedListener(
new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
#Override
public void onTabSelected(TabLayout.Tab tab) {
//here you can write code to change page of viewpager based on tab id.
// like, viewpager.setCurrentItem(0);
}
});

Finally I've came with an answer. In this situation, ViewPager2 was expanded on all screen hence overlapping clicks on TabLayout :)
So solution was simple, now MainFragment's ViewPager2 code looks like follows:
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="629dp"
android:layout_gravity="bottom"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

Recycler view inside Tab layout giving null point exception

I have this activity_category having a tabLayout. Inside Others tab I have a recyclerView which displays items from firebase like blog post example but I do not have Images, it is having only text views. It throws a null point exception even if I am initializing recyclerView inside OnCreate method
This is my activity_category
<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:id="#+id/main_content"
tools:context="com.solution.engineering.docket_ereceipt.CategoryActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:layout_weight="1"
app:title="Categories">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
<android.support.design.widget.TabItem
android:id="#+id/tabItemHardware"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hardware" />
<android.support.design.widget.TabItem
android:id="#+id/tabItemStationary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stationary" />
<android.support.design.widget.TabItem
android:id="#+id/tabItemOthers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Others" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
Inside one of the tab item (i.e others) I have the RecyclerView which looks like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relativeOthers">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/othersRecycler"
app:layoutManager="android.support.v7.widget.LinearLayoutManager">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
Java file of activity_catagory uses switch cases to switch between tabs. This is small piece of code how its calling layouts from switch case
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
viewOthers tab6 = new viewOthers();
return tab6;
default:
return null;
}
}
The java file viewOthers() looks like this
public class viewOthers extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.others_layout, container, false);
return rootView;
}
}
I initialize recyclerView here in CategoryActivity.java
public class CategoryActivity extends AppCompatActivity {
public SectionsPagerAdapter mSectionsPagerAdapter;
private RecyclerView mReceipt;
private DatabaseReference mRef;
public ViewPager mViewPager;
public int extrasPosition;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_category);
//NOW HERE IT SHOWS NULL POINT EXCEPTION
mReceipt = (RecyclerView)findViewById(R.id.othersRecycler);
mReceipt.setHasFixedSize(true);
mReceipt.setLayoutManager(new LinearLayoutManager(this));
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
//display the desired fragment
mViewPager.setCurrentItem(extrasPosition);
}
I don't understand why? Any help is appreciated. Thanks in advance.

Replacing ViewPager with new fragment

I have an app where my MainActivity has a viewpager and TabLayout with three fragments (fragments a,b, and c). I have a menu item when selected I want to open a new separate fragment (fragment d) to overlap my viewpager an tablayout. When I click on my menu option fragment d appears but fragment a, b, or c is still in the background.
What is happening
What I want to do
MainActivity.Java
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawer;
private Toolbar toolbar;
private NavigationView nvDrawer;
private ViewPager viewPager;
private TabLayout tabLayout;
private ActionBarDrawerToggle drawerToggle;
private static String TAG = "MainActivity";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
BookShelfPagerAdapter bookShelfPagerAdapter = new BookShelfPagerAdapter(getApplicationContext(), getSupportFragmentManager());
viewPager.setAdapter(bookShelfPagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_book_list, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
case R.id.action_discover:
Fragment discoverFragment = new DiscoverFragment();
this.getSupportFragmentManager()
.beginTransaction()
.add(R.id.flContent, discoverFragment)
.addToBackStack(null)
.commit();
return true;
return super.onOptionsItemSelected(item);
}
}
XML Layout: MainAcitvity
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The main content view where fragments are loaded -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
<!-- The navigation drawer that comes from the left --><!-- Note that `android:layout_gravity` needs to be set to 'start' -->
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>

Change this line .add(R.id.flContent, discoverFragment) to .replace(R.id.flContent, discoverFragment)
PS: How about using Activity instead of Fragment?

So it turns out I can use an activity and I did that instead of a fragment!

android Tablayout inside navigation fragment ActionBarDrawerToggle icon not there

navigation drawer with fragments
1 - home
2 - courses
3 - gallery
i created 3 fragments for home,courses,gallery resp.
when app open home fragment is going to show
when i click on courses from navigation drawer coursesFragment will open within this fragment i created tab layout and tab layout is showing correctly as i needed, but drawer toggle icon is not there but drawer is opening when i pull it from left side
MainActivity.java :
public class MainActivity extends AppCompatActivity {
DatabaseHelper databaseHelper;
protected DrawerLayout drawerLayout;
ActionBarDrawerToggle actionBarDrawerToggle;
Toolbar toolbar;
FragmentTransaction fragmentTransaction;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
drawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close);
drawerLayout.setDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();
fragmentTransaction=getSupportFragmentManager().beginTransaction();
fragmentTransaction.add(R.id.main_container,new HomeFragment());
fragmentTransaction.commit();
getSupportActionBar().setTitle("Home fragment");
NavigationView navigationView= (NavigationView) findViewById(R.id.navview);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener()
{
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId())
{
case R.id.Home:
fragmentTransaction=getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.main_container,new HomeFragment());
fragmentTransaction.commit();
getSupportActionBar().setTitle("Home fragment");
item.setChecked(true);
break;
case R.id.gallery:
fragmentTransaction=getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.main_container,new GalleryFragment());
fragmentTransaction.commit();
getSupportActionBar().setTitle("gallery fragment");
item.setChecked(true);
break;
case R.id.courses:
fragmentTransaction=getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.main_container,new CoursesFragment());
fragmentTransaction.commit();
getSupportActionBar().setTitle("courses fragment");
item.setChecked(true);
break;
}
drawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
});
}
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
tools:context="com.navdrawer.navdrawer.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"/>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_container">
</FrameLayout>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navview"
android:layout_gravity="start"
app:menu="#menu/drawer_menu"
app:headerLayout="#layout/navigation_drawer_header"
android:scrollbars="vertical"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="-20dp"
android:layout_marginLeft="-20dp"
android:layout_gravity="bottom"
android:src="#drawable/iso_main1"
/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
CoursesFragment.java :
public class CoursesFragment extends Fragment {
public CoursesFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view= inflater.inflate(R.layout.fragment_courses, container, false);
Toolbar toolbar=(Toolbar)view.findViewById(R.id.toolbar);
((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
((AppCompatActivity)getActivity()).getSupportActionBar().setTitle("Download");
TabLayout tabLayout=(TabLayout)view.findViewById(R.id.courses_tabl);
ViewPager viewPager=(ViewPager)view.findViewById(R.id.courses_viewpager);
ViewpagerAdapter viewpagerAdapter=new ViewpagerAdapter(getChildFragmentManager());
viewpagerAdapter.addFragments(new DownloadFragment(),"Download");
viewpagerAdapter.addFragments(new AlreadyDownlodedFragment(),"Downloaded");
viewPager.setAdapter(viewpagerAdapter);
tabLayout.setupWithViewPager(viewPager);
return view;
}
fragment_courses.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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.navdrawer.navdrawer.CoursesFragment">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/courses_appbar_layout"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"
/>
</LinearLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/courses_tabl"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/courses_viewpager"
>
</android.support.v4.view.ViewPager>
</FrameLayout>
here is my fragment_gallery.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.navdrawer.navdrawer.GalleryFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Gallery"
android:gravity="center"
android:textSize="30sp"
/>
</FrameLayout>
GalleryFragment:
public class GalleryFragment extends Fragment {
public GalleryFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_gallery, container, false);
}
}
here is screenshots :

Can i see Gallery fragment's xml ?
BTW, why are you using a toolbar again in your courses fragment ?
This must be the issue.. Remove the toolbar from there as it must be overriding the parent activity's toolbar.
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.navdrawer.navdrawer.CoursesFragment">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/courses_tabl"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"/>
<android.support.v4.view.ViewPager
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/courses_viewpager"/>
This is what you need here
Also make this change in your main_activity.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"/>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_container">
</FrameLayout>

You can set Home button as follows
getSupportActionBar().setHomeButtonEnabled(true);
add this line after setSupportActionBar(toolbar);
If you want set your Custom Icon then you can set as follows
toolbar.setNavigationIcon(R.drawable.myhome);//pass id of your navigation icon

Android Fragments Not Being replaced

I am new to fragments and running into some trouble with my navigation bar fragments. I have set up the navigation bar fine, when I select a item from the navigation the layout is inflated fine but the old layout doesnt disappear and is left sitting either ontop or underneath then new layout.
The new layout should have the toolbar and navigation drawer fragment but not the tabs and their layout.
Can anyone explain where I have goen wrong?
Main Activity Creating Tabbed layout & Nav itemSelected
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
drawerFragment = (FragmentDrawer) getFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), toolbar);
drawerFragment.setDrawerListener(this);
}
private void setupTabIcons() {
int[] tabIcons = {
R.drawable.ic_tab_list,
R.drawable.ic_tab_shopping,
R.drawable.ic_tab_add,
R.drawable.ic_tab_search
};
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 PossibleRecipes(), "ONE");
adapter.addFrag(new ShoppingList(), "TWO");
adapter.addFrag(new AddRecipe(), "THREE");
adapter.addFrag(new SearchRecipes(), "FOUR");
viewPager.setAdapter(adapter);
}
#Override
public void onDrawerItemSelected(View view, int position) {
Fragment fragment = null;
String title = getString(R.string.app_name);
switch (position) {
case 0:
//fragment = new HomeFragment();
//title = getString(R.string.title_home);
//break;
case 1:
fragment = new FavouritesFragment();
title = getString(R.string.title_favourites);
break;
case 2:
fragment = new HelpFragment();
title = getString(R.string.title_help);
break;
default:
break;
}
if (fragment != null) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.drawer_layout, fragment);
fragmentTransaction.commit();
// set the toolbar title
getSupportActionBar().setTitle(title);
}
}
Main Activty.XML
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout2">
<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" />
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</android.support.design.widget.CoordinatorLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:name="com.example.rory.pocketchef.FragmentDrawer"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
One of the Navigation drawer XMLs (HELP.XML)
<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"
android:orientation="vertical"
tools:context="info.androidhive.materialdesign.activity.HomeFragment">
<TextView
android:id="#+id/label"
android:layout_alignParentTop="true"
android:layout_marginTop="100dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="45dp"
android:text="HOME"
android:textStyle="bold"/>
<TextView
android:layout_below="#id/label"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="12dp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="Edit fragment_home.xml to change the appearance" />
</RelativeLayout>

In OnDrawerItemSelected you set fragment = new FavouritesFragment(); or fragment = new HelpFragment();. So below that you should probably do;
if (fragment != null) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.container, fragment); //Here was the error. container is a FrameLayout
fragmentTransaction.commit();
// set the toolbar title
getSupportActionBar().setTitle(title);
}
Note that this line fragmentTransaction.replace(R.id.drawer_layout, new FavouritesFragment()); was edited.
Also, note that container_body has a height of 0dp and layout_weight doesn't work in FrameLayout which the CoordinatorLayout extends... The ViewPager is set to fill_parent as well.
I don't understand the purpose of container_body in your UI... What is it supposed to do? Where should it appear?