Android: Hide viewPager tabs when launching a fragment from one of the viewPager tab fragment

Question

I have a viewPager in my app which has several tabs. In some of the tabs, on clicking an item a new fragment is shown. I want this fragment to cover the tabs. Doing this is possible but the approaches don't look good to me.

1.) one way is that I add the newly created fragment to the activity using getSupportFragmentManager(). This solves the problem but doesn't look like a good idea as it will create problems when using back button etc.

2.) Other way is to hide the tabs manually using Visibilty.GONE but problem with this approach is that this hiding of the tabs is visible, I mean the animation could be seen and looks bad.

Is there a better approach to do this problem?

This is my code. "sub_fragment_container" is present in the activity xml, so I get an error java.lang.IllegalArgumentException: No view found for id 0x7f0e00ff (com.my.app:id/sub_fragment_container) for fragment DetailFragment{

FragmentTransaction fragmentTransaction = getChildFragmentManager()
                        .beginTransaction();
                Fragment profileFragment = new DetailFragment();
                profileFragment.setArguments(bundle);
                fragmentTransaction
                        .add(R.id.sub_fragment_container, profileFragment);
                fragmentTransaction.addToBackStack(null);
                fragmentTransaction.commit();

Answer 1

Use android:animateLayoutChanges="true" Or, to fine tune it further, here's a tested method that I've personally used in my app Newslet to solve the exact same problem.

1. Wrap your Toolbar and TabLayout within an AppBarLayout. This should be easy if you're aware of the Design Support Library. If not, this should get you started.

2. Add this piece of code in your onCreate():

   LayoutTransition layoutTransition = new LayoutTransition();
   layoutTransition.setDuration(200);
   layoutTransition.setStartDelay(LayoutTransition.CHANGE_APPEARING, 0);
   layoutTransition.setStartDelay(LayoutTransition.APPEARING, 0);
   layoutTransition.setStartDelay(LayoutTransition.DISAPPEARING, 0);
   layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);
   
   appBarLayout.setLayoutTransition(layoutTransition);
   

After this, when you remove the Tabs or add it back, the layout change will animate smoothly.

Hope this helped you!