This article contains the second chapter from my forthcoming book, Launch Your Android App.
To read the introduction & first chapter, please check out my article here on CodeProject:
http://www.codeproject.com/Articles/1077609/Launch-Your-Android-App-Intro-Getting-Started-part (loads in a new tab)
If you scroll down quickly through this article, you will see that it seems quite long. That's because it includes 22 screenshot images.
I am writing the book as a walk-through in an attempt to create a better information product. I am hoping that this method will allow you to read and experience development as if you are looking over an Android developer's shoulder.
I believe this will be an effective way of covering the intense subject of Android Development.
Attempt At Creating A Hybrid Format
This is somewhat of a hybrid format of a video tutorial merged with a book.
What Am I Attempting to Solve With This Format?
It's an attempt to solve the challenge of reading a book and needing to type code to see the results. Instead, here you will be able to focus on reading and experiencing the code as if you are looking over an Android developer's shoulder the first time. Then, after reading the chapter, it will be far easier to go and write the code yourself only briefly referring back to the book.
Is There Value Added?
I believe, even if you are an advanced developer you will find the walk-through quite interesting, because you can simply skim through the article (and book) as a preview of what you will see when you sit down and work with Android Studio.
Create New Android Project
Click the “Start a new Android Studio project choice”.
When you click the choice, a gigantic window will appear:
The Application name is highlighted and ready for you to type the name of your application.
Go ahead and type the word test, since that is what we are going to call this first app.
As soon as you type that word you will see that Android Studio gives you a hint about naming your app. (See red text in the next screenshot).
Go ahead and change the name to start with an uppercase T and tab to the next field (Company Domain).
I type the name of my web domain in that box (raddev.us) but you should not use my domain.
You should use your web site domain or if you don’t have one, use your first name or first and last name or some other identifier.
Company Domain Value
For now it doesn’t matter much, but when you get ready to deploy your real app to the Google Play store you’ll want something that identifies you more distinctly as the creator of your app.
As you can see, the package name is generated by using the value you type in the Company Domain text box. Of course it also takes the value, flips the order and prepends it to the name of your app.
The package name is a simple way to provide your code with a namespace so that if others create similar Java classes then the two can be distinguished from each other. Again, for now, none of that may make sense to you and that is okay. We will explain it further in later chapters. For now, it is important to not let this small detail bother you. The value is not permanent and is not important at this time.
After you’ve done all that, click the [Next] button.
A new window will appear which allows the Android Studio project template to gather more information about your project.
Android API Levels
The first thing you’ll notice is that the template automatically targets phone and tablet devices which are running API 15 (or newer). This is also known as the API level (API Level 15).
Every major version (1.x, 2.x, etc) of the Android OS is referred to by a code name which is the name of a dessert (or sugary snack). They did this in an attempt to make it easier for users to refer to the major version of the OS they are running. Users can say, “I’m running Ice Cream Sandwich.” “I’m running Jelly Bean.”
Why Target This Version?
In our example, the template has targeted version 4, Ice Cream Sandwich. API 15 refers to the specific version (including minor revisions) of Android. API 15 is version 4.0.3 of Ice Cream Sandwich. This is important to Android developers because version 4.0 of Ice Cream Sandwich may not have certain functions which version 4.0.3 has so certain code may not work properly.
Why Does the Template Target This Older Version?
The template has chosen this slightly older version in an attempt to provide a balance between a large amount of functionality and the large number of users who can run your app.
Newer Versions Smaller Number of Users
If you target a newer platform, like Android 6.0 (Marshmallow, API Level 23) you will be targeting a smaller number of users because not as many devices have released that are running that version of the OS yet.
Statistical Data for OS Usage
You can see the current statistics for number of users running each version of the OS at:
Examining that data can help you choose the best version to target the greatest number of users so that your app will have a larger market.
The template has automatically chosen API Level 15 because it knows it currently provides a strong balance between functionality and market size.
At the time of this writing, if you choose API Level 15 then over 98% of the devices in use will be able to run your app.
Other Platform Types
You can also see that the project template allows you to create an app which runs on wearables (watches, etc), TV and even Android Auto and Android Glass.
For now, we are going to accept the default and run as a phone or tablet app so go ahead and click the [Next] button.
When I clicked that button another installation occurred which looked like the following:
Android Studio determined that I needed some build tools so I could build the app.
Here are the details I saw when it finished:
Finally the [Next] button was enabled so go ahead and click [Next] now and you will see the following:
Choose a Layout Template
Android Studio is prompting us to choose a Layout type for our application’s Activity.
An Android Activity is the User Interface which allows the user to interact with your application. Each Activity should focus on allowing the user to do one thing.
For now, we are going to select the default Activity called Blank Activity. Notice that it is not the Empty Activity -- which is an Activity with nothing on it. Instead this just provides an Activity which will have a few UI elements on it, but which are not filled out in any way.
It will make more sense once we build the application.
Click the [Next] button.
Android Studio wants you to name your Activity so you can refer to it in code.
It suggests the name of MainActivity since this will be the Activity the user sees when the application starts. That is a good name and the name I always like to use in my projects as a developer convention to remind me which Activity is the first one the user sees.
The Layout Name is generated according to the name you type in the Activity name edit box. The layout name is the name of the XML (eXtensible Markup Language) file which is generated by Android Studio. The layout file represents all of the graphic elements that the user sees on the Activity (buttons, edit boxes, etc). We will be learning how to edit and create layout files so that our apps provide a way for users to enter text and run commands by clicking buttons.
Graphic Layout Editor
Android Studio also provides a way to drag and drop User Interface elements like edit boxes and buttons onto our Activities. When you drop these new elements on the Activity, Android Studio will automatically generate the XML layout file for you.
The Title edit box allows you to enter a Title that will be displayed at the top of the Activity.
Go ahead and change that value to “First App” just so you can see that when we build and run the app.
It’ll look like the following:
Menu Resource Name
The Menu Resource Name allows you to name the menu which appears at the top of the Activity so you can refer to it in code. That’s the menu which appears when you click the vertical line of three dots in the upper right corner of the app.
For now, menu_main is fine and again will allow us to remember that it is the main menu for our main Activity.
For now, we will not use a layout Fragment, but we will learn about using them later. Layout fragments are a powerful way to reuse Activities simply by reloading a fragment of the UI into the currently loaded Activity. We will learn how to create and control these powerful elements but that is for later. For now, leave the checkbox unchecked.
Go ahead and click the [Finish] button and Android Studio will create the project.
You will see something like the following with the floating progress bar.
Android Studio is getting everything ready so you can begin to develop your application.
The build system known as Gradle is doing a lot of work preparing your app for development.
Finally, you will see the main Android Studio Window.
Studio also attempts to provide tips to help you learn more about the system each time you start it up. Of course, you can turn these off if they bother you, however, it’s trying to provide these while other work is going on.
Gradle Is Still At Work
Even though the Android Studio main window is now visible, there is still some work going on. You can see at the bottom of the window there is a status bar which will indicate some work that Gradle (the build system) is trying to do in the background.
It is indexing files (to help you find code later). It is building your project so that it can run the first time and it does other tasks in an attempt to use background processing power while you are not doing much.
Finally, if you wait long enough, then Android Studio will open a few files for you and it will look similar to the following.
You can see a bit behind the tips dialog.
I’ll click the [Close] button on the tips and show you the main Android Studio window again.
You can see the main Activity as it will appear on an Android phone.
If you look closely enough you will see that in the top left corner of the Activity, the words, “Hello, world” show up.
Understanding Where We Are In the Project
A lot of code has been generated and there are a lot of things going on in the Android Studio User Interface. It’s quite overwhelming for a first look at a project. Let’s take a look at a few key areas in Android Studio which will clear this up.
First of all, take a look at the far left side of Android Studio which looks like the following:
Project TreeView Similar To File Explorer
This is similar to a File Explorer type of treeview, but a bit different.
Notice that the blue highlight indicates the file that is currently being viewed on the right side.
The blue highlight is showing us that the file named content_main.xml, which is found under the layout folder is currently open. That’s the XML layout file I mentioned when we were creating the project.
Vertical Project Bar
Take a look at the vertical bar, a bit further to the left and notice that there are three words on that bar. They are:
The important thing to note for now is that Project is currently selected. If you click one of the others your view will change. For now, the others won’t do much of anything except slightly change the view in this navigation bar. But later they will have some meaning. The important thing to note for now is that you are on the Project choice and it displays the treeview which allows you to examine the files in the project.
Two XML Files
You will also notice that there are two XML files in the layout folder, even though we only talked about one earlier. The two files are named:
That is simply because the project has split these two XML files up to help you better manage the User Interface elements. We will see more about this in a moment.
The next thing to help you get familiar with the files in the project is to take a look at the folders that the files are contained in.
Again, notice that these XML files which represent the UI are under the folder named layout.
And, then notice that the layout folder is inside a folder named res.
res is an abbreviation for resource. All of the files found under this folder are resources that you project will use. Things like images, icons and other user interface elements. You can see there are other folders such as menu, mipmap and values also under the res folder. We will learn more about those later.
This is all a conventional way of keeping things organized. You could change the way things are organized, but the Android Studio developers have provided you with a structure and understanding it will help you understand what you are doing as you develop your app.
Dude, Where’s My Code?
So far, however, we haven’t seen any of the Java code.
If you take a look all the way at the top of the project tree you’ll see that the top node (folder) is named app.
That folder contains the one we’ve been look at (res) but it also contains one named manifests and another named java.
Again, this is all for organization.
Android Manifest File
The manifests folder has only one file and it is named (surprise) AndroidManifest.xml. More XML. This is a configuration file which provides information to the OS and even to the Google Play store about your application. We will see what this file does as we develop our apps.
For now, though let’s take a look at what is in the java folder.
If you’ll click the triangle-arrow next to the java folder you will see that the folder will expand.
Then, if you’ll expand the one that says us.raddev.test that one will expand also and you’ll see an item with an icon and the label MainActivity.
This is the java code that represents our MainActivity.
Note, you will also see a folder named us.raddev.test(androidTest) but that code represents some code that we can use later to test our application. For now, we’ll ignore that.
Open MainActivity Code
To open (and view) the code, go ahead and double-click the MainActivity item now.
When you do that, the file will be displayed on the right side like the following:
Important Clues to Understanding What You’re Looking At
There are a few important clues to understanding what you’re looking at.
The title bar (light blue) has changed to show you the complete path to the file you are viewing on the right.
The project navigation tree on the left shows MainActivity highlighted.
The tab above the content on the right displays the name of the file MainActivity.java.
Collapsed Sections of Code
However, you still aren’t seeing all of the code.
The Android Studio editor collapses sections of code, places a [+] symbol next to them and displays ellipses (...) and arrows where it has collapsed code.
Here’s the first example at the top of MainActivity.java, where the imports section is located:
Click the [+] button to expand the code and you will see:
A little further down there is some more collapsed code which looks like the following (I highlighted the section)
See the small arrow within the code (after the word (view))?
That is a collapsed section of code. To see all of the code, click the [+] button on the left again.
It’ll look like:
You can see that the code is actually doing something with the Snackbar which shows some kind of message like, “Replace with your own action.”
Now that you know how to create a new project and how to navigate around in Android Studio a bit, we are ready to go ahead and build and run the app.
Building the app is quite easy. It’s just a simple matter of executing a command in Android Studio. However, running the app contains a few challenges since we will have to run the app on an Android emulator.
If all goes well, the emulator will start up and run perfectly on your computer. There are quite a few steps to successfully get through to get it running though.
Again, since this chapter has had a lot of basics in it and because building and running the app is going to take quite a lot of screenshots and explanation we will do that work in chapter 3.
This chapter has attempted to provide a good walkthrough of the experience of using Android Studio to generate your first project. If you’ve followed along you’ve come a long way and it hasn’t taken long.
As we build and run the application on a emulator you’ll gain a lot of knowledge about how the system works.
We will dive into running the emulator and executing our app immediately in Chapter 3.
First release of this article: 2015-02-10