title: Hide fragment leaving empty space
body: <p>I have a LinearLayout which has 3 containers (also LinearLayouts), and these have <code>weight=1</code>. Here is that layout:</p>
  
  <pre><code>&lt;LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:baselineAligned="false"
      android:divider="?android:dividerHorizontal"
      android:orientation="horizontal"
      android:showDividers="middle" &gt;
  
      &lt;LinearLayout
          android:id="@+id/container1"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:background="#FF0000"
          android:orientation="vertical" &gt;
      &lt;/LinearLayout&gt;
  
      &lt;LinearLayout
          android:id="@+id/container2"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:background="#00FF00"
          android:orientation="vertical" &gt;
      &lt;/LinearLayout&gt;
  
      &lt;LinearLayout
          android:id="@+id/container3"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:orientation="vertical" &gt;
      &lt;/LinearLayout&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>In each of these containers I add by 1 fragment:</p>
  
  <pre><code>FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
  transaction.add(R.id.container1, fragment1, TAG1);
  transaction.add(R.id.container2, fragment2, TAG2);
  transaction.add(R.id.container3, fragment3, TAG3);
  transaction.commit();
  </code></pre>
  
  <p>So now they are positioned like this:</p>
  
  <pre><code>-------------------------------------
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  | fragment1 | fragment2 | fragment3 |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  -------------------------------------
  </code></pre>
  
  <p>When I click on a button I want to hide first to fragments together with their containers and show new fragment that is on the right of <code>fragment3</code>. So I would have something like this:</p>
  
  <pre><code>-------------------------------------
  |           |                       |
  |           |                       |
  |           |                       |
  |           |                       |
  |           |                       |
  | fragment3 |       fragment4       |
  |           |                       |
  |           |                       |
  |           |                       |
  |           |                       |
  |           |                       |
  -------------------------------------
  </code></pre>
  
  <p>When I click on the button I use this to hide the fragments:</p>
  
  <pre><code>FragmentManager fragmentManager = getSupportFragmentManager();
  FragmentTransaction transaction = fragmentManager.beginTransaction();
  transaction.hide(fragment1);
  transaction.hide(fragment2);
  transaction.addToBackStack(null);
  transaction.commit();
  </code></pre>
  
  <p>It hides the fragments together with their containers but the screen I get looks like this:</p>
  
  <pre><code>-------------------------------------
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |   empty   |   empty   | fragment3 |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  |           |           |           |
  -------------------------------------
  </code></pre>
  
  <p>Here <code>empty</code> means totally empty, no fragment, no container, nothing, just empty space there.</p>
  
  <p>So, my question is <strong>how to hide the fragments without leaving the blank space there?</strong></p>