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

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

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:

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:

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:

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:

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:

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

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.

Comments

Make a Comment or View Existing Comments Using Disqus

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

<ASIN:1871962544>

<ASIN:1871962536>