Reproducing Honeycomb GMail UI with fragments

Question

I'm trying to reproduce Honeycomb GMail UI with fragments and can't. Here's what I want

Initial state:

+--------+---------------+
|        |               |
|Accounts|   Folders     |
|        |               |
+--------+---------------+

after folder is selected:

+--------+---------------+
|        |               |
|Folders |   Items       |
|        |               |
+--------+---------------+

where Accounts, Folders and Items are fragments. (Obviously back button should go to initial state)

I tried the following layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal" 
   android:id="@+id/root">

   <FrameLayout
     android:id="@+id/left_pane" android:layout_weight="1"
     android:layout_width="0px" android:layout_height="match_parent" />

   <FrameLayout
      android:id="@+id/right_pane" android:layout_weight="1.6"
      android:layout_width="0px" android:layout_height="match_parent" />
</LinearLayout>

Unfortunately this doesn't work because I can't move my Folders fragment from right pane to the left pane (fragment can be added only once). I can create new Folders instead, but that is quite resource wasteful, needs careful state management (especially when back button will be pressed) and doesn't look the way I want it to look.

I tried using 3 FrameLayouts (left, middle, right with weights 1, 1.6, 2.56) but I can't make the FrameLayout to collapse when fragment is not shown. Any help is really appreciated

Answer 1

Using the three frame layout as suggested by Nicholas' post works great in my app. To keep the ratios right, you might need to change the layout weights dynamically (although I suppose it would be possible to not do this). I use this helper method to handle all this logic. Note that it needs a couple helpers; generally, it should be clear what those need to do from their name, so I didn't post them here. One thing, though, is that I have a member array that contains all the frame holders, so this method can automatically hide anything that isn't wanted.

    final private void showFrames(View leftFrame, View rightFrame) {
    // Hide frames that should be gone
    for (View frame : mContentFrames) {
        if (frame != leftFrame && frame != rightFrame) {
            frame.setVisibility(View.GONE);
            Fragment frag = getFragmentManager().findFragmentById(frame.getId());
            if (frag != null) {
                getFragmentTransaction().remove(frag);
            }
        }
    }

    // Set up the left frame
    if (leftFrame != null) {
        leftFrame.setVisibility(View.VISIBLE);
        leftFrame.setLayoutParams(new LayoutParams(0, LayoutParams.FILL_PARENT, 3));
    }

    // Set up the right frame
    if (rightFrame != null) {
        rightFrame.setVisibility(View.VISIBLE);
        rightFrame.setLayoutParams(new LayoutParams(0, LayoutParams.FILL_PARENT, 7));
    }

    // TODO: set up animation

    // Start the transition
    commitTransition();
}

Hope that helps! --randy

Answer 2

I think you could use 3 FrameLayouts and hide the unused frame. So initially the Items frame is hidden. When an item is selected in the Folders frame, the Accounts frame is hidden and the Items fame is made visible. The Folder frame (or the main activity) would have to intercept the back button so that it could hide the Items frame and make the Account frame visible.

Answer 3

i think you can get some idea from StackScrollView for Android..

https://github.com/raweng/Android-StackScrollview