Creating User Interfaces

Exclusive offer: get 50% off this eBook here
Android Studio Application Development

Android Studio Application Development — Save 50%

Create visually appealing applications using the new IntelliJ IDE Android Studio with this book and ebook

$17.99    $9.00
by Belén Cruz Zapata | October 2013 | Open Source

In this article by Belén Cruz Zapata, author of Android Studio Application Development, we will see how to create visually appealing applications using the new IntelliJ IDE Android Studio. The various tools needed for handling the UI of the devices and other properties such as themes are discussed in detail.

(For more resources related to this topic, see here.)

Supporting multiple screens

When creating an Android application, we have to be aware of the existence of multiple screen sizes and screen resolutions. It is important to check how our layouts are displayed in different screen configurations. To accomplish this, Android Studio provides a functionality to change the layout preview when we are in the design mode.

We can find this functionality in the toolbar, the device definition option used in the preview is by default Nexus 4. Click on it to open the list of available device definitions.

Try some of them. The difference between a tablet device and a device like the Nexus one are very notable. We should adapt the views to all the screen configurations our application supports to ensure they are displayed optimally.

The device definitions indicate the screen inches, the resolution, and the screen density. Android divides into ldpi, mdpi, hdpi, xhdpi, and even xxhdpi the screen densities.

  • ldpi (low-density dots per inch): About 120 dpi
  • mdpi (medium-density dots per inch): About 160 dpi
  • hdpi (high-density dots per inch): About 240 dpi
  • xhdpi (extra-high-density dots per inch): About 320 dpi
  • xxhdpi (extra-extra-high-density dots per inch): About 480 dpi

The last dashboards published by Google show that most devices have high-density screens (34.3 percent), followed by xhdpi (23.7 percent) and mdpi (23.5 percent). Therefore, we can cover 81.5 percent of the devices by testing our application using these three screen densities. Official Android dashboards are available at http://developer.android.com/about/dashboards.

Another issue to keep in mind is the device orientation. Do we want to support the landscape mode in our application? If the answer is yes, we have to test our layouts in the landscape orientation. On the toolbar, click on the layout state option to change the mode from portrait to landscape or from landscape to portrait.

In the case that our application supports the landscape mode and the layout does not display as expected in this orientation, we may want to create a variation of the layout. Click on the first icon of the toolbar, that is, the configuration option, and select the option Create Landscape Variation. A new layout will be opened in the editor. This layout has been created in the resources folder, under the directory layout-land and using the same name as the portrait layout: /src/main/res/layout-land/activity_main.xml. Now we can edit the new layout variation perfectly conformed to the landscape mode.

Similarly, we can create a variation of the layout for xlarge screens. Select the option Create layout-xlarge Variation. The new layout will be created in the layout xlarge folder: /src/main/res/layout-xlarge/activity_main.xml. Android divides into small, normal, large, and xlarge the actual screen sizes:

  • small: Screens classified in this category are at least 426 dp x 320 dp
  • normal: Screens classified in this category are at least 470 dp x 320 dp
  • large: Screens classified in this category are at least 640 dp x 480 dp
  • xlarge: Screens classified in this category are at least 960 dp x 720 dp

A dp is a density independent pixel, equivalent to one physical pixel on a 160 dpi screen.

The last dashboards published by Google show that most devices have a normal screen size (79.6 percent). If you want to cover a bigger percentage of devices, test your application by also using a small screen (9.5 percent), so the coverage will be 89.1 percent of devices.

To display multiple device configurations at the same time, in the toolbar click on the configuration option and select the option Preview All Screen Sizes, or click on the Preview Representative Sample to open just the most important screen sizes. We can also delete any of the samples by clicking on it using the right mouse button and selecting the Delete option of the menu. Another useful action of this menu is the Save screenshot option, which allows us to take a screenshot of the layout preview.

If we create some layout variations, we can preview all of them selecting the option Preview Layout Versions.

Changing the UI theme

Layouts and widgets are created using the default UI theme of our project. We can change the appearance of the elements of the UI by creating styles. Styles can be grouped to create a theme and a theme can be applied to a whole activity or application. Some themes are provided by default, such as the Holo style. Styles and themes are created as resources under the /src/res/values folder.

Open the main layout using the graphical editor. The selected theme for our layout is indicated in the toolbar: AppTheme. This theme was created for our project and can be found in the styles file (/src/res/values/styles.xml). Open the styles file and notice that this theme is an extension of another theme (Theme.Light).

To custom our theme, edit the styles file. For example, add the next line in the AppTheme definition to change the window background color:

<style name="AppTheme" parent="AppBaseTheme"> <item name="android:windowBackground">#dddddd</item> </style>

Save the file and switch to the layout tab. The background is now light gray. This background color will be applied to all our layouts due to the fact that we configured it in the theme and not just in the layout.

To completely change the layout theme, click on the theme option from the toolbar in the graphical editor. The theme selector dialog is now opened, displaying a list of the available themes.

The themes created in our own project are listed in the Project Themes section. The section Manifest Themes shows the theme configured in the application manifest file (/src/main/AndroidManifest.xml). The All section lists all the available themes.

Summary

In this article, we have seen how to develop and build Android applications with this new IDE.uide. It also shows how to support multiple screens and change their properties using the SDK. The changing of UI themes for the devices is also discussed, along with its properties. The main focus was on the creation of the user interfaces using both the graphical view and the text-based view.

Resources for Article:


Further resources on this subject:


Android Studio Application Development Create visually appealing applications using the new IntelliJ IDE Android Studio with this book and ebook
Published: October 2013
eBook Price: $17.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :


Belén Cruz Zapata

Belén Cruz Zapata received her engineer’s degree in Computer Science from the University of Murcia in Spain, specializing in software technologies and intelligent and knowledge technologies. She earned an MSc in Computer Science and is now working towards getting her PhD in Software Engineering Research at the University of Murcia.

Belén is based in Spain, although in the field of her PhD, she is now collaborating with the Université Mohammed V-Soussi, in Rabat. Her research is focused on mobile technologies in general, and can also be applied to medicine.
Belén has worked as mobile developer for several platforms such as Android, iOS, or the Web. She is also the author of Android Studio Application Development.

To follow her projects, visit her blog at http://www.belencruz.com and you can follow her on Twitter: @belen_cz.

Books From Packt


Android Application Programming with OpenCV
Android Application Programming with OpenCV

Augmented Reality for Android Application Development
Augmented Reality for Android Application Development

Android User Interface Development: Beginner's Guide
Android User Interface Development: Beginner's Guide

 Android Application Security Essentials
Android Application Security Essentials

Instant Android Fragmentation Management How-to [Instant]
Instant Android Fragmentation Management How-to [Instant]

Android 4: New Features for Application Development
Android 4: New Features for Application Development

Android Development Tools for Eclipse
Android Development Tools for Eclipse

Android Database Programming
Android Database Programming


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software