Android Adventures - Building The UI
Written by Mike James   
Monday, 03 June 2013
Article Index
Android Adventures - Building The UI
Positioning multiple components
Simple Button Example
Calculator App


 A First App

As an example of building a simple app using layout and the Designer let's build a calculator.

This is a very simple calculator - it has just nine numeric buttons and a display. It takes the values on each of the buttons and adds them to a running total. There are no operator buttons, add, subtract or clear - but you could add them.

Start a new Blank Activity project called iCalc or whatever you want to call it. Accept all of the defaults. The principle of operation is that we are going to set up a grid of ten buttons. Set each button to 0 through 9 as a text label. We are then going to assign the same onClick handler to each of the buttons. All it is going to do is retrieve the text caption showing on the button, convert it to an integer, add it to the running sum and then store it back int he TextView after converting it back to a String. 

So the code is fairly easy. 

We need a private field to keep the running total in:

  private int total = 0;

Next we need an onButtonClick function which is going to be used to handle the onClick event for all of the buttons. See chapter 2 if you don't know about event handling. 

The button that the user clicked is passed as a View object as the only argument to the function and we can use this to get its text caption:


public void onButtonClick(View v) {
 Button button = (Button) v;
 String bText = (String) button.getText();


Now that we have the button's caption e.g. 0, 1, 2 and so on we can convert it to an integer and add it to the running total:


int value = Integer.parseInt(bText);
total += value;


Finally we get the TextView using its id (see Chapter 2) and set its text to the total converted to a String:


 TextView myTextView = (TextView)

The complete event handler is:


private int total = 0;
public void onButtonClick(View v) {
 Button button = (Button) v;
 String bText = (String) button.getText();
 int value = Integer.parseInt(bText);
 total += value;
 TextView myTextView = (TextView)

Now we turn our attention to the layout. Open the layout file and place a single button on the design surface. Double click on it and enter 7 as its Text property - this is a shortcut to the Text and id properties.  Place the button at the top right of the screen with a little space. 

Next go to the Properties window and find the onClick property. Set this to onButtonClick:



To create the grid of ten buttons select the first button and copy it to the clipboard. Next paste the copied button to the design surface and each time position it within the grid relative to the buttons that are already present. Now you have grid of buttons that all say 1. Double click each one in turn and change the text to 8,9, 4,5,6, 1,2,3 and 0.




By using the copy and paste trick you now have ten buttons all set to the same onClick event handler and al you had to do was edit the  Text property. 

To make this look more like a keypad select the 0 key and size it so that it occupies a double width:


Finally add a Large Text View at the top. You can position it relative to the top row and the7 key and then size it so that it spans the complete set of buttons. 



 Now you should be able to move the entire block when you move just the 7 button to a new location. This doesn't always work! It is good to know that you can undo an action by using Ctrl-z. If you find the Designer too difficult to work with to create this layout, and it can be difficult, you might prefer to set the layout properties using the property window. 

Finally run the program in the usual way and you wil be please to discover your first app does actually calculate things!




Try rotating the emulator to see what it looks like in landscape mode. Not bad but as promised as the app restarts you lose any calculation you were performing as the app is restarted when the orientation changes. 

If you can try it out on a real Android device do so - it is easier to find out what it really feels like. Also do have a look at what the layout looks like on a range of screens and orientations.

This isn't much of a calculator, but you could make it into a really good one. 

  • right align the text in the display
  • add a + and - button and implement the action
  • allow the user to enter multi-digit number
  • add a decimal point key and all a multi-digit float
  • add * an / keys
  • add a clear key 

and so on...

There are better ways to implement the layout and we will come back to the calculator program in later chapters.


Android Adventures With Android Studio


  1. Getting Started With Android Studio
  2. The Activity And The UI
  3. Building The UI and a Calculator App
  4. Lifecycle and State
  5. Basic Controls And Events
  6. Spinners
  7. Pickers
  8. UI Graphics A Deep Dive
  9. ListView And Adapters
  10. Introducing Fragments
  11. Fragments and XML
  12. Fragment And Activity Working Together
  13. Managing Fragments
  14. Custom dialogs using DialogFragment
  15. Dialog Classes In DialogFragment
  16. A NumberPicker DialogFragment Project
  17. ViewPager

If you are interested in creating custom template also see:

Custom Projects In Android Studio






Coming Next

In the next installment we'll discover how to use more UI components and take a look at the lifecycle of the app.

Meanwhile if you have any questions on what we've covered so far please let me know using the comments.

You can download the code for this program and for the simple blank activity template from the CodeBin (note you have to register first).


To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter,FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.


blog comments powered by Disqus


Last Updated ( Thursday, 20 November 2014 )

Copyright © 2015 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.