Thursday 16 May 2013

Hello World Using Android Studio


Introduction

Starters or gurus lets dump Eclipse for  IntelliJ IDEA Community Edition based Android Studio.

Caution: Actually don't just yet. Support for projects with several libraries and NDK projects isn't up to the mark on the new IDE yet. 

Documented here are the basic steps to get your first Hello World android app running using brand new Android Studio introduced in Google IO 2013. Click the screenshots to see larger images when required.

Tip: Do consider trying out the Eclipse version ("Hello World : Android : Eclipse"); Eclipse IDE might be bloated in comparison but has support for C/C++ (NDK) code editing etc. 

Download, Install and Start

First of all, download and install Android Studio from the official Android developers web site. The browser auto detects your operating system but double check that you download the package suitable for your operating system. Installation is pretty simple.

Example on Mac OS X

 
Double click the downloaded dmg file.

That would show the Studio and shortcut to Applications folder. Now, just drag and drop Studio into Applications folder's shortcut.

Now start Android Studio for the first time. This could take a couple of minutes before showing the welcome screen.

New Project

Lets create a new project using the wizard shown in the Quick Start section of the welcome screen.
Enter some name for the application and make sure your package name is unique. If you own some domain say mydomain.com, then your package could be com.mydomain.helloworld. While uniqueness isn't of concern for our Hello World project, it will be important for an application that needs to be published. Google Play (Android Market) distinguishes apps by the package name only.


Now click "Next" button to be taken to a screen to choose an icon. Default is good enough for Hello World.



Click "Next" button again and you'll be presented with a list of activity types. Here again, the default choice (Blank) is good enough for our Hello World project.


Applications in Android show screens or pages for the user to interact. Those belonging to a single sort of activity are called an Activity. Our Hello World project is just going to show a single screen with "Hello World" written on it. Call such an activity what ever. Default name for the first activity is MainActivity by this wizard, and is good enough for us.

Click finish and wait for a few seconds for Gradle to do its magic. Gradle is the new build tool used by Android Studio. More about it later.

The project is coded and ready! Lets anyway get some housekeeping tasks done before executing it.

The IDE now throws a tip as it is opening for the first time. Either read each and every tip now or every time you open this IDE or feel free to uncheck the button on the lower left corner.

Eventually close that and see what's written on the main IDE screen.

 Since nothing is open it suggests that we may open the project view with Cmd + 1 (on Mac or Ctrl + 1 on Windows/PC). Lets just do that.

This opens the project view showing the hierarchy tree of the project on the left.

Android SDK Manager


Since this is the first time this IDE is being used, choose to download few more essential pieces using Android SdK Manager. There is a green Android (bugdroid) icon in the toolbar on top.


When Android SDK Manager settles down with a list of packages, choose (tick) the components of the latest API that aren't yet installed. Similarly scroll down and choose all the "Extra" components that aren't yet installed and then click the "Install ... packages".

That will throw a dialog with license information.

Read each if you must before accepting.



Accept using "Accept license" radio button on bottom left.

And then choose to Install.

Download may take a long time to finish. Don't close that window. But return to the IDE with Cmd+Tab or Alt+Tab or whatever but don't close that Android SDK Manager window.

















Project Structure

Lets explore the main content of our project


(If you aren't following this with your own IDE, click the image to see a larger image with readable text.)

Lets see what's in the 'HelloWorld > HelloWorld > src > main' section.


  • java: Java files. In our case just the MainActivity.java created using the wizard.
  • res: Resources. This holds all resources like drawables (icons, background images), strings, styles, etc. 
    • We are encouraged (but not required) to provide drawables for different screen densities. And hence ic_launcher.png is available as different sizes in those drawable-... folders. 
    • Similarly values (eg. style) can be per API type. Earlier APIs may not support Holo theme for instance. 
  • AndroidManifest.xml: This is the file that tells the Android system about the application. 


The source code (Java) is compiled into class file(s) and zipped along with these resources and the manifest to produce a final single file called the APK (Android Application Package). Of course there are a few more pieces than just these. But this level of understanding will do for now.

Execution


Now to run the application we'll need an android device or an emulator instance.

Or we can create an Android Emulator instance to run our app on. Skip the section about AVD and emulators if you are anyway using on an Android device (phone/tablet).

Execute on Device


If you have an Android device, plug it in to the development machine (running the IDE) with USB.
On the device go into

Settings > Security > Unknown sources

(On devices running Gingerbread or earlier firmware: Settings > Applications > Unknown sources)

And check that option to allow installation of apps from sources other than the primary app store on the device. In this case our Hello World over USB.



Now click the button in the toolbar that looks like a play button to run the application.



That would bring a dialog with all connected devices and emulator instances.

When running on a device (phone/tablet) make sure, "Choose a running device" radio button is selected and then choose one of your connected devices and then click the OK button.








That's it! Your device's screen should light up with your "Hello World"!!!

Continue reading the DDMS>LogCat section (below).






















Execute on an Emulator Instance


Android supports virtual devices running almost the same firmware as a regular device to be emulated on the development machine.

The AVD manager's button is right next to the Android SDK Manager button in the toolbar on top. Click that to launch the AVD (Android Virtual Device) Manager.


Create a new AVD instance using the manager and provide some details.


This screen lets us choose some quick values.

Instead of writing every detail by hand, we can choose the type of device to emulate and the boxes are pre-filled with corresponding details.

In particular we wish to use Google API and enable Snapshot.

Google API instances are useful in running applications using Google Maps API etc on top of regular Android APIs.

Using the snapshot feature, we can reduce the startup time from several minutes to couple of seconds except for the first run.

We'd also like to "Use Host GPU" feature, which allows smoother graphics on the emulator by utilizing GPU on the development machine. However at the time of writing this, the two options were mutually-exclusive (and we can't forgo Snapshot feature).

We may of course edit it further.

For instance the emulator by default doesn't seem to care about the camera.


We can choose to use the webcam on our development laptop for both the front and back camera.

Several such customizations are possible.

Finally when we are done, it shows the details of the resultant AVD.
Check that at least the components changed by us match in the dialog.


Now choose the AVD created and click on the "Start.." button.






If this is were not the first time, we'd have chosen to "Launch from snapshot" as shown.

DON'T DO THIS THE FIRST TIME.

Have shown this dialog before the dialog for first time launch to help those who won't read the text and would wish to run forward clicking buttons as shown in the screen shots. 

First time select "Save to Snapshot"
















IMPORTANT: In the dialog shown when running the AVD (emulator instance) for the first time, remember to save to snapshot. This will help us launch from the snapshot next time onwards.

Launching takes several minutes the first time, since there is no old snapshot to start with. Take a short break. Be patient.


When you get back you might find a dark screen as the device is emulating sleep mode using dim screen.



Patience!!!
Emulating Sleep Mode without lock screen



You didn't expect the emulator to turn your laptop's screen to a touch-screen, did you? The emulator can use what is available on your laptop and fake other things like 3G, GPS etc. Some of these can be fed fake values through command line interfaces.


Click (with mouse/touchpad on laptop) and follow the suggestions on screen in the first launch.



Suggestion: From settings, lets do one small thing before shutting it down to save a clean snapshot. Add a gmail (Google) account as it will come in handy for other application tests later.

Add a Gmail/Google account before saving clean emulator state in a snapshot

Now we may Exit the emulator. After going through all the pain and time to start the emulator? Nuts! Yes I am but this time I have a reason. Current state of our emulator is clean and ready to consume applications. Like a freshly booted phone from factory with just one account added. Such an instance is very useful in testing applications. So exiting will help us save a clean state snapshot which we'll use for several months (if we remember to avoid overwriting the snapshot on every fresh launch).

So yes, please close that return to the AVD Manager and choose the one already created by us and click the "Start ..." button again. Don't launch as yet.


From now on always use "Launch from snapshot" and don't wipe. 

This time, remember to Not check "Wipe user data" or "Save to snapshot". Just check "Launch from snapshot" and the emulator should be up and running within a few seconds unlike in our first run.


Now that the one time job of preparing a clean emulator snapshot is done and it is ready, we are happy to execute our Hello World project.




Click the button in the toolbar that looks like a play button to run the application.



That would bring a dialog with all connected devices and emulator instances.

When the emulator is already running, make sure, "Choose a running device" radio button is selected and then choose one of your connected devices and then click the OK button.

(Otherwise, we can create or launch existing AVD from here as well). This too basically just uses the same AVD Manager.








That's it! Your device's screen should light up with your "Hello World"!!!





















DDMS > LogCat


We won't be going into details of debugging etc. But it is worth a mention that anything logged in the application can be viewed through DDMS tool. Launch DDMS using Monitor button (again in the IDE's toolbar along with Android SDK Manager and AVD Manager buttons).









Choose the device of interest from the list on top left.

If that list is empty, killing and restarting adb from command line may help. Use this:
adb kill-server; adb devices

At the bottom of the screen there is a section for logcat and console output. Console output shows the details of build process etc.

LogCat shows the content logged by android applications running on a device.


LogCat section stretched to see in detail

The Code


Now lets look at the code behind wizard generated Hello World app we've already run.


Unlike me you might read the current theme itself. But dark themes on this IDE rocks. The inbuilt dark theme is called Dracula.

Shameless Promotion of Dracula Based Themes
From the menu Android Studio > Preferences, choose IDE Settings > Appearance


Change the 'Theme' from 'Default' to 'Dracula'.

Choose Theme: Dracula instead of Default

Now we may wish to further modify these. In my case, the text editor uses 12 point font where as my lifestyle demands that I use 14 points on my current laptop.






For that we need to go into Preferences > IDE Settings > Editor > Colors and Fonts and make a copy of the current scheme, say Dracula to MyDracula.
Now MyDracula can be edited to our requirement.

 Apply and you may be prompted to restart for all effects to work.



At times this misses out our customized MyDracula. Go back to preferences to choose that from the drop down list in Editor > Fonts and Colors





At last we are back to take a look at our code in custom Dracula style.

MainActivity class in MainActivity.java file extends Android Activity. It overrides onCreate() method with a custom call. The custom call starts with a call to the parent class' (Activity's) onCreate(). Then it sets the layout to show on the screen whenever this activity is launched.

The layout is referenced using 'R', a resources class, that is generated by the build system. R has a reference field for every Android resource in use from this project's resource directory.


Holding down Cmd (or Ctrl) and clicking on the resource name in the IDE will take us to the respective resource in Android Studio. Easy resource resolution is one of the key strengths of Android Studio and a major improvement over Eclipse based legacy build system for Android.



Tip: This typically ends up hiding the project view (the one on the left with all that project hierarchy). It is safe and turned into a tab on the strip on the left of the window. Click to bring it back to life when required.

This layout is the graphical representation of the XML file under res/layout... folder of our project's main directory (we discussed of earlier). This is called the design view of the layout. Click on "Text" next to "Design" tab at the bottom of the layout to see the corresponding XML document.

<a href="https://www.youtube.com/watch?v=e0fXuyL0xVU">https://www.youtube.com/watch?v=e0fXuyL0xVU</a>

If you haven't watched this official introduction (to Android Studio) video already do watch at least now.

String resources are dereferenced by the editor for ease in the layout in Android Studio. We can use Cmd+click (on Mac or Ctrl+click on PC) to go to the respective string resource file.


Now that's where the string "Hello World" came from:
   string.xml > activity_main.xml > MainActivity.java
using these respectively:
   hello_world > @strings/hello_world > setContentView(R.layout.activity_main)

Quick Exercise 0:
Edit the value of hello_world in string.xml (while keeping the same name).
Run the app again and your change will be reflected. 

Quick Exercise 1:
Edit MainActivity.class to log something using Log.d(String, String).
Say
public static final String TAG = MainActivity.class.getName();  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      Log.d(TAG, "OnCreate() was called");  }

Run the app and observe LogCat. Do you see a debug log with your log message? 

One last piece that must be said about the simple project is about the AndroidManifest.xml file. Lets open it. Open project view (if hidden in vertical tab on the left gutter of the window) and scroll down to find AndroidManifest.xml file in main sub-section.


It is from this file that the Android system gathers that MainActivity needs to be run when this application is launched. Remember, there can be several activities in the same application. The ones that can be launched by the system are given a special category "android.intent.category.LAUNCHER".

Others are custom or "android.intent.category.DEFAULT". Such activities are typically invoked by one of the launched activities.

In our simple Hello World app, there isn't much else, well other than icon, name and most importantly the unique package name given in the wizard.

That would be it for now.

4 comments: