Welcome to the final part of this review of the Pluralsight course Start Developing For Android by Chiu-Ki Chan.

Chiu-Ki is a mobile developer with a passion in speaking and teaching.

She runs a mobile development company, producing apps such as “Monkey Write” for learning Chinese writing and Heart Collage for snapping photos to stitch into a heart.

This article follows up from Part 1, where we installed Android Studio, imported the Hello World project and got it running on our mobile device.

Building the Hello World App

Basic Hello World

Chiu-Ki introduces us to AndroidManifest.xml, which defines the overall structure of our Android app. We see that the values change as we click on them, from the actual values to the code.

For example “Hello World” becomes “@string/app_name”

We can use cmd + click on this to go to the xml file where it is defined.

We see that our app_name and hello_world strings are found in app/src/main/res/values

Next, Chiu-Ki shows us MainActivity.java.

This has a single function inside it named onCreate and this calls setContentView.

Chiu-Ki explains the purpose of TextView.

We also see the main layout file, activity_main.xml which tells Android what to show in MainActivity.

Chiu-Ki summarizes saying we need 4 files to make a basic Android app:

1. AndroidManifest.xml – for the structure
2. MainActivity.java – the main screen
3. activity_main.xml – the layout file
4. strings.xml – the text to display

 

Drawables

We learn that Drawables are a generic graphical concept, and all graphics objects are Drawables in Android.

For example Bitmap is a type of Drawable and could be one of these types:

• png
• gif
• jpg

Chiu-Ki explains that different devices have different screen densities, so we should not use pixel as a unit when specifying our image sizes.

For this reason we use device independent pixels, dp for short.

Next we learn about the various resource folders and their densities

• drawable-mdpi
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-xxxhdpi

Now we want to add a launcher icon to our hello world app.

The launcher icon is displayed larger when it is in the launcher, and we put it in the midmap folder rather than the drawable folder.

• mipmap-mdpi
• mipmap-hdpi
• mipmap-xhdpi
• mipmap-xxhdpi
• mipmap-xxxhdpi

Chiu-Ki introduces us to Android Studio’s built in tool for generating images for different screen densities.

For the foreground Android Studio provides 3 options: image, clipart or text.

We see a demo of the clipart option with the world icon, colored green, and learn that Android Studio gives us a preview.

After we click OK, we can open the res folder and see all of the generated mipmap files.

Chiu-Ki opens each of these generated files and explains how the sizes relate to their different densities.

We learn that there’s one file with _web at the end of the name, and this is for uploading to the Google Play store.

We also see how to commit our changes to Git, using the VCS menu.

Dimens

We begin with a look at the Resource folders, and then Chiu-Ki demonstrates updating the layout file with a margin.

This is only one line of code but we have hard-coded the value here. Next we extract this variable by creating dimens.xml in the values folder.

With this file created we can replace the hard-coded value with “@dimen/activity_margin”

Next we see that we can set each margin separately, like we might do in CSS.

This is more code but the app looks exactly the same. So why would we want to do this?

1. Extract constants into a variable to reuse multiple times. A single change will be propagated through the app
2. Have different dimensions for each screen size.

We see dimens.xml is under values.

Chiu-Ki shows us that we can right click on the res folder and choose “create a new Android resource directory”.

We now see a new dialog box, which allows us to change the resource type and also change the qualifiers.

If we click on the screen width qualifier, and enter 820 as the value, Android Studio creates a new directory “values-w820dp”

Now, we can copy dimens.xml into here and increase the margins to 64dp.

This only applies to devices 820 pixels or wider, so in order to test this, we will need to create another emulator.

Chiu-Ki shows us how to create a 10.1 inch tablet emulator. This has a width of 800dp in portrait mode, or 1280dp in landscape mode. We see the margin increases as the mode is switched from portrait to landscape.

Styles

The Android styles have changed significantly as new Android versions have been released.

Chiu-Ki shows us 3 different styles:

• The original style
• The Holo style introduced in v11 Honeycomb and made popular in Ice Cream Sandwich
• The material design style introduced in version 21 Lollipop

In Material Design, we no longer show the app icon in the title bar, and the title bar becomes taller.

Ron Amadeo has written an impressively detailed account of the history of Android from Android v0.5 up until the Kit Kat v4.4 release.

Chiu-Ki shows us the system style.

We see our Hello World app running on a Marshmallow emulator and see the default style for this emulator i.e. what we see when we’re not giving our app a theme.

Chiu-Ki creates styles.xml and here sets a style named “AppTheme” which inherits from “android:Theme”

Then, in our AndroidManifest.xml we add a new application attribute android:Theme giving it the values “@style/AppTheme”

We see that it looks a lot different, and to get back to our earlier look, we change the style to “android:Theme.Material”

Android Studio complains that this requires API level 21, meaning if we are going to uses this feature then we can only ship it to devices on Lollipop or later, but we haven’t told Android Studio whether this is what we intend to do.

Chiu-Ki shows us how to specify this with the version qualifier, setting it to 21. This creates a new directory values-v21.

We copy styles.xml into this new folder, and change the original styles.xml to use “android:Theme”

Next we see how to apply the Holo theme to devices using v14 or above. Chiu-Ki shows us how to create a Jelly Bean emulator.

We see the Holo style is being used for our Jelly Bean device, and we can customize it. We see the android:textColor attribute, which is set to blue.

In order to apply this style change across all android devices without a lot of copying and pasting, we can define an extra parent called AppBaseTheme.

Our styles are called “AppTheme” and inherit from “AppBaseTheme”:

<style name=”AppTheme” parent=”AppBaseTheme”></style>

Menu

All our app does currently is display “Hello world”. Here we enhance it so that we can interact with our app.

To add a menu we first create a menu folder underneath the res folder.

In this new folder we create activity_main.xml

In the latest version of Android Studio, it has all changed from how it looks in the video.

In the video we see the XML displayed as text, and we have an XML element and a menu element. In the latest Android Studio, we get an Exception:

A new layout designer was announced during the I/O 2016 Keynote. My first impression of this new feature is not good. I hope that Google will make this feature more user friendly.

What XML code exists behind this layout designer? I opened up the file in Atom to find out:

The file just created has no code in it at all. This explains why the text tab is empty in Android Studio. We can add the text from the video either into the text tab in Android Studio, or using any other text editor that we prefer.

The exception message now disappears from Android Studio. Next, Chiu-Ki shows us how to add an item.

Once the text is entered, Chiu-Ki shows us how to add a new string value resource.

The red text changes to green.

Our next task is to use this XML in our main activity.

We do this by overidding the onCreate options menu function.

Chiu-Ki says we can either type it out ourselves or ask Android Studio to do it for us.

We see how to ask Android Studio to generate this code for us.

This adds the following Java code:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  return super.onCreateOptionsMenu(menu);
}

We don’t want to call super here. Instead we want to use the MenuInflater.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
}

Chiu-Ki explains the purpose of this code for us.

When we run our app again we see the 3 dots that denote our new menu. If we touch this button it displays one menu item with “say bye”

The next step is the make the “say bye” option do something. We can do this with the onOptionsItemSelected function and Chiu-Ki shows us the if statement that we need to write in here.

This also involves adding an android:id attribute in our TextView element in layout/activity_main.xml

In our MainActivity.java Android Studio shows text in red, meaning we need to import our TextView. We also need to create greetingView as a field.

Towards the end of this lesson, we have the following line of Java code to change our hello world message:

greetingView.setText(R.string.bye);

When we run this and click “say bye”, the message “Hello world!” changes to “Goodbye!”

Test

Chiu-Ki explains that there are two kinds of tests in Android:

1. Pure Java tests on JVM
2. Instrumentation tests on device/emulator

Instrumentation tests are for things like our activities. As these typically run on emulators, they are generally slower than Pure Java tests.

We don’t have any pure Java to test. Instead, Chiu-Ki introduces us to Expresso testing.

Expresso is an Android Testing Framework from Google.

We see that we must first check that we have installed the support library. Chiu-Ki has version 23.1.1 installed

Running Android 2.2 Preview 3 on Windows, it tells me that Android Support Library v23.2.1 is obsolete. I install it anyway.

We must also update our build.gradle file.

If you have problems, read Google expresso testing page carefully to troubleshoot.

Once the project is correctly sync’d, add a new folder androidTest and another folder Java inside it.

The java folder is green. This means it is recognized as our test directory.

Open the MainActivity.java, and from the top menu choose Navigate -> Test. Then click select new test…

We choose JUnit4 and the suggested destination package.

Now that we have our test file, Chiu-Ki describes all of the code needed to write our Expresso tests, and how to run our tests.

We tag the class with @RunWith(AndroidJUnit4.class) and use the ActivityTestRule for Expresso to launch our activity for each test method.

Taking Your Next Steps

Chiu-Ki congratulates us on our progress enhancing the Hello World app.

She shows us how to create a new project in Android Studio.

New App

Chiu-Ki says what we have learned is just the beginning. Areas that we may want to explore next are:

• Navigation
• UI
• Compatibility
• Background
• Persistence
• Testing

To find resources for learning these areas of Android, see the Hello World README

Other Android Development Courses on Pluralsight

Exploring Android Studio

Building Mobile Apps with the Ionic Framework and Angular JS

Building Your First Xamarin Android App From Start to Store