In Android, how to replace a Fragment in a Tablayout? - android-fragments

Question

For the love of god, I can't seem to figure this out. I have a tablayout with 3 tabs (each tab has in it a fragment). All i want to do is on the second fragment, the user clicks a button, and it replaces the second tab's fragment with a new fragment. So how do I go about doing that?
Here is my xml for the fragment I want to replace .
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragCards_mainLL">
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp"
android:id="#+id/fragCards_LL">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/fragCards_RecyclerView">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
And here is the fragment I want to replace the second tab's fragment.
<FrameLayout 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="com.daprlabs.swipedeck.ProfileView.FragmentFollowers"
android:id="#+id/fragFollowrs_mainFL">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Followers Fragment"
android:gravity="center"
android:textSize="30dp"/>
</FrameLayout>
Here is my viewpageAdapter code
public class ViewPagerAdapter extends FragmentPagerAdapter
{
ArrayList<Fragment> fragments = new ArrayList<>();
ArrayList<String> tabTitles = new ArrayList<>();
public ViewPagerAdapter(android.support.v4.app.FragmentManager fragmentManager)
{
super(fragmentManager);
}
#Override
public Fragment getItem(int position)
{
return fragments.get(position);
}
#Override
public int getCount()
{
return fragments.size();
}
#Override
public CharSequence getPageTitle(int position)
{
return tabTitles.get(position);
}
public void addFragments(Fragment fragment, String titles)
{
this.fragments.add(fragment);
this.tabTitles.add(titles);
}
}
Now somewhere in my Tab 2 fragment I have an onClickListener, I need to replace the entire fragment with a new fragment. I am not sure what to put in here...Currently, my "Followers Fragment" just goes beneath my recyclerview, so I can still see the views in the current, so it doesn't entirely replace the fragment...
#Override
public void onClick(View v)
{
FragmentFollowers f1 = new FragmentFollowers();
android.support.v4.app.FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.fragCards_LL,f1);
fragmentTransaction.setTransition(android.support.v4.app.FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
Toast.makeText(getActivity(),"position " +position,Toast.LENGTH_SHORT).show();
}