Hello everyone, and welcome to this new tutorial from AnRCloud.com!

Our time today will be devoted to the creation of your first Android application. At the end of this tutorial, you’ll know what an Android app is about, you'll know the Eclipse EDI and how to run and test your app.

(if you wish to, you’ll be able to get more information from this website, as more tutos are to come; also, Internet is full of great resources, stackoverflow.com being one of them)

 

Android is an open platform, and creating an app is fun, easy and quick: in a matter of hours, it is possible to create your own games, multimedia apps, … And if you want to share them with the whole world, it is also possible to publish them on Google’s Play Store! So let’s not waste time!

 

We’ll assume Eclipse is installed on your computer, you are not new to computers and you are familiar with Java (no need to be a specialist). And we guess you are J. As nobody is perfect, we’ll be using Windows as our favorite OS. But things are so similar for Unix and Mac users that they’ll get everything at once! So no worry.

 

 

Creation of your first Android App

The first step is to start Eclipse. Double-click on the right icon or choose the relevant menu. Once Eclipse has started, select the ‘File’ menu, choose ‘New’ and then ‘Android Application Project’.

 

 

A new window pops up, where we’ll
- name our app : AnRAssistant (or whatever name you prefer ; however, we’ll keep using this name in the rest of this tutorial and all those to come, so it can be convenient to name your app this way)
- name our project : in the same way, AnRAssistant
- name our package: com.anrcloud.anrassistant (this is the ‘bunch of files’ where we’ll group our code. Java tutos can tell you more if you wish :-) )
- select our Minimum Required SDK : from the drop-down list, select ‘API 14: Android 4.0’ (that means that we’ll not support devices running on an OS older than Oct 2011)
- select our Target SDK: we'll target the latest one, so make sure ‘API 19: Android 4.4’ is selected from the list. Don't be scared, our app will run ok on all devices running an Android version in between our minimum SDK.
- compile with the same SDK version (API 19: Android 4.4)
- choose the ‘Holo Light With Dark Action Bar’ theme

 

When all those items are filled in the form, click the ‘Next’ button to go to the next step.

The next window will help us to configure our project : there you can leave all the parameters with their default values :

That means that
- we’ll be able to define our own icon for the project (that’ll be used to start start the project from the mobile device, and will be displayed on the screen)
- Eclipse will create the project Activity for us (an activity can be seen at first as a screen interface for a mobile application. But we’ll discuss that in more details, and you’ll easily get familiar with this anyway)
- our project will not be a library (but it’ll be an app instead)
- we’ll create our project files in the default location defined by Eclipse
- and we’ll not be using ‘Working sets’ (as this is used to group several project… and this is our first project!)

Then click the ‘Next’ button.



At this time, we get to this window :

This is where you can define your own icon for your app! For now, we’ll keep the default one (lovely green robot, isn’t it?).

Click ‘Next’ to get to the next step.

In the next window, you can define details on your activity. As we don’t want go get lost in details, we’ll just keep the default for this one, will ask Eclipse to create the basics for our activity but will define everything on our own in it and will click ‘Next’ :

 

So here we get to the last window for the creation of our project! In this one, we’ll
- give a name to our activity: AnRAssistant
- give a name to our Layout: activity_anr_assistant (a layout is our Graphical Interface, or GUI, or View for those who are familiar with the MVC pattern… eg all that is displayed on our app screen to the user: text, buttons, images, …)
- give a name to our fragment: fragment_anr_assistant (a fragment is a part of a layout: it can be a group of buttons, …)
- keep ‘None’ for the Navigation Type as we’ll keep simple for the moment : no need for complex navigation mechanisms in a simple app, right?

 

And then just click ‘Finish’! Here we are, we are done with the creation of our new project, Eclipse will do a great job by building the skeleton for our app for us. While It is generating all this stuff, get a break and grab chocolate, you deserve it!

 

After a few seconds of intense work, Eclipse is done. Let’s have a look at what has been created.

The project structure looks like this :

This is the general structure of a project, represented as a tree :
- The top label (root level) stands for the project name: AnRAssistant
- below are all the items making up our project :
      * src: short for ‘sources’, this is the place where all the source code of our project is located
      * gen: short for ‘generated’, this is the place where Eclipse will generate Android files. To be honest, we’ll not do many things today in this place!
      * Android 4.4.2 and Android Private Librairies: these are the places where Eclipse will get all the external stuff it needs. Don’t bother for now
      * asset: this is empty for now, and we like it this way 
      * bin: short for ‘binaries’, this is the place where Eclipse will generate our app.
      * libs : another place for librairies
      * res: short for ‘resources’, this is the most important subtree along with ‘src’, as this is the place where all the resources related to our app are stored: be it images, layouts (remember: interfaces), menu items, strings, styles, …
      * and all files that have a global project reach, the most important being the Manifest file (AndroidManifest.xml) that manages security and so forth.

Click on the arrow left to src, then the package name, and double click the ‘AnRAssistant.java’ label : a file is opened in the main panel. This is the file that contains all the code related to the activity of our project :

First, the package to which this file belongs to is named.
Then, all the librairies needed by our project are imported (clicking the ‘+’ before the ‘import’ keyword will open the whole list). This may be seen as all the external knowledge that we won’t bring ourselves but that is required to make the app work properly.
Finally, our activity is declared: it is a Java class that extends the Activity class defined by Android (and that implements all the loooong and fastidious stuff required to make it work. Thank you Google!). Inside this class, some methods are overridden (onCreate, onCreateOptionsMenu, onOptionsItemSelected for instance) and an inner class created. Let’s put it this way : some geek’s stuff we’ll see later!

Ok! Done with introductions. Nice to meet you all! Now let’s do something out of this: we’ll
- output “I’m your new virtual assistant” to the user through the general interface
- compile our app
- run it on Android’s simulator, aka Android Virtual Device

Let’s now output something to the user : in the project tree, click the arrow before the ‘res’ label, and again click the arrow before the ‘values’ label in the next level. Here we get 3 files : dimens.xml, strings.xml and styles.xml.

Let’s double-click the ‘strings.xml’ file and see what’s inside :

This is a file in the XML format that defines all the strings that are used by the app: instead of ‘hard-coding’ those files in the source code files, they are gathered in a single file dedicated to strings management; the source code only makes references to them, making it easy to update the contents.

We’ll define a new string named “hello_virtual_assistant” with the content “I’m your new virtual assistant”:
- copy-paste the “Hello world!” line
- change the string name from “hello_world” to “hello_virtual_assistant”
- and change the content from “Hello world!” to “I’m your new virtual assistant”
There you are, this is what you should get :

First step : done!

Ok, we’ve defined our string, but we’ve done nothing up to now to have it displayed. What’s the magic to make it happen…

Well, simply find the location in the code where the interface is created, and add this string! Logical, isn’t it?
Technically, this translates to “locate and open the fragment layout file”, and “set the string reference to hello_virtual_assistant”. As simple as that? Sure, let’s do it!

Locate the fragment layout file :

double-click its label to open it in the editor,

find the reference to the “hello_world” string and change it to a reference to the “hello_virtual_assistant” string :

Here we are! The coding part is over.
Now, we have to build our app and to run it on a simulator.

As building and running are done in a single step in Eclipse, we first have to define our simulator : select the ‘Window’ menu, and select ‘Android Virtual Device Manager’

This is the tool to create and manage the Android virtual devices that you’ve defined to execute and test your projects: at first, the list of targets will be empty, and we’ve have to populate it. No problem!
Let’s click ‘New’ on the top right of the window to open the ‘Create New Android Virtual Device’ window and let’s define our own simulation device based on a physical device with a 5"4 screen:
- AVD name : First_Emulator
- Device: 5"4 FWVGA
- Target : Android 4.1.2
- CPU/ABI : ARM (this is the type of architecture we’ll use)
- Skin : Skin with dynamic hardware controls
- Memory options / RAM : 512 (MO)

Ok, now that our simulation device is defined, click the ‘OK’ button to validate, and click the Android Virtual Device Manager by clicking the red cross.

One last step is to tell Eclipse that we’ll use this simulator to run our app on. Right-click the project name ‘AnRAssistant’, select ‘Run as’ and then ‘Run configurations’ :

 

This opens the configuration window where we’ll tell Eclipse what target device to get… understand the Android Virtual Device we’ve just created!
Select the ‘Target’ tab, click the ‘Automatically pick compatible device…” option and select the ‘AVD_for_Nexus_7_by_Google’ virtual device; click ‘Apply’ and ‘Close’.

 

Now that we’ve defined our simulator and told Eclipse we want to run the app on it, we can build our project!
Right-click the project name ‘AnRAssistant’, select ‘Run as’ and then ‘Android application’ :

Eclipse is building our app, and then starting the virtual device (be patient, this may take a while :-) ) :

A new icon appears in the task bar

that corresponds to the Android Virtual Device that we’ve defined: open it by clicking the icon, your app is running on it as if it were on a real device!!!

 

Congratulations, you’ve made and run your first app on Android! Now, you are ready to develop your own apps, and you’ve entered the fantastic world of mobile apps :-)


Meet you soon for more fun mobile tutorials and articles on Android!