无法替换viewpager中的片段

Question

I've been trying to replace the current fragment with another one when an item on the list view has been pressed. However when the button is pressed, the onClick method is fired but it does not replace the fragment.

JournalFragment.java

 public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        rootView = inflater.inflate(R.layout.fragment_journal_view, container, false);
        context = getContext();
        ListView myView = (ListView) rootView.findViewById(R.id.listView);

        TableControllerUser TCU = new TableControllerUser(context);
        final TableControllerJournal TCJ = new TableControllerJournal(context);


        int accID = TCU.getLoggedInId();
        Cursor cursor = TCJ.getAllJournals(accID);
        Cursor allFood = TCJ.getAllFoodJournals(accID);
        Cursor allActivity = TCJ.getAllActivityJournals(accID);
        Cursor[] cursors = {cursor, allFood, allActivity};

        MergeCursor m = new MergeCursor(cursors);

        final JournalAdapter adapter = new JournalAdapter(context, m, 0);

        myView.setAdapter(adapter);

        myView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Cursor c = (Cursor) adapter.getItem(position);
                Toast.makeText(getActivity(), "onClick Pressed!", Toast.LENGTH_SHORT).show();

                String title = c.getString(c.getColumnIndexOrThrow("title"));

                if (title.contains("Glucose")) {
                    String glucose = c.getString(c.getColumnIndexOrThrow("glucose"));
                    String dateTime = c.getString(c.getColumnIndexOrThrow("glucose_time"));
                    String journalId = c.getString(c.getColumnIndexOrThrow("_id"));
                    String split[] = dateTime.split(" ");
                    String date = split[0];
                    String time = split[1];

                    Fragment gluFrag = new GlucoseFragment();

                    Bundle bundle = new Bundle();
                    bundle.putString("time", time);
                    bundle.putString("date", date);
                    bundle.putString("glucose", glucose);
                    bundle.putString("journalId", journalId);

                    gluFrag.setArguments(bundle);
                    ((GraphActivity) getActivity()).replaceFragments(gluFrag, bundle);
                }
           }
        });
        return rootView;
        // Inflate the layout for this fragment
    }

}

JournalFragment.XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="edu.tp.sghealthapp.JournalViewFragment"
    android:id="@+id/jv">


        <ListView
            android:id="@+id/listView"
            android:layout_below="@+id/viewPager"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:divider="@color/iron"
            android:dividerHeight="1dp" />

</LinearLayout>

JournalListViewLayout.XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:id="@+id/txt_listTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/arrowIcon"
        android:layout_toStartOf="@+id/arrowIcon"
        android:textColor="#000000"
        android:focusable="false"
        android:textSize="16sp"
        android:typeface="sans" />

    <ImageView
        android:id="@+id/arrowIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:focusable="false"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_arrow" />
</RelativeLayout>

GraphActivity.java

public class GraphActivity extends AppCompatActivity {

    Context context;
    TabLayout mTabLayout;
    ViewPager mViewPager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = getApplicationContext();
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.activity_graph);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setElevation(0);


        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        ViewPagerAdapter pgAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        pgAdapter.addFragments(new GraphFragment(), "Graph");
        pgAdapter.addFragments(new JournalViewFragment(), "Journal");
        mViewPager.setAdapter(pgAdapter);
        mTabLayout.setupWithViewPager(mViewPager);


    }

    public void replaceFragments(Fragment newFragment, Bundle bundle) {
        Fragment fragment = newFragment;
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
        fragment.setArguments(bundle);
        ft.replace(R.id.jv, fragment);
        ft.commit();

    }
}

EDIT:

ActivityGraph.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".GraphActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/graph">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/black">
        <!--To be fixed in future to occupy whole bar when mode = fixed-->


    </android.support.design.widget.TabLayout>

    <edu.tp.sghealthapp.library.graphViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabLayout"></edu.tp.sghealthapp.library.graphViewPager>





</RelativeLayout>

EDIT 2

Tried Harron's and Vivek_Neel's methods, both of them work but cause this problem with the formatting

Putting android:layout_below="@+id/viewPager" in the linearLayout causes the fragment to no longer display

EDIT 3

Solved the formatting problem with this https://stackoverflow.com/a/34573034/5509513

Answer 1

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

Put this code snip and into activity and check

Answer 2

activity_graph.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".GraphActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/graph">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/black">
        <!--To be fixed in future to occupy whole bar when mode = fixed-->


    </android.support.design.widget.TabLayout>

    <edu.tp.sghealthapp.library.graphViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabLayout"></edu.tp.sghealthapp.library.graphViewPager>

 <LinearLayout
    android:id="@+id/jv"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />



</RelativeLayout>

Answer 3

Try wrap_content the height of View Pager and add Relative Layout with @+id/jd and give it layout below view pager .

Refer this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/graph"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/ColorPrimary"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#FFF"
        app:tabTextColor="#000">
        <!--To be fixed in future to occupy whole bar when mode = fixed-->


    </android.support.design.widget.TabLayout>

    <edu.tp.sghealthapp.library.graphViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tabLayout" />

    <RelativeLayout
        android:id="@+id/jv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/viewPager" />


</RelativeLayout>

EDIT 1

Second way to do it create new layout only with Frame Layout . And use it's Place Holder while replacing your Fragment .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

</LinearLayout>