title: Android Switch Between Multiple Fragments In A Tab
body: <p>I have an application with a TabLayout that has a ViewPager that handles the tabs. The two tabs instantiate different fragments. </p>
  
  <p>What I am trying to achieve is to switch fragments within the same tab. Since each fragment within the same tab holds a different layout (as it relies on a specific user flow), using a FrameLayout and switching it's contents, only creates the new fragment's layout on top of the previous fragment.</p>
  
  <p>Should I create a general fragment with a container and replace it with each fragment? If so, would I need to build the layout for each fragment at runtime? </p>
  
  <p>I have searched online and in SO, but failed to find a solution that addresses my scenario specifically.</p>
  
  <p>Is there a way to achieve this or should I approach this problem from a different angle?</p>
  
  <p>Some code for reference:</p>
  
  <p><strong><em>MainActivtiy XML:</em></strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".Main2Activity"&gt;
  
      &lt;com.google.android.material.appbar.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"&gt;
  
          &lt;com.google.android.material.tabs.TabLayout
              android:id="@+id/tabs"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="?attr/colorPrimary" /&gt;
      &lt;/com.google.android.material.appbar.AppBarLayout&gt;
  
      &lt;androidx.viewpager.widget.ViewPager
          android:id="@+id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_behavior="@string/appbar_scrolling_view_behavior" /&gt;
  
  &lt;/androidx.coordinatorlayout.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p><strong><em>First fragment's XML:</em></strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;FrameLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_height="match_parent"
      android:layout_width="match_parent"
      android:gravity="center"
      android:layout_gravity="center"
      android:orientation="vertical"
      android:id="@+id/container"&gt;
  
      &lt;TextView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:textSize="20dp"
          android:gravity="center"
          &gt;&lt;/TextView&gt;
  
      &lt;ProgressBar
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          style="?android:attr/progressBarStyleLarge"
          android:id="@+id/progress_bar"
          android:layout_gravity="center"&gt;
  
      &lt;/ProgressBar&gt;
      &lt;GridView
          android:rowCount="3"
          android:numColumns="2"
          android:gravity="center"
          android:layout_gravity="center"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:verticalSpacing="10dp"
          android:horizontalSpacing="10dp"
          android:stretchMode="columnWidth"
          android:layout_marginLeft="40dp"
          &gt;
  
  
      &lt;/GridView&gt;
  
  &lt;/FrameLayout&gt;
  </code></pre>
  
  <p><strong><em>Second Fragment's XML:</em></strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="20dp"
          android:layout_gravity="center"
          android:layout_marginBottom="5dp"&gt;
      &lt;/TextView&gt;
  
      &lt;RadioGroup
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:id="@+id/myRadioGroup"
          android:orientation="horizontal"&gt;
  
      &lt;/RadioGroup&gt;
  
      &lt;EditText
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:inputType="numberDecimal"&gt;
  
      &lt;/EditText&gt;
  
      &lt;androidx.appcompat.widget.AppCompatButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:layout_marginTop="10dp"
          android:text="Submit"
          android:id="@+id/submit_btn"&gt;
  
      &lt;/androidx.appcompat.widget.AppCompatButton&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>-- EDIT --</p>
  
  <p>The code I am using to switch between fragments (found inside the first fragment) is this (while I have tried various others ways as well):</p>
  
  <pre><code>getActivity().getSupportFragmentManager()
                      .beginTransaction()
                      .replace(R.id.container,secondFragment, "secondFragment")
                      .addToBackStack(null)
                      .commit();
  </code></pre>
  
  <p>-- EDIT #2 --</p>
  
  <p>Below is the FragmentPagerAdapter code:</p>
  
  <pre><code>public class SectionsPagerAdapter extends FragmentPagerAdapter {
  
      @StringRes
      private static final int[] TAB_TITLES = new int[]{R.string.tab_text_1, R.string.tab_text_2};
      private final Context mContext;
  
      public SectionsPagerAdapter(Context context, FragmentManager fm) {
          super(fm);
          mContext = context;
      }
  
      @Override
      public Fragment getItem(int position) {
          // getItem is called to instantiate the fragment for the given page.
          // Return a PlaceholderFragment (defined as a static inner class below).
          if (position == 1) {
              return firstFragment.newInstance("One", "Two");
          }
          return PlaceholderFragment.newInstance(position + 1);
      }
  
      @Nullable
      @Override
      public CharSequence getPageTitle(int position) {
          return mContext.getResources().getString(TAB_TITLES[position]);
      }
  
      @Override
      public int getCount() {
          // Show 2 total pages.
          return 2;
      }
  }
  </code></pre>
  
  <p>And this code is from the mainActivity:</p>
  
  <pre><code>@Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());
      ViewPager viewPager = findViewById(R.id.view_pager);
      viewPager.setAdapter(sectionsPagerAdapter);
      TabLayout tabs = findViewById(R.id.tabs);
      tabs.setupWithViewPager(viewPager);
  }
  </code></pre>