Ilham On Android: Designing The Interface (Part 1)

Google recently released a new IDE for developing Android application, namely Android Studio. This post will be the first of a series of posts briefly on how to use the IDE and finally come out with a simple app.

I will be developing a BMI app, which is easier to understand. Let’s set out some requirements for the app:

New Project

At this time of writing, I am using Android Studio 1.0.2, and a Nexus 4 using Android 5.0.1. Put in the following details (you can put your own if you like) for our new app:

Application name: Body Mass Index

Company domain: i906.my

Package name: my.i906.bmi

Phone and tablet minimum SDK: API 16: Android 4.1 (Jelly Bean)

Complete the wizard by choosing a new blank activity. As soon Android Studio prepared the necessary stuffs, connect an Android device, and run the project by pressing Ctrl+R to see everything works fine.

Hello world!

Color Theme

The Material theme allows us to set base colors for the app. I have chosen two colors from the guidelines and set it in colors.xml and styles.xml files. Most of the widgets will match the colors that have been set as below.

Launcher Icon

The icon

I used an icon generator to create a random icon for the app. The original icon, ic_launcher.png files are located in the drawable folders. The generator created a zip file, and its contents were merged into the project’s folder.

Screen Layout

The Hello world layout above belongs to Main Activity we have created earlier. The layout file is located in the layout folder, activity_main.xml.

Layout Editor

We want to show the BMI results on the top, followed by two input boxes for entering the BMI calculation, the height and the weight. Android Studio allows drag and drop of several widget, you can preview the layout on how it would look like on the device. Though for some reasons, I prefer to use the text editor instead.

Drag/write some TextView and EditText into the editor. Use LinearLayout to stack widgets or other layouts. The code I have written for the layout can be seen here.

As seen in the styles.xml above, the app is using AppCompat theme. This theme is used for bringing Material themes to devices that are not using Lollipop yet. The theme provides several styles that can be used in the app. To use these styles, simple add @style/TextAppearance.AppCompat.STYLENAME to the style tag of the widget.

I also consolidated all label texts in one file, strings.xml for easier management.

The completed layout

Build and run the project again. If all is in order, the resulting app should look like this:

You can only enter numbers and a single decimal point in the input boxes. The code android:inputType=”numberDecimal” tells the keyboard to show the relevant buttons for inputting numbers.

Conclusion

In this post, only a brief introduction on layout have been touched. The codes to calculate the BMI will be available in the next post.

The codes for this part also can be found in this repository. As always, thanks for reading. Feel free to leave comments or questions!