Android Tablet UI : multi-pane fragment or linear layout - android-layout

Question

I need to create app that will initially work only for tablets. I'm aware of the “List-and-Detail” pattern in which there’s a list of something, where clicking on the list brings up details on the item that was clicked upon.
That’s just perfect as long as all the layouts always have two panes: one for the list of items and one for the detail of the selected item.
Well, in my app I want to use the first pane that is usually used for the list of items as the menu of all the available option in the app and the second pane, the one that takes up most of the available space, to show a specific layout based on the option that was selected in the first fragment.
The problem is that the second pane will not always be composed of a single part.
These are all the possible scenarios I will have(the left part with the red frame represents the menu that should always be displayed):
1. Details pane composed by a single part:
2. Details pane composed by two parts of the same size, which do not have a master-detail relationship.
3. Details pane composed by two parts, which do have a mater-detail relationship, but the master part is wider than the details part
#Edit :
Since the main goal of my app is to help waiters take orders, this third scenario comes into play when:
The waiter selects the option "Take order" from the left menu (let's pretend it's the "Item two" in the image)
In the first part of the details pane, the waiter can choose among all the categories of food they serve (pretend it's the list at the top) and according to the category selected, the below list shows all the dishes under that specific category.
Once the waiter taps on a dish it's automatically added to the second part of the details pane (the one that is hidden in the first scenario)
4. Details pane composed by two parts, which do have a mater-detail relationship, but the details part is wider than the master part.
I know that if want to reuse the layout from different size of screens and orientations I have to use fragments, but have to determine on the fly one to show two or one part (fragments) in the details pane or which part will be wider than the other seems like a lot of work and to be honest I’m not sure how to do it since all I know now is that the main activity, the one with the slots for the menu pane and the details pane should be similar to this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/menu"
android:layout_weight="30"
android:layout_width="0px"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="#+id/content"
android:layout_weight="70"
android:layout_width="0px"
android:layout_height="match_parent"
/>
</LinearLayout>
Do you think you could give some UI guidelines here? Maybe I’m over thinking all this I should go with a single linear layout with the number of parts I need.
Thanks in advance.

Answer 1

Have you seen the Retrieving a List of Contacts example ? Here they have shown how to properly implement multi-pane master-detail flow. The same code provides a multi-pane landscape layout on tablets, and a single-pane portrait layout on normal handsets. It is an interesting, though slightly complicated, example.
About having three panes in some cases: I don't think this is a great idea. I think that at any given time there should be only one list screen and one detail screen, and you should implement your app's UI flow to support such an idiom. It would not be very difficult to implement a three-pane layout, but I doubt it would be useful or innovative.
EDIT:
I've understood your requirement, and I have to admit that I did not realize the possibility of this type of usage. Its a good design. What I feel is, you don't really need to think in terms of three panes: rather, treat the left list as the list-pane, and the entire right side as a single detail-pane. Inside this one detail-pane, you can have three nested Fragments for the three separate regions. Or instead, since nested Fragments can sometimes create more problems than they solve, let there be three LinearLayouts. That would be easier to handle, What I am trying to do is simplify the layout so that it works properly and without complicated code.

Answer 2

What I got from your question is that you want to set different layout weight for different situations right? If it is so then you can do it programmatically, also you want to hide your layout for first case so use 3 layouts for menu, content1 and content2 hide content2 for first case as
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/menu"
android:layout_weight="30"
android:layout_width="0px"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="#+id/content2"
android:layout_width="0px"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="#+id/content2"
android:layout_width="0px"
android:layout_height="match_parent"
/>
</LinearLayout>
For first case use:
LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
paramsmenu.weight = 30f;
FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
frameLayoutmenu.setLayoutParams(paramsmenu);
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params1.weight = 70f;
FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
frameLayoutContent1.setLayoutParams(params1);
FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
frameLayoutContent2.setVisibility(View.GONE);
For second case use:
LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
paramsmenu.weight = 30f;
FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
frameLayoutmenu.setLayoutParams(paramsmenu);
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params1.weight = 35f;
FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
frameLayoutContent1.setLayoutParams(params1);
FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params2.weight = 35f;
frameLayoutContent2.setLayoutParams(params2);
For third case use:
LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
paramsmenu.weight = 30f;
FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
frameLayoutmenu.setLayoutParams(paramsmenu);
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params1.weight = 40f;
FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
frameLayoutContent1.setLayoutParams(params1);
FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params2.weight = 30f;
frameLayoutContent2.setLayoutParams(params2);
For fourth case use:
LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
paramsmenu.weight = 30f;
FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
frameLayoutmenu.setLayoutParams(paramsmenu);
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params1.weight = 20f;
FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
frameLayoutContent1.setLayoutParams(params1);
FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params2.weight = 50f;
frameLayoutContent2.setLayoutParams(params2);