Change between fragment navigation drawer viewpagerindicator

Question

I have a Navigation Drawer and a ViewPagerIndicator inside the content_frame. I want to change between fragment`s from the navigation drawer but the problem is that switch between tabs ViewPager works but when I switch to another option that you have to remove the ViewPager and put a new fragment puts this fragment under the ViewPager.

Attached photo so you can see.

1) Here you can already see the new fragment below ViewPager.It can be distinguished by the text shown is Prueba

Attached code

Activity_main.xml

<android.support.v4.widget.DrawerLayout   
 xmlns:android="http://schemas.android.com/apk/res/android"    
 android:id="@+id/drawer_layout"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">

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

    <LinearLayout 
        android:id="@+id/content_linear"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <com.viewpagerindicator.TabPageIndicator
            android:id="@+id/indicator"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    </LinearLayout>

</FrameLayout>

<ListView 
 android:id="@+id/left_drawer"
 android:layout_width="240dp"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp"
 android:background="#111"/>

Method for switching between fragment.

   /** Main content by replacing fragments
 * @param position
 */
private void selectItem(int position) {
    //Code
    Fragment fragment = new TryFragment();
    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

    switch (position) {
    case 0:
        mPager.setCurrentItem(0);
        break;

    case 1:
        mPager.setCurrentItem(1);
        break;

    case 2:

        ft.replace(R.id.content_frame, fragment);

        break;

    }        
    ft.commit();
    mAdapter.notifyDataSetChanged();
    //Close drawer
    mDrawerLayout.closeDrawer(mDrawerList);
}

Class TryFragment

    class TryFragment extends Fragment
{
    public static final String  ARG_PLANET_NUMBER   = "planet_number";

    public TryFragment()
    {
        // Empty constructor required for fragment subclasses
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
           TextView text = new TextView(getActivity());
            text.setGravity(Gravity.CENTER);
            text.setText("Prueba");
            text.setTextSize(20 * getResources().getDisplayMetrics().density);
            text.setPadding(20, 20, 20, 20);

            LinearLayout layout = new LinearLayout(getActivity());
            layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
            layout.setGravity(Gravity.CENTER);
            layout.addView(text);

            Log.d("TestFragment", "Estoy en el fragment");

            return layout;
    }
}

I do not know if I have to destroy the viewpager to show the new fragment or a problem of hierarchy in the xml.

Answer 1

Your ViewPager must be Fragment, and it should be placed to layout.content_frame, so when you calling ft.replace(R.id.content_frame, fragment); your ViewPager fragment will be replaced.

Answer 2

You should not use ViewPager and NavigationDrawer at the same time. You can see Roman Nurik's answer in this G+ post: https://plus.google.com/u/1/+DavidTaSmoochibi/posts/8dWEkFcbTFX

"You shouldn't use navigation drawers with action bar tabs. If you're aiming for a UI similar to that of Google Play Music, you should implement tabs manually (and beware of how this looks on tablet—you don't want full-width tab bars on tablets). Also make sure to check out the Structure in Android App Design session from this year's Google I/O for a detailed run-through of the various interface patterns available for exposing app hierarchy."