Hide fragment leaving empty space

Question

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?

Have you tried to use the `detach(Fragment)` from `FragmentTransaction` instead of `hide(Fragment)`? — Stormel, Oct 22 '13 at 09:15
the problem here I see is that when you are hiding the fragment, you can not hiding it's container. So when the fragment is hidden, the container is still being showed and hence the empty space. EDIT: try using `detach()` as @Stormel said.. — d3m0li5h3r, Oct 22 '13 at 09:15
@d3m0li5h3r It hides the containers too. I read this somewhere and I didn't believe it. That's why I set background to the containers and I see that the background turns to white when I hide the fragments. — nikmin, Oct 22 '13 at 09:17
@Stormel I can't do that, my app is complex to do that, and by the way If I detach the fragment, the containers will still stay there — nikmin, Oct 22 '13 at 09:20
another suggestion (I`m not sure if it would work because I can't test it right now) would be to modify your `LinearLayout` and use `gravity:left` — Stormel, Oct 22 '13 at 09:27
@Stormel `gravity:left` doesn't work too. I also tried `detach()` but I got the same result. I think it has something with the `weight` I set on the containers. Is there a way to make the containers equal width without using `weight`? — nikmin, Oct 22 '13 at 09:44
from what i understand from the documentation, `weight` is used for grouping the containers. for example if you want the cointainers A B C D grouped something like A (B+C) D you would set for A and D `weight=2` and B and C `weight=1`. If you use `weight` just for the `size` and the arrangement of the panels, you can try to specify the `width` and `height` manually and use `allign-left` for the page arrangement — Stormel, Oct 22 '13 at 13:17

score 2 · Accepted Answer · answered Nov 28 '13 at 12:41

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.

score 1 · Answer 2 · answered Oct 17 '15 at 07:01

To hide their container you can use

View mView = findViewById(R.id.container);
mView.setVisibility(View.GONE);  // Instead of View.INVISIBLE or View.VISIBLE

this will prevent your container from taking up any space and will obviously hide any fragment in that container so

fragmentTransaction.mFragment.hide.commit()

I have found to be largely useless in the case where you need the container gone too.

Hide fragment leaving empty space

2 Answers2