Multiple Tab fragments inside bottom navigation fragment

Question

In bottom navigation with three tabs (Home, Dashboard, Notifications). Each bottom navigation tab is a fragment. The first tab ie. Home fragment contains another top navigation tabs having four tabs (Tab 1, Tab 2, Tab 3, Tab 4).

The problem

1. When navigate from Home tab to Notifications tab directly and come back to Home tab, Tab1/which ever tab previously selected tab (top navigation tabs) the content of the tab is not loaded.

2. When swipe the tabs from Tab 1 (Home fragment tab) all the way to Notification tab and swipe back, on reaching the Tab 4 the content of the tab is not loaded and on first swipe from Tab 4 to Tab 3 the swipe does not take to Tab 3. The tab indicator just move a little and on second swipe it goes to Tab 3 as expected.

The app contains a lot of code so I'll just link the full code to Github.

For quick reference here are my codes

MainActivity.java

public class MainActivity extends AppCompatActivity {


    private ViewPager viewPager;

    NavigationView navigationView;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    viewPager.setCurrentItem(0);
                    return true;
                case R.id.navigation_dashboard:
                    viewPager.setCurrentItem(1);
                    return true;
                case R.id.navigation_notifications:
                    viewPager.setCurrentItem(2);
                    return true;
            }
            return false;
        }

    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Hide the activity toolbar
        getSupportActionBar().hide();

        //Initializing viewPager
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);


        final BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        navigation.setSelectedItemId(R.id.navigation_home);
                        break;
                    case 1:
                        navigation.setSelectedItemId(R.id.navigation_dashboard);
                        break;
                    case 2:
                        navigation.setSelectedItemId(R.id.navigation_notifications);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


    }

    private void setupViewPager(ViewPager viewPager) {
        BottomNavPagerAdapter adapter = new BottomNavPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FirstFragment());
        adapter.addFragment(new SecondFragment());
        adapter.addFragment(new ThirdFragment());
        viewPager.setAdapter(adapter);
    }

}

FirstFragment.java (Home)

public class FirstFragment extends Fragment {


    private TabLayout tabLayout;
    private ViewPager firstViewPager;

    public FirstFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        View rootView = inflater.inflate(R.layout.fragment_first, container, false);

        firstViewPager = (ViewPager) rootView.findViewById(R.id.viewpager_content);

        tabLayout = (TabLayout) rootView.findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(firstViewPager);

        setupViewPager(firstViewPager);
        return rootView;
    }

    private void setupViewPager(ViewPager viewPager) {
        TabViewPagerAdapter adapter = new TabViewPagerAdapter(getActivity().getSupportFragmentManager());
        adapter.addFragment(new Tab1Fragment(), "Tab 1");
        adapter.addFragment(new Tab1Fragment(), "Tab 2");
        adapter.addFragment(new Tab1Fragment(), "Tab 3");
        adapter.addFragment(new Tab1Fragment(), "Tab 4");
        viewPager.setAdapter(adapter);
    }
}

Questions

1. What's wrong in code ?
2. How to solve this issues? (The layout is a requirement) or is there any better approach to come up with the layout from the screenshot?

Answer 1

Actually, it is a common mistake - you're using FragmentManager of your Activity inside the fragment, but since this fragment contains another child fragments you have to use FragmentManager of the fragment itself. So the fix is simple - you just have to change getActivity().getSupportFragmentManager() to getChildFragmentManager() inside your fragments, so the code will be:

private void setupViewPager(ViewPager viewPager) {
    TabViewPagerAdapter adapter = new TabViewPagerAdapter(getChildFragmentManager());
    ...
    ...
    viewPager.setAdapter(adapter);
}

And this should work as expected.