Search code examples
androidandroid-fragmentsfragmenttransactionfragmentmanager

Hide fragment leaving empty space


I have a LinearLayout which has 3 containers (also LinearLayouts), and these have weight=1. Here is that layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:divider="?android:dividerHorizontal"
    android:orientation="horizontal"
    android:showDividers="middle" >

    <LinearLayout
        android:id="@+id/container1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#FF0000"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/container2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00FF00"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/container3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>
</LinearLayout>

In each of these containers I add by 1 fragment:

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();

So now they are positioned like this:

-------------------------------------
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
| fragment1 | fragment2 | fragment3 |
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
-------------------------------------

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 fragment3. So I would have something like this:

-------------------------------------
|           |                       |
|           |                       |
|           |                       |
|           |                       |
|           |                       |
| fragment3 |       fragment4       |
|           |                       |
|           |                       |
|           |                       |
|           |                       |
|           |                       |
-------------------------------------

When I click on the button I use this to hide the fragments:

FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.hide(fragment1);
transaction.hide(fragment2);
transaction.addToBackStack(null);
transaction.commit();

It hides the fragments together with their containers but the screen I get looks like this:

-------------------------------------
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
|   empty   |   empty   | fragment3 |
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
|           |           |           |
-------------------------------------

Here empty means totally empty, no fragment, no container, nothing, just empty space there.

So, my question is how to hide the fragments without leaving the blank space there?


Solution

  • I didn't manage to make it work this way so here is my solution:

    • Instead of using weight i used wrap_content in my layout.
    • When I add my fragments I get my screen width and set the width of the each fragment container to 1/3 of the whole width. This way I get the same effect as weight=1.
    • Instead of hiding and showing the fragments, I did the following:
      • I add the 4th fragment to the right of the 3rd.
      • I added horizontal scroll view so the user could scroll left and right and view all fragments.