Launching new fragment from fragment in tab layout

问题:

So I have implemented Tab layout with ViewPager in my app. Each tab shows a fragment. Now I want to open a new fragment(lets call it B) from one of these fragments in the tab layout(lets call it A). So A is in tab layout but I want B to take up whole screen. I am even able to do it but I am facing little problem. The new fragment doesn't take up the whole screen. Instead it just replaces the previous fragment, and it looks like it was a part of the tab layout.

This is the layout of the fragment A (from which I launch the new fragment).

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

        <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:dividerHeight="0dp" />
    </FrameLayout>

</LinearLayout>

In the class of fragment A, I launch new fragment using theses lines,

Bundle bundle = new Bundle();
FragmentTransaction fragmentTransaction = getActivity()
           .getSupportFragmentManager()
           .beginTransaction();
Fragment fragmentB = new FragmentB();
fragmentB.setArguments(bundle);
fragmentTransaction.replace(R.id.parent, fragmentB);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();

Also my main activity, the one that these fragments are attached to implements tavLayout using viewPager.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/tab_layout"/>

I end up seeing a new fragment (the fragment B) but as a part of the Tab Layout while I want to hide the tab layout. Please help me, I went through many SO questions but I felt that I am doing some thing wrong as they didn't work for me. Thanks !!

回答1:

I think a better way would be to remove the TabLayout and ViewPager from the Activity and put them inside a top level level Fragment. Inside this top level fragment use the ChildFragmentManager to populate the ViewPager.

This way whenever you want to launch a new Fragment(B in your case) from any of the existing fragments then you can use your Activity's FrameLayout container to replace this whole ViewPager and TabLayout containing Fragment(A in your case) with a brand new Fragment(B). As the Activity does not contain the ViewPager and the Tablayout, they wont be visible in your new Fragment.

Have a look at this answer for a similar approach - https://stackoverflow.com/a/29315649/4440874

Activity structure should be like this -

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

Fragment A layout -

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/tab_layout"/>

回答2:

I'm assuming that you are successfully being able to replace from FragA to FragB.

My suggestion is -> put your TabLayout into AppBarLayout,set properties of your AppBarLayout as android:animateLayoutChanges="true".

Later programmatically hide your TabLayout using setVisibility(View.GONE) when replacing your fragment from A->B.