How to code ViewPagers inside Items of BottomNavigationMenu as we have in Google+, Reddit, Quora app?

Question

I am trying to achieve a layout like this by using Fragments as Items of BottomNavigationMenu and inside those Fragment, I am using ViewPager.

But I am getting layout errors like this.

This is the code

getSupportFragmentManager().beginTransaction().add(R.id.fragment_frame, searchPropertyFragment).commit();
    bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            int id = item.getItemId();
            switch (id){
                case R.id.bottom_menu_properties:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new SearchPropertyFragment).commit();
                    break;
                case R.id.bottom_menu_chat:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new ChatFragment).commit();
                    break;
                case R.id.bottom_menu_profile:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new ProfileFragment).commit();
                    break;
                case R.id.bottom_menu_notifications:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame, new NotificationFragment).commit();
                    break;
            }
            return true;
        }
    });

This is the viewPager code inside SearchPropertyFragment

titlesList.clear();
fragmentsList.clear();
titlesList.add("Featured");
titlesList.add("Yours");
titlesList.add("Following");
fragmentsList.add(new FeaturedFragment());
fragmentsList.add(new YoursFragment());
fragmentsList.add(new FollowingFragment());
pagerAdapter = new PagerAdapter(getActivity().getSupportFragmentManager(), 
titlesList, fragmentsList);
viewpager.setAdapter(pagerAdapter);
tabs.setupWithViewPager(viewpager);

What is the proper approach to get this layout.

Answer 1

Use FrameLayout and BottomNavigationView inside DrawerLayout where FrameLayout is the container for the fragment which contains the ViewPager.

This is the layout of the DrawerLayout

<?xml version="1.0" encoding="utf-8"?>
<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/main_content"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/fragment_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!--This is where the fragment will be placed-->

        </FrameLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/navigationItemBackground"
            app:itemIconTint="@color/navigationItemIcon"
            app:itemTextColor="@color/navigationItemtext"
            app:menu="@menu/potential_tenant_menu"
            android:layout_alignParentStart="true" />

    </android.support.design.widget.CoordinatorLayout>

</android.support.v4.widget.DrawerLayout>

This is the fragment which will be placed in the FrameLayout

<?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: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="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways"
            app:layout_collapseMode="pin"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </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>