Android Programming In Kotlin: Activity & UI
Written by Mike James   
Monday, 30 December 2019
Article Index
Android Programming In Kotlin: Activity & UI
Inside The Activity
Widgets & Constraints

Next select the button in the Widgets section of the Palette by clicking on it: 

palette

If you now place the cursor over the design area you will discover that as you move it various alignments are indicated by lines:

edit

To position the button simply click and a full button, complete with the default caption Button, will appear.

However, simply dropping the button on the design surface isn't quite enough. If you just do this the button will be positioned but without any positioning constraints. If you try running the program you will find that the button sometimes vanishes on the emulator or real device. The reason is that with no constraints to its positioning applied it rises to the top of the screen and is hidden behind other controls.

This behavior is characteristic of the default ConstraintLayout, more of which later. For the moment we just need to apply some constraints to the button.   

The simplest solution is to click on the Infer constraints icon and let Android Studio work out how to position the button:

constraint1

When you click this button constraints are added according to where the Button is positioned. At the moment exactly what constraints you end up applying matters less than the simple fact that there are some. In the screen dump below the button is constrained to be a fixed distance from the top and right-hand side. Notice that you can position the button and then click the Infer constraints button to set the constraints needed to keep the button in its location:

button1

Now you have a button on the UI ready to go, let's add a TextView Widget in exactly the same way – click on its icon in the Palette, position in the Layout Editor and click to set the position. Notice that Android Studio provides positioning information to help you align components of the UI. Again you need to click the Infer constraints icon to position the TextView.

The simplest thing to do is position the TextView where you want it and then click the Infer constraints icon to set the constraints needed for that position:

constraint2

Notice that Android Studio provides positioning information to help you align components of the UI. The simplest approach to creating a layout is to place the components where you want them and then click the Infer constraints icon to apply constraints to fix their position. In practice these constraints may not be exactly what you need but it gives you a starting point.

That's about it and in fact creating a complete complex UI is just more of the same, just a matter of picking components from the Palette and positioning them on the design surface. 

If you now run the program, by clicking the green Run icon (refer back to Chapter 1 if you don't know how to do this) you will see your new UI:

screen2

Of course it doesn't do anything, even if you can click the button. The button does click, but there is no code connected to the button click event to say what should happen, something we will deal with very soon. 

In the next extract we will look at how to make something happen.

 

 

In the chapter but not included in this extract:

  • Properties & Attributes
  • Events
  • Connecting the Activity to the UI
  • Finding View Objects

Summary

 

  • An Activity is the unit of the Android app and it roughly corresponds to one screenful of user interface plus the code to make it work.

  • In most cases you will create an Activity for each UI screen you want to present to your user.

  • Only one Activity from your app is running at any given time. 

  • An Activity is single-threaded and runs on the UI thread.

  • You can set which Activity starts the app in the Manifest. Android Studio sets this to MainActivity by default.

  • The Activity has events corresponding to different stages in its lifecycle. The onCreate event is called when the app first starts and this is where you perform all initialization. 

  • You can also restore the app’s state from previous runs at this point.

  • The Activity then loads a View or ViewGroup object to create its user interface.

  • You can create View/ViewGroup objects in three possible ways: in code, using XML or using the Layout Editor to generate the XML.

  • The Layout Editor is far the easiest way to create a UI.

  • By opening the XML file you can use the Layout Editor to place widgets corresponding to View objects on the design surface. 

  • You can use the Attribute window to set the attributes of each widget. 

  • The XML file that the Layout Editor creates is used by the Activity to set its UI by creating objects that correspond to each of the View objects placed using the Layout Editor. 

  • When you reference a class that isn't defined in the file, i.e. most of them, then you need to add an import statement to the start of the code.

  • If you use Alt+Enter when the cursor is positioned within any word that is displayed in red then Android Studio will help you fix the problem.

  • You can hook up onClick event handlers defined within the current Activity to the widgets using the Attributes window.

  • An onClick event handler is just a public function with the signature myEventHandler(v:View):Unit.

  • The View object parameter is sent to the View object that raised the event. This can be used to access the properties/methods of the View object that the user interacted with.

  • To access other View objects directly you can make use of the fact that Kotlin converts all of the id attributes assigned by the Layout editor into Activity property initialized to reference the corresponding View object.

 

 

Mike James, founder, editor and prolific contributor to I Programmer is also the author of Programmer's Guide to Kotlin and of Android Programming In Java: Starting with an App

 

Android Programming In Kotlin
Starting with an App

Covers Android Studio 3 and Constraint Layout.

Is now available as a print book:

coverKotlinsmall

Buy from: Amazon

Contents

  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

Androidgears

 

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.

square

 



 

Comments




or email your comment to: comments@i-programmer.info

<ASIN:1871962544>

<ASIN:1871962536>



Last Updated ( Monday, 30 December 2019 )