> My activity_main.xml looks like this:

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/toolbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/content_frame"/> </LinearLayout> <!--Second child layout--> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="start" app:headerLayout="@layout/navigation_drawer_header" app:menu="@menu/drawer_menu"> </android.support.design.widget.NavigationView>
> My BaseActivity.java looks like this:
package com.example.test; import android.content.Intent; import android.os.Bundle; import android.support.design.widget.NavigationView; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.MenuItem; public class BaseActivity extends AppCompatActivity { DrawerLayout drawerLayout; ActionBarDrawerToggle actionBarDrawerToggle; Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view); 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_closed); drawerLayout.setDrawerListener(actionBarDrawerToggle); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menu_home: Intent anIntent = new Intent(getApplicationContext(), TheClassYouWantToLoad.class); startActivity(loadPlayer); drawerLayout.closeDrawers(); break; } return false; } }); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); actionBarDrawerToggle.syncState(); } }
> Now, within the onNavigationItemSelected method, there is a switch statement that handles what happens when each menu item is selected. This is the important bit:

Intent anIntent = new Intent(getApplicationContext(), TheClassYouWantToLoad.class); startActivity(anIntent); drawerLayout.closeDrawers();
> You need to replace "TheClassYouWantToLoad" with your own class. Now within this new class (which presumably requires some new UI elements to be loaded), you need the following:


public class TheClassYouWantToLoad extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); FrameLayout contentFrameLayout = (FrameLayout) findViewById(R.id.content_frame); //Remember this is the FrameLayout area within your activity_main.xml getLayoutInflater().inflate(R.layout.the_layout_you_want_to_load, contentFrameLayout); } }
> and replace "the_layout_you_want_to_load" with the name of the Layout you want to load.

You can also use Tab Layout with custom tab view to achieve this.
**custom_tab.xml**
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:gravity="center" android:orientation="vertical" android:paddingBottom="10dp" android:paddingTop="8dp"> <ImageView android:id="@+id/icon" android:layout_width="24dp" android:layout_height="24dp" android:scaleType="centerInside" android:src="@drawable/ic_recents_selector" /> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:maxLines="1" android:textAllCaps="false" android:textColor="@color/tab_color" android:textSize="12sp"/> </LinearLayout>
**activity_main.xml**
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" style="@style/AppTabLayout" android:layout_width="match_parent" android:layout_height="56dp" android:background="?attr/colorPrimary" /> </LinearLayout> **MainActivity.java**
public class MainActivity extends AppCompatActivity { private TabLayout mTabLayout; private int[] mTabsIcons = { R.drawable.ic_recents_selector, R.drawable.ic_favorite_selector, R.drawable.ic_place_selector}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Setup the viewPager ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager); MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(pagerAdapter); mTabLayout = (TabLayout) findViewById(R.id.tab_layout); mTabLayout.setupWithViewPager(viewPager); for (int i = 0; i < mTabLayout.getTabCount(); i++) { TabLayout.Tab tab = mTabLayout.getTabAt(i); tab.setCustomView(pagerAdapter.getTabView(i)); } mTabLayout.getTabAt(0).getCustomView().setSelected(true); } private class MyPagerAdapter extends FragmentPagerAdapter { public final int PAGE_COUNT = 3; private final String[] mTabsTitle = {"Recents", "Favorites", "Nearby"}; public MyPagerAdapter(FragmentManager fm) { super(fm); } public View getTabView(int position) { // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null); TextView title = (TextView) view.findViewById(R.id.title); title.setText(mTabsTitle[position]); ImageView icon = (ImageView) view.findViewById(R.id.icon); icon.setImageResource(mTabsIcons[position]); return view; } @Override public Fragment getItem(int pos) { switch (pos) { case 0: return PageFragment.newInstance(1); case 1: return PageFragment.newInstance(2); case 2: return PageFragment.newInstance(3); } return null; } @Override public int getCount() { return PAGE_COUNT; } @Override public CharSequence getPageTitle(int position) { return mTabsTitle[position]; } } }
[Download Complete Sample Project][1]

[1]: https://github.com/waleedsarwar86/BottomNavigationDemo