Creating User Interfaces in Android - Android

Application user interfaces can be simple or complex, involving many different screens or only a few. Layouts and user interface controls can be defined as application resources or created programmatically at runtime.

Creating Layouts Using XML Resources

As discussed in previous chapters, Android provides a simple way to create layout files in XML as resources provided in the /res/layout project directory. This is the most common and convenient way to build Android user interfaces and is especially useful for defining static screen elements and control properties that you know in advance, and to set default attributes that you can modify programmatically at runtime.

You can configure almost any ViewGroup or View (or View subclass) attribute using the XML layout resource files. This method greatly simplifies the user interface design process, moving much of the static creation and layout of user interface controls, and basic definition of control attributes, to the XML, instead of littering the code. Developers reserve the ability to alter these layouts programmatically as necessary, but they can set all the defaults in the XML template.

You’ll recognize the following as a simple layout file with a LinearLayout and a single TextView control. This is the default layout file provided with any new Android project in Eclipse, referred to as /res/layout/main.xml:

This block of XML shows a basic layout with a single TextView. The first line, which you might recognize from most XML files, is required. Because it’s common across all the files, we do not show it in any other examples.

Next, we have the LinearLayout element. LinearLayout is a ViewGroup that shows each child View either in a single column or in a single row. When applied to a full screen, it merely means that each child View is drawn under the previous View if the orientation is set to vertical or to the right of the previous View if orientation is set to horizontal.

Finally, there is a single child View—in this case, a TextView. A TextView is a control, which is also a View. A TextView draws text on the screen. In this case, it draws the text defined in the “@string/hello” string resource.

Creating only an XML file, though, won’t actually draw anything on the screen. A particular layout is usually associated with a particular Activity. In your default Android project, there is only one activity, which sets the main.xml layout by default. To associate the main.xml layout with the activity, use the method call setContentView() with the identifier of the main.xml layout. The ID of the layout matches the XML filename without the extension. In this case, the preceding example came from main.xml, so the identifier of this layout is simply main:

The term layout is also used to refer to a set of ViewGroup classes such as LinearLayout, FrameLayout, TableLayout, and RelativeLayout. These layout classes are used to organize View controls. We talk more about these classes later in this chapter. Therefore, you could have one or more layouts (such as a Linear Layout with two child controls— a TextView and an ImageView) defined within a layout resource file, such as /res/layout/myScreen.xml.

Creating Layouts Programmatically

You can create user interface components such as layouts at runtime programmatically, but for organization and maintainability, it’s best that you leave this for the odd case rather than the norm. The main reason is because the creation of layouts programmatically is onerous and difficult to maintain, whereas the XML resource method is visual, more organized, and could be done by a separate designer with no Java skills.

The following example shows how to programmatically have an Activity instantiate a LinearLayout view and place two TextView objects within it. No resources what so ever are used; actions are done at runtime instead.

The onCreate() method is called when the Activity is created. The first thing this method does is some normal Activity housekeeping by calling the constructor for the base class.

Next, two TextView controls are instantiated. The Text property of each TextView is set using the setText() method.All TextView attributes, such as TextSize, are set by making method calls on the TextView object. These actions perform the same function that you have in the past by setting the properties Text and TextSize using the Eclipse layout resource designer, except these properties are set at runtime instead of defined in the layout files compiled into your application package.

To display the TextView objects appropriately, we need to encapsulate them within a container of some sort (a layout). In this case, we use a LinearLayout with the orientation set to VERTICAL so that the second TextView begins beneath the first, each aligned to the left of the screen. The two TextView controls are added to the LinearLayout in the order we want them to display.

Finally, we call the setContentView() method, part of your Activity class, to draw the LinearLayout and its contents on the screen.

As you can see, the code can rapidly grow in size as you add more View controls and you need more attributes for each View. Here is that same layout, now in an XML layout file:

You might notice that this isn’t a literal translation of the code example from the previous section, although the output is identical, as shown in Figure.

Two different methods to create a screen have the same result.

Two different methods to create a screen have the same result

First, in the XML layout files, layout_width and layout_height are required attributes. Next, you see that each TextView object has a unique id property assigned so that it can be accessed programmatically at runtime. Finally, the textSize property needs to have its units defined. The XML attribute takes a dimension type instead of a float.

The end result differs only slightly from the programmatic method. However, it’s far easier to read and maintain. Now you need only one line of code to display this< layout view. Again, if the layout resource is stored in the /res/layout /resource_based_ layout.xml file, that is setContentView (R.layout.resource_ based_layout);

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Android Topics