n.b.: I was going to post all this XML on Pastebin but I think it’s important to have it archived here for posterity, so please pardon the code sample length! Better to have more info than less, right?
Consider the following calculator-ish layout. (I hard-coded the strings just for this post – they are normally resources.)
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/calculator"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:orientation="vertical"
android:stretchColumns="*">
<TableRow android:id="@+id/tableRowFieldName"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/textViewFieldName"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:padding="0dp"
android:text="Label"
android:textSize="20dp"
android:textColor="#FFFFFF"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<TableRow android:id="@+id/tableRowDisplay"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/textViewDisplay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:padding="0dp"
android:text="Value"
android:textSize="35dp"
android:textColor="#FFFFFF"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow android:id="@+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.2">
<Button android:id="@+id/buttonA"
style="@style/ParameterButton"
android:text="Param A" />
<Button android:id="@+id/buttonB"
style="@style/ParameterButton"
android:text="Param B" />
</TableRow>
<TableRow android:id="@+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.2">
<Button android:id="@+id/buttonC"
style="@style/ParameterButton"
android:text="Param C" />
<Button android:id="@+id/buttonD"
style="@style/ParameterButton"
android:text="Param D" />
</TableRow>
<TableRow android:id="@+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.2">
<Button android:id="@+id/buttonE"
style="@style/ParameterButton"
android:text="Param E" />
<Button android:id="@+id/buttonF"
style="@style/ParameterButton"
android:text="Param F" />
</TableRow>
<TableRow android:id="@+id/tableRow4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.4">
<ListView android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="gone"
android:layout_weight="1.0" />
<TableLayout android:id="@+id/calcKeypad"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:stretchColumns="*">
<TableRow
android:layout_weight="0.25"
android:gravity="center">
<Button android:id="@+id/button7"
style="@style/KeypadButton"
android:text="7" />
<Button android:id="@+id/button8"
style="@style/KeypadButton"
android:text="8" />
<Button android:id="@+id/button9"
style="@style/KeypadButton"
android:text="9" />
</TableRow>
<TableRow
android:layout_weight="0.25"
android:gravity="center">
<Button android:id="@+id/button4"
style="@style/KeypadButton"
android:text="4" />
<Button android:id="@+id/button5"
style="@style/KeypadButton"
android:text="5" />
<Button android:id="@+id/button6"
style="@style/KeypadButton"
android:text="6" />
</TableRow>
<TableRow
android:layout_weight="0.25"
android:gravity="center">
<Button android:id="@+id/button1"
style="@style/KeypadButton"
android:text="1" />
<Button android:id="@+id/button2"
style="@style/KeypadButton"
android:text="2" />
<Button android:id="@+id/button3"
style="@style/KeypadButton"
android:text="3" />
</TableRow>
<TableRow
android:layout_weight="0.25"
android:gravity="center">
<Button android:id="@+id/buttonClear"
style="@style/KeypadButton"
android:text="C" />
<Button android:id="@+id/button0"
style="@style/KeypadButton"
android:text="0" />
<Button android:id="@+id/buttonDecimal"
style="@style/KeypadButton"
android:text="." />
</TableRow>
</TableLayout>
<LinearLayout android:id="@+id/linearLayoutTotal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Button android:id="@+id/buttonTotalWeight"
style="@style/FunctionButton"
android:text="Function A" />
<Button android:id="@+id/buttonTotalCost"
style="@style/FunctionButton"
android:text="Function B" />
<Button android:id="@+id/buttonAbout"
style="@style/FunctionButton"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Function C" />
</LinearLayout>
</TableRow>
</TableLayout>
This uses the following styles (essentially factored out of the original XML):
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CalcButton">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">15dp</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_margin">2dp</item>
</style>
<style name="ParameterButton" parent="CalcButton">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">0.5</item>
</style>
<style name="KeypadButton" parent="CalcButton">
<item name="android:textSize">20dp</item>
</style>
<style name="FunctionButton" parent="CalcButton">
<item name="android:layout_height">0dp</item>
<item name="android:layout_weight">0.375</item>
</style>
</resources>
If you were to drop all of this in to an Android project, you should see three rows of two parameter buttons up top, followed by a numeric keypad below that, with three function buttons to the right of the keypad. Mostly harmless. (Also, it will only ever be used in portrait – so no worries about taking landscape into consideration.)
However … pay particular attention to the ListView within the XML. You won’t see it in the visual just yet, since it has android:visibility="gone". The idea is that, at certain times, I will remove that, then set the numeric keypad (the adjacent TableLayout) to have android:visibility="gone" instead, thus showing the list in its place.
Put another way, the desired effect is to have the list and the numeric keypad occupy exactly the same space, such that I can flip back and forth between the two at will.
The problem I’m having is that the ListView, once populated, seems intent on taking up the entire height of the overall table, obliterating the poor parameter buttons and bringing the three function buttons along for the ride.
You can see this by rigging a very basic ArrayAdapter (I used android.R.layout.simple_list_item_1 and android.R.id.text1) and tossing a rudimentary String array its way. For now, manually move the gone assignment from the list over to the adjacent table layout (or do it in code).
Setting a fixed height seems out of the question, since this should be working on a variety of displays. In fact, I even tried what is perhaps a misguided endeavor:
ListView list = (ListView) findViewById(android.R.id.list);
TableLayout calcKeypad = (TableLayout) findViewById(R.id.calcKeypad);
list.layout(calcKeypad.getLeft(), calcKeypad.getTop(), calcKeypad.getRight(), calcKeypad.getBottom());
calcKeypad.setVisibility(View.GONE);
list.setVisibility(View.VISIBLE);
Nope, that didn’t help either.
In keeping with the documentation, I’ve even given ListView the proper ID since I want to customize its layout. Of course I’m not using a ListActivity, so perhaps it doesn’t matter in this case. (I’m just using a regular Activity. Yes, I tried changing that to ListActivity too. No dice.)
Still, I’m totally open to this being pilot error. (In fact, I’m counting on it.) I’m just at the point where it’s become head-hitting-the-wall-in-myopia mode. “There’s got to be a better way!”
Again, keep in mind I’m trying very hard to keep the layout fluid, so that it works well on a variety of display sizes (not tablets, just handhelds), hence the chosen layout. If there’s a better way that accomplishes the same visual, I’m all ears.
Bottom line: How do I make the ListView only take up the area occupied by that adjacent calculator keypad (TableLayout)?
Clues/answers/guidance appreciated!
There are some problems in your layout, but I didn’t spend a lot of time trying to sort out the various
layout_weightandlayout_heightsituations that you have. I think you might be able to get this to work, but I took a little different approach.I broke the layout up into a series of rows above the three elements at the bottom. Basically you have:
I’m not saying this is the most efficient layout, but every layout element has a job, so you might have to go to some lengths to replace them with something more efficient.
In particular, the use of
LinearLayoutfor your Parameter buttons and Function buttons makes good use of thelayout_weightfeature. It’s not available in other layouts that are not subclasses ofLinearLayout(you may not be aware thatTableRowis a subclass ofLinearLayout, and that’s whylayout_weightworks there but not inRelativeLayout) and the ability to subdivide available space on a percentage basis seems to be appropriate for those elements.The TableLayout holding the numeric buttons could probably be replaced, but it’s doing a good job of allocating space for the buttons in different sized views, and it is also doing a nice job of spacing the rows to fill the available space. Again, it might be difficult to replace this.
What I did was replace your overall
TableLayoutwith aRelativeLayoutwith appropriate alignment attributes. That allows you to put the Function buttonLinearLayoutagainst the right border and have theListVieworTableLayoutconsume the remaining space below the Parameter buttons and to the left of the Function buttons. I’m not saying you have to do this, necessarily, but it saves some extra layout elements over your original design and does the job you are looking for.Here’s a workup of what I did. Notice that I added a
layout_heightofwrap_contentto your ParameterButton style. Also, both theListViewandTableLayoutare visible in this layout. You may want adjust in the layout or in your code.The style:
The layout: