I am building an app with a reusable numeric keyboard. The keyboard has been placed in its own XML file so it can be included where needed throughout the app. I want to split the screen for the current activity into two pieces, the fixed size numeric keyboard at the bottom and a RelativeLayout (RL) above with the rest of the controls.
The problem is, the RL isn’t behaving itself. In the example below, the RL takes up the entire screen, and the keyboard does not show. The really strange thing is when I reverse the placement, place the include with the keyboard at the top, the screen displays as expected, with keyboard and RL each taking up roughly half.
In other words: when the keyboard is included at the top, all is fine (but the keyboard is in the wrong place); but when I include the keyboard at the bottom, the keyboard does not show and the RL takes up the entire screen.
Help! This kind of inconsistency drives me nuts and I am on the verge of hurling the computer across the room.
The activity’s XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/statsTabLayout"
android:scaleType="fitXY"
android:background="#ffffff"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:baselineAligned="true"
android:orientation="vertical">
<RelativeLayout android:id="@+id/statsTopLayout"
android:background="#ffffff"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical">
<TextView android:id="@+id/textViewTopMargin"
android:text=" "
android:textColor="#FFFFFF"
android:textSize = "5sp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="top"
android:layout_alignParentLeft="true"
android:paddingTop="0px"
></TextView>
<TextView android:id="@+id/textViewAverage"
android:text="Average = (%)"
android:textColor="#000000"
android:textSize = "25sp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingBottom="5px"
android:layout_below="@+id/textViewTopMargin"
android:layout_alignParentLeft="true"
></TextView>
<Button android:id="@+id/buttonReset"
android:text="reset"
android:onClick="resetButtonClick"
android:textSize = "12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/textViewAverage"
android:layout_alignBottom="@+id/textViewAverage"
android:layout_below="@+id/textViewTopMargin"
android:layout_alignParentRight="true"
></Button>
<TextView android:id="@+id/textViewHi"
android:text="High= "
android:textColor="#000000"
android:textSize = "20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5px"
android:layout_below="@+id/textViewAverage"
android:layout_alignParentLeft="true"
></TextView>
<TextView android:id="@+id/textViewLow"
android:text="Low= "
android:textColor="#000000"
android:textSize = "20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5px"
android:layout_below="@+id/textViewAverage"
android:layout_centerHorizontal="true"
></TextView>
<TextView android:id="@+id/textViewMax"
android:text="Max= "
android:textColor="#000000"
android:textSize = "20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5px"
android:layout_below="@+id/textViewAverage"
android:layout_alignParentRight="true"
></TextView>
<TextView android:id="@+id/textViewScore"
android:text="Score = "
android:textColor="#000000"
android:textSize = "30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5px"
android:layout_above="@+id/textViewScoreCalculation"
android:layout_alignParentLeft="true"
></TextView>
<TextView android:id="@+id/textViewScoreCalculation"
android:text="(score calculation)"
android:textColor="#000000"
android:textSize = "20sp"
android:textStyle="italic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10px"
android:layout_above="@+id/editTextPoints"
android:layout_alignParentRight="true"
></TextView>
<TextView android:id="@+id/textViewPoints"
android:text="Enter Points: "
android:textSize = "30sp"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/textViewBottomMargin"
android:layout_alignParentLeft="true"
android:paddingBottom="10px"
></TextView>
<EditText android:id="@+id/editTextPoints"
android:text=""
android:digits="-0123456789."
android:windowSoftInputMode="stateVisible"
android:focusable="true"
android:textSize = "30sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/textViewPoints"
android:layout_alignBottom="@+id/textViewPoints"
android:layout_above="@+id/textViewBottomMargin"
android:layout_toRightOf="@+id/textViewPoints"
android:paddingBottom="10px"
></EditText>
<TextView android:id="@+id/textViewBottomMargin"
android:text=" "
android:textColor="#FFFFFF"
android:textSize = "5sp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:paddingBottom="0px"
></TextView>
</RelativeLayout>
<include layout="@layout/numerickeyboard" />
</LinearLayout>
The parent layout for the included keyboard:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="104pt"
android:id="@+id/numberPadLayoutContainer"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:background="#404040"
android:layout_alignParentBottom="true"
>
Any suggestions?
The problem is that some of the child layout attributes for
RelativeLayout, such aslayout_alignParentBottom="true", require that the layout decide its own dimensions before laying out the child that wants to align to its Bottom. In effect, when the child asks to alignParentBottom, it forces the RelativeLayout to use all the vertical space available to it.The last several items in your layout stack above the final element,
TextView android:id="@+id/textViewBottomMargin", which is defined asalignParentBottom. I fixed the layout by modifying those last few elements to align below the previous items instead of aligning above the last item.I also modified the keyboard by removing its
android:layout_alignParentBottom="true"statement.This is the screenshot op an HVGA_1.6 emulator (I made your keyboard area green for the screenshot).
As per the amended question, “also want the statsTopLayout to fill the screen when we don’t include the keyboard” (see comments), I humbly submit these modifications to the original main and keyboard layout files:
In the original
main.xml, change the rootLinearLayoutto aRelativeLayout, then move the<include>to be its first element. In that moved<include>element, add theandroid:id="@+id/numberPadLayoutContainer"statement fromnumerickeyboard.xml(and remove it fromnumerickeyboard.xml(main.xmlwon’t compile without the local ID declaration). The third element is now the enclosedRelativeLayout, which now specifieslayout_height="fill_parent"andlayout_above="@id/numberPadLayoutContainer".Screenshot with the
<include>statement:Screenshot without the
<include>statement and without theandroid:layout_above="@id/numberPadLayoutContainer"statement: