Android Programming In Kotlin: A First App
Written by Mike James   
Monday, 05 August 2019
Article Index
Android Programming In Kotlin: A First App
Final Steps

Try to make sure that each Button you add is relative to one of the other Buttons and make sure that you have set them all to the same onClick handler. You can check that you have done this successfully by dragging one of the Buttons and see if they all follow! If one or two don't then try repositioning them relative to one of the other Buttons. If you find any positioning difficult zoom in.

If you get into a mess delete all the constraints and start over. 

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 TextView at the top. You can position it relative to the top row and the 7 key and then size it so that it spans the complete set of buttons. To do this you will have to delete the constraints on the 7 key and set its top relative to the bottom of the TextView and its left to line up with the left of the TextView.

Don't forget to position the TextView relative to the top of the screen: 


Now you should be able to move the entire block when you move just the TextView to a new location. 

It is good to know that you can undo an action by using Ctrl-Z. If you find the Layout Editor too difficult to work with to create this layout, and it can be difficult, you might prefer to set the layout attributes using the Attributes window. 

Select the TextView and use the Attributes window to change the font size to 18p or more – you will find it under the textAppearance field. 

Finally run the program in the usual way and you will 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 forewarned, as the app restarts you lose any calculation you were performing since the app is restarted when the orientation changes. 

If you can, try it out on a real Android device. This lets you 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 numbers

  • Add a decimal point key

  • Add * and / keys

  • Add a clear key


  • You can create the XML layout file by hand, but using the Layout Editor is easier.

  • It is still useful to know how the XML file works so that you can edit it when the Layout Editor lets you down in some way.

  • The Layout Editor modifies the way components look in the Layout mode by changing a component's attributes.

  • How you position a component depends on the Layout you are using.

  • ConstraintLayout lets you position components relative to each other or to the container.

  • The Layout Editor may change multiple attributes to position the component where you want it.

  • Use the Component Tree to select components that are difficult to select in the Layout Editor.

  • You can use the Attributes window to select and directly set any attribute.

  • If you find positioning or sizing difficult in the Layout Editor try zooming in. 

  • You can use Android Studio to view what your app looks like on various screen sizes and orientations. 

  • Different orientations and resolutions can be accommodated by creating additional layout files all with the same name. The system will pick which one to use at runtime. 

  • You can copy and paste components in the Layout Editor to quickly build up repeated UI designs. 

  • A single event handler can be attached to many components. 



Android Programming In Kotlin
Starting with an App

Covers Android Studio 3 and Constraint Layout.

Is now available as a print book:


Buy from: Amazon


  1. Getting Started With Android Studio 3
  2. The Activity And The UI
        Extract: Activity & UI  
  3. Building The UI and a Calculator App
        Extract: A First App 
  4. Android Events
  5. Basic Controls
        Extract Basic Controls
        Extract More Controls ***NEW!
  6. Layout Containers
        Extract Layouts - LinearLayout 
  7. The ConstraintLayout 
        Extract Bias & Chains 
  8. Programming The UI
        Extract Programming the UI
        Extract Layouts and Autonaming Components
  9. Menus & The Action Bar
  10. Menus, Context & Popup
  11. Resources
        Extract Conditional Resources
  12. Beginning Bitmap Graphics
        Extract Animation
  13. Staying Alive! Lifecycle & State
        Extract  State Managment
  14. Spinners
  15. Pickers
  16. ListView And Adapters
  17. Android The Kotlin Way

If you are interested in creating custom template also see:

Custom Projects In Android Studio



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





or email your comment to:




Last Updated ( Monday, 05 August 2019 )