Develop Reference

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

Viewpager, Tablayout and NavigationDrawer Issue

I am trying to use Viewpager and tablayout to create two tabs. Also I have a navigation drawer on the left. In the viewpager, I want to show two different fragments
Viewpager:-
1. HomeFragment
2. VideoCategoriesFragment
Fragment inside navigation drawer:- LibFinderFragment
In the navigation drawer when I click an item, I want to be able to replace the whole viewpager tabs and till it with another fragment say LibFinderFragment. Currently what I am getting is that HomeFragment from viewpager gets replaced by LibFinderFragment but if I have VideoCategoriesFragment tab selected in the viewpager, LibFinderFragment doesn't get replaced. I understand that probably the viewpager and tab layout need to be inside a fragment but I am not able to get this done. Following is my code
This is main activity code:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:app1="http://schemas.android.com/apk/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:background="#drawable/background_tabs_two"
app:tabGravity = "fill"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<android.support.v4.widget.DrawerLayout
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/apk/tools"
android:id="#+id/drawer_layout_mainhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app1:context="com.taureano.superjokes.MainHostActivity"
app1:openDrawer="start" >
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewpager_mainhost"
android:layout_width="match_parent"
android:layout_height="0dp" >
</android.support.v4.view.ViewPager>
<fragment
android:id="#+id/fragment_navigation_drawer_new"
android:name="com.taureano.superjokes.NavigationDrawerFragmentNew"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
ads:layout="#layout/fragment_navigation_drawer_new" />
</android.support.v4.widget.DrawerLayout>
<RelativeLayout
android:id="#+id/floatingButtonRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginBottom="50dp" >
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/btn_add_jokes"
app:backgroundTint="#212121"
app:borderWidth="0dp"
app:fabSize="normal"
app:rippleColor="#color/primaryColor" />
<com.github.fabtransitionactivity.SheetLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:elevation="2dp"
app:ft_color="#color/primaryColor"
app:ft_container_gravity="center" >
</com.github.fabtransitionactivity.SheetLayout>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
For the tabs in viewpager and tablayout, I am doing this:-
mPager = (ViewPager) findViewById(R.id.viewpager_mainhost);
setupViewPager(mPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.post(new Runnable() {
#Override
public void run() {
tabLayout.setupWithViewPager(mPager);
setupTabIcons();
}
});
tabLayout
.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabUnselected(Tab arg0) {
// TODO Auto-generated method stub
}
#Override
public void onTabSelected(Tab tab) {
mPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabReselected(Tab arg0) {
// TODO Auto-generated method stub
}
});
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapterDesignLib adapter = new ViewPagerAdapterDesignLib(
getSupportFragmentManager());
home = new HomeFragment(this);
adapter.addFrag(home, "Text");
adapter.addFrag(new VideoCategoriesFragment(this), "Video");
viewPager.setAdapter(adapter);
}
// For showing navigation drawer
NavigationDrawerFragmentNew drawerFragment = (NavigationDrawerFragmentNew) getSupportFragmentManager()
.findFragmentById(R.id.fragment_navigation_drawer_new);
drawerFragment.setUp(R.id.fragment_navigation_drawer_new,
(DrawerLayout) findViewById(R.id.drawer_layout_mainhost), toolbar);
Inside the navigation drawer I have a recycler view with OnItemClicked
#Override
public void itemClicked(View view, int position) {
FragmentManager fm = getFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
Intent j = new Intent(getActivity(), ExtrasActivity.class);
switch(position){
case 0:
ft.replace(R.id.home_layout, new HomeFragment(getActivity())).commit();
break;
case 1:
ft.replace(R.id.home_layout, new AboutUs(getActivity())).commit();
break;
case 2:
ft.replace(R.id.home_layout, new LibFinder(getActivity())).commit();
break;
}
mDrawerLayout.closeDrawers();
}

Create both sided drawer with customization

I want to create drawer on both sided. Below is the images :-
I have created the left drawer successfully.
Below is the code :
private FragmentDrawer drawerFragment;
private DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerFragment = (FragmentDrawer) getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), toolbar);
drawerFragment.setDrawerListener(this);
displayView(0);
}
#Override
public void onDrawerItemSelected(View view, int position) {
displayView(position);
}
private void displayView(int position) {
Fragment fragment = null;
String title = getString(R.string.app_name);
switch (position) {
case 0:
fragment = new HomeFragment();
title = getString(R.string.title_dashboard);
break;
case 8:
AppSharedPreference.getInstance(HomeActivity.this).setLogin(false);
startActivity(new Intent(HomeActivity.this, LoginIcoachActivity.class));
finish();
break;
}
if (fragment != null) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.container_body, fragment);
fragmentTransaction.commit();
// set the toolbar title
getSupportActionBar().setTitle(title);
}
}
}
XML File :-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<include android:id="#+id/home"
layout="#layout/content_home"/>
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:name="fragment.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" />
I have follow the below link :-
android hive
Please help me to achieve this.

You can add a second drawer the same way as the first one, just use android:layout_gravity="end".

Try below code in your XML:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<include android:id="#+id/home"
layout="#layout/content_home"/>
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:name="fragment.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" />
<fragment
android:id="#+id/fragment_navigation_drawer_right"
android:name="fragment.FragmentDrawer" // some other fragment
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="end"
app:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
In your activity, get fragment instance using fragment_navigation_drawer_right id.

Custom ImageView button not working in Toolbar

I am using v7 Toolbar for ActionBar. I am using a ToggleButton in Toolbar with images. I cannot capture any click events on Toolbar neither ToggleButtonnor Navigation Drawer button.
Here is my code (OnCreate method):
#Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.home_screen);
mToolbar = (Toolbar)findViewById(R.id.toolbar);
tv_on= (TextView) findViewById(R.id.tv_on);
toggleButton= (ImageView)findViewById(R.id.toggle);
if (mToolbar != null) {
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
drawerFragment = (FragmentDrawer)
getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
drawerFragment.setDrawerListener(this);
// displayView(0);
tv_on.setText("OFF");
checked=false;
android.app.FragmentManager fragmentManager = getFragmentManager();
android.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
FragmentOff off = new FragmentOff();
fragmentTransaction.add(R.id.fragment_container, off, "HELLO");
fragmentTransaction.commit();
toggleButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (checked == false) {
tv_on.setText("ON");
android.app.FragmentManager fragmentManager = getFragmentManager();
android.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
FragmentOff off = new FragmentOff();
fragmentTransaction.add(R.id.fragment_container, off, "HELLO");
fragmentTransaction.commit();
checked = true;
} else {
tv_on.setText("ON");
android.app.FragmentManager fragmentManager = getFragmentManager();
android.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
FragmentOn on = new FragmentOn();
fragmentTransaction.add(R.id.fragment_container, on, "HELLO");
fragmentTransaction.commit();
}
}
});
Toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:local="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#D92027"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/work_status"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/toggle"
android:layout_toStartOf="#+id/toggle"
android:layout_marginRight="16dp"
android:id="#+id/tv_work" />
<ImageView
android:id="#+id/toggle"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/off"
android:layout_marginRight="35dp"
android:layout_marginEnd="35dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_on"
android:text="#string/off"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="5dp"
android:textColor="#ffffff"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
home_screen.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
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">
<include
layout="#layout/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/toolbar"/>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/fragment_navigation_drawer"
android:name="com.webninjaz.fragment.FragmentDrawer"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
Can anyone please point out what I am doing wrong. Even I can't debug onClickListener.

You can put image and button inside toolbar you need to use AppBar layout
http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/
Please refer this link.Hope its works.

please change from
mToolbar = (Toolbar)findViewById(R.id.toolbar);
tv_on= (TextView) findViewById(R.id.tv_on);
toggleButton= (ImageView)findViewById(R.id.toggle);
to
mToolbar = (Toolbar)findViewById(R.id.toolbar);
tv_on= (TextView) mToolbar.findViewById(R.id.tv_on);
toggleButton= (ImageView)mToolbar.findViewById(R.id.toggle);

Thanks everyone for help but I re-implemented my navigation drawer and toolbar and now everything is working fine.This was probably a bug with navigation drawer template provided by Android Studio