title: Multiple Tab fragments inside bottom navigation fragment
body: <p>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).</p>
  
  <p><a href="https://i.stack.imgur.com/JuZKK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JuZKK.png" alt="enter image description here"></a></p>
  
  <p><strong>The problem</strong></p>
  
  <ol>
  <li><p>When  navigate from <strong>Home</strong> tab to <strong>Notifications</strong> tab directly and come back to <strong>Home</strong> tab, Tab1/which ever tab previously selected tab (top navigation tabs) the content of the tab is not loaded.</p></li>
  <li><p>When swipe the tabs from <strong>Tab 1</strong> (Home fragment tab) all the way to <strong>Notification</strong> tab and swipe back, on reaching the <strong>Tab 4</strong> the content of the tab is not loaded <em>and on first swipe from <strong>Tab 4</strong> to <strong>Tab 3</strong> the swipe does not take to <strong>Tab 3</strong>.</em> The tab indicator just move a little and on second swipe it goes to <strong>Tab 3</strong> as expected.</p></li>
  </ol>
  
  <p>The app contains a lot of code so I'll just link the full code to <a href="https://github.com/PuniCharana/sample-app.git" rel="noreferrer">Github</a>.</p>
  
  <p><strong>For quick reference here are my codes</strong></p>
  
  <p><em>MainActivity.java</em></p>
  
  <pre><code>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);
      }
  
  }
  </code></pre>
  
  <p>FirstFragment.java (Home)</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p><strong>Questions</strong></p>
  
  <ol>
  <li>What's wrong in code ?</li>
  <li>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?</li>
  </ol>