glaukon
Chapter 2: User Interface - Part 7
At this point, we're almost done with the app's layout. Let's wrap it up with 2 more features. Let's make a reset button, that clears all the EditTexts so that the user doesn't have to do it manually, one-by-one. Let's also add a fortune cookie feature, to make our app stand out a bit. It'll give the user a randomly generated fortune that he can refresh whenever he wants. See the code.

<TableRow

android:id="@+id/tableRow14"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<Button

android:id="@+id/resetButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="50dp"

android:layout_marginRight="50dp"

android:layout_span="3"

android:text="Reset"

android:textSize="24dp" />

</TableRow>


<TableRow

android:id="@+id/tableRow15"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/fortuneTextBox"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_span="2"

android:gravity="center"

android:text="[Insert Fortune Here]" />


<ImageButton

android:id="@+id/fortuneButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/fortune" />

</TableRow>

So what do we have here? A Button which is new, since it's not an ImageButton. A Button just has text on it. We gave it a Span of 3, and some margins. We also set the Text Size manually, which is new, though very straightforward. Then, in the next row, me made a TextView and an ImageButton. Not too much else going on here, so let's wrap this section of the tutorial up.
Two things I want to say. First, please note that I haven't been setting the layout gravity for the buttons. That's because the image resources I've been using make the buttons the biggest thing in their row, thus I don't need to center them or anything since they take up the entire row. But if you have smaller buttons, or elected to use bigger text, and the buttons look off, feel free to set their layout gravities.
Second, when we made our first EditView of the project, Eclipse automatically gave it the Request Focus property. This means that when the app starts, that View will automatically be selected. Our first EditView was firstCustomer. Like I said, most users won't bother editing the names in this app. They're much more interested in the numbers. So let's make amount1of1 the thing Android automagically focuses when the app launches. Find the following in the firstCustomer code block.
<requestFocus />
Now cut it out from firstCustomer and paste it into the amount1of1 code block. You'll also have to do a little finagling with the closing brackets here, but I'm sure you can figure it out. If not, Eclipse will guide you.
Hey, guess what? We're done with the UI for our tipping calculator! That's half the battle, right there! Well, at least, like, 25% of the battle. Next, we have the Java code to write. Java is much harder than XML, and there is no GUI version, like our Graphical Layout tab. Still, I'm sure we can manage. Before we do that though, check your code with the code below, and then run the app in your AVD of choice and compare it with the screenshot below. Your app can't do anything noteworthy yet, but it should look nice. Assuming everything matches up, more or less, go and take a break before coming back and tackling Java. You'll need it. (And if things don't match up, figure it out! You have the skills to do so now.)

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/bg"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >


<TableLayout

android:id="@+id/mainTable"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:paddingBottom="5dp"

android:paddingLeft="5dp"

android:paddingRight="5dp"

android:paddingTop="5dp"

android:shrinkColumns="0, 1"

android:stretchColumns="0, 1" >


<TableRow

android:id="@+id/tableRow1"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:text="Pre-Tax Bill:"

android:textAppearance="?android:attr/textAppearanceMedium" />


<ImageButton

android:id="@+id/addDinerButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_column="2"

android:src="@drawable/adddiner" />

</TableRow>


<TableRow

android:id="@+id/tableRow2"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<EditText

android:id="@+id/firstCustomer"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:ems="10"

android:gravity="right|center_vertical"

android:inputType="textPersonName"

android:selectAllOnFocus="true"

android:text="Customer" />


<EditText

android:id="@+id/amount1of1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:ems="10"

android:gravity="center"

android:inputType="numberDecimal"

android:selectAllOnFocus="true"

android:text="$0.00" >


<requestFocus />

</EditText>


<ImageButton

android:id="@+id/addButton1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/additem" />

</TableRow>


<TableRow

android:id="@+id/tableRow3"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="1dp"

android:layout_marginBottom="3dp"

android:layout_marginLeft="25dp"

android:layout_marginRight="25dp"

android:layout_marginTop="3dp"

android:layout_span="3"

android:background="#000"

android:text="" />

</TableRow>


<TableRow

android:id="@+id/tableRow4"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<EditText

android:id="@+id/tipPercent"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:ems="10"

android:gravity="right|center_vertical"

android:inputType="number"

android:selectAllOnFocus="true"

android:text="15%" />


<SeekBar

android:id="@+id/tipSlider"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:max="50"

android:progress="15" />


<ImageButton

android:id="@+id/roundButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/round" />

</TableRow>


<TableRow

android:id="@+id/tableRow5"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:text="Tip:"

android:textAppearance="?android:attr/textAppearanceMedium" />


<TextView

android:id="@+id/tipDollar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="$0.00"

android:textAppearance="?android:attr/textAppearanceMedium" />

</TableRow>


<TableRow

android:id="@+id/tableRow6"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView4"

android:layout_width="wrap_content"

android:layout_height="1dp"

android:layout_marginBottom="3dp"

android:layout_marginLeft="25dp"

android:layout_marginRight="25dp"

android:layout_marginTop="3dp"

android:layout_span="3"

android:background="#000"

android:text="" />

</TableRow>


<TableRow

android:id="@+id/tableRow7"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:text="Tax:"

android:textAppearance="?android:attr/textAppearanceMedium" />


<EditText

android:id="@+id/taxDollar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:ems="10"

android:gravity="center"

android:inputType="numberDecimal"

android:nextFocusDown="@+id/amount1of1"

android:nextFocusRight="@+id/amount1of1"

android:selectAllOnFocus="true"

android:text="$0.00" />

</TableRow>


<TableRow

android:id="@+id/tableRow8"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView6"

android:layout_width="wrap_content"

android:layout_height="1dp"

android:layout_marginBottom="3dp"

android:layout_marginLeft="25dp"

android:layout_marginRight="25dp"

android:layout_marginTop="3dp"

android:layout_span="3"

android:background="#000"

android:text="" />

</TableRow>


<TableRow

android:id="@+id/tableRow9"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView7"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:text="Grand Total:"

android:textAppearance="?android:attr/textAppearanceLarge" />


<TextView

android:id="@+id/textGTotal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:gravity="center"

android:text="$0.00"

android:textAppearance="?android:attr/textAppearanceLarge" />

</TableRow>


<TableRow

android:id="@+id/tableRow10"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView8"

android:layout_width="wrap_content"

android:layout_height="1dp"

android:layout_marginBottom="1dp"

android:layout_marginLeft="25dp"

android:layout_marginRight="25dp"

android:layout_marginTop="3dp"

android:layout_span="3"

android:background="#000"

android:text="" />

</TableRow>


<TableRow

android:id="@+id/tableRow11"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView9"

android:layout_width="wrap_content"

android:layout_height="1dp"

android:layout_marginBottom="3dp"

android:layout_marginLeft="25dp"

android:layout_marginRight="25dp"

android:layout_marginTop="1dp"

android:layout_span="3"

android:background="#000"

android:text="" />

</TableRow>


<TableRow

android:id="@+id/tableRow12"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textView10"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right"

android:text="Split Bill:"

android:textAppearance="?android:attr/textAppearanceMedium" />

</TableRow>


<TableRow

android:id="@+id/tableRow13"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/textSplit1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="right"

android:text="Customer" />


<TextView

android:id="@+id/textSplit1Dollar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="$0.00" />

</TableRow>


<TableRow

android:id="@+id/tableRow14"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<Button

android:id="@+id/resetButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="50dp"

android:layout_marginRight="50dp"

android:layout_span="3"

android:text="Reset"

android:textSize="24dp" />

</TableRow>


<TableRow

android:id="@+id/tableRow15"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >


<TextView

android:id="@+id/fortuneTextBox"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_span="2"

android:gravity="center"

android:text="[Insert Fortune Here]" />


<ImageButton

android:id="@+id/fortuneButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/fortune" />

</TableRow>

</TableLayout>


</ScrollView>
Glossary
Button: A button is just what you'd expect it to be. It's a View object with text on it, and the user can press it to do stuff.
Android link
Next Part of Tutorial
Previous Part of Tutorial
Back to Tutorial Index