Building a user interface

Android Studio allows us to design user interfaces in two ways. The first one is via the powerful Designer Tool which features a drag and drop interface and very complete object inspectors as well as the possibility to immediately preview any changes. The second one involves directly modifying the actual XML files. With Android Studio, one can easily switch between the two.

The basic building block for user interfaces in Android is a View object which is created from the View class. The visual structure of a user interface is generally defined using layouts which are subclasses of the View class. The most commonly used layouts are Linear Layout, Relative Layout and Frame Layout. Other objects such as a TextView, a Button and a Spinner among others are then placed within the layout. The position of those objects within the layout will depend on the type of layout used and on the different attributes of the objects.

A word on the spinner
The spinner is often called a drop-down in other environments. Two examples are shown below (From and To). When clicked on, a pop-up appears and this allows the user to select one of the items. The data source for a spinner is flexible and requires an adapter to work. Android has a number of adapters built-in but one which is simple to use is the ArrayAdapter.

Forex
The first application to develop is one which allows the user to convert among different currencies. The user chooses the currency to convert from and the currency to convert to using two different spinners, then enters the amount in an EditView and finally presses the ‘Convert’ button to get the result. For this user interface, a vertical Linear Layout is used to display the different objects mentioned above one below another.

ForexWithStyle
Now that we have our Forex app working, we want to make it look nicer. In Android, themes and styles are used to override the default look and feel of an application. Styles are just like CSS in web design. A theme is simply a collection of styles.

When building an app, styles are generally defined in /src/main/res/values/styles.xml. In ForexWithStyle we’ll apply the Material Design theme to the Forex app and simply modify some theme based colors which are usually used for branding.

To maintain compatibility with previous versions of Android, it is possible to have two styles.xml files (one found in /src/main/res/values/ and another one found in /src/main/res/values-21/) The latter will be used by devices running Android 5.0 (API 21) and above and the former by devices running previous versions of Android.