while(thoughts){ "i am writing"}

As I spent a lot of time searching for android video tutorials, here are the links to the best I could find out. All these are free and good for learning from scratch (for someone with programming background)

Free Android Video Tutorials:

Android Bootcamp Screencast Series:

http://marakana.com/techtv/android_bootcamp_screencast_series.html

Oreilly – Developing Android Applications:

http://training.oreilly.com/androidapps/

A very good series of free video tutorials:

http://xtensivearts.blip.tv/posts?view=archive&nsfw=dc

Creating Android Themes(Video Tutorial Series):

http://forum.xda-developers.com/showthread.php?t=593932

I appreciate if anyone has more links, please post it in comments and I ‘ll try to add them to this link series with due credits.

Enjoy Learning Android..

By default, the action bar contains three main content areas (provided by flex api):

• navigationContent (on the left)
• titleContent (in the middle)
• actionContent (on the right)

As every view has action bar, any changes in individual views will override the content from the application.

Have fun

In my last article we learned about creating a mobile application using Flash Builder and using emulator to test (run) it. Today, we will take our next step. We will learn:

• Creating multiple views
• Passing data across views

Our sample application for this would be IMDB Trends.

In this application, we will create a search page where user can search for a movie name against IMDB database and get some information about that movie on a new page.

As we learned in my past article, create a New Mobile Application. Lets name it IMDBTrends. As you finish it, Flash Builder will generate the basic application structure with IMDBTrends.mxml and IMDBTrendsHome.mxml.

IMDBTrends.mxml is shown below:

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 firstView="views.IMDBTrendsHome">
 </s:MobileApplication>

Now, open IMDBTrendsHome.mxml in the design mode. Set the title property to “IMDB Trends”. Add a textinput component and a button component. Change the label property for button to “Search”.

It should look like as below:

Add one more view using File > New > MXML Component. Name it as IMDBMovieDetailView.mxml. As name suggests, it will act as the detail view for the information returned from IMDB service. Open it in design mode again and create a view as shown below:

Now its time to connect to the real data. For that we will utilize the inbuilt support from Flash Builder.

From the Menu items, select Data > Connect to Http…

Change Operation1 to getMovieDetails and change the URL to http://www.deanclatworthy.com/imdb/

We will pass two parameters in this request i.e.

q=name of the movie,

yg=year guessing (set it to 1).

You can find more details at IMDB API.

Add these two parameters as Data Type String.

Provide Service Name as ‘IMDB’ and Service Package as ‘services.imdb’.

It should look like as in the below picture:

In Data/Services panel, under the IMDB service, right click the getMovieDetails to bring the context menu and choose Configure Return Type..

Make sure Auto-detect is selected and click Next.

Select the 2nd option i.e. Enter a complete URL including parameters and get it

In the box below which says URL to get: Provide this URL: http://www.deanclatworthy.com/imdb/?q=The+Godfather&yg=1

Click Next. It will call the service and fetch the result for you.

Enter MovieDetails for the new data type and click Finish.

Again, from the context menu, select Generate Service Call. It will generate the service code for you and will also generate the call to this service in your code i.e. getMovieDetails(…) and you are almost done. Bind your view to this service call to reflect the results.

As we had created the infrastructure for our application, lets connect our search view to this result view.

Open IMDBTrendsHome.mxml and add a click handler to your search button. Add the following code to your view:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:imdb="services.imdb.*"
 title="IMDB Trends">

 <fx:Script>
 <![CDATA[
 protected function button1_clickHandler(event:MouseEvent):void
 {
 if(searchTextInput.text) navigator.pushView(IMDBMovieDetailView, searchTextInput.text);
 }
 ]]>
 </fx:Script>

 <s:TextInput id="searchTextInput" x="10" y="148" width="325" height="50"/>
 <s:Button id="searchButton" x="345" y="148" height="50" label="Search" click="button1_clickHandler(event)"/>
</s:View>

As you see in the above code, every view has access to navigator. And we call the pushView function on it where we pass the next view(IMDBDetailView here) along with the data that we wanted to pass.

In IMDBMovieDetailView.mxml, add a refresh function.

Also,  in our opening <s:View…> tag, add viewActivate=”refresh()”. It will cause refresh function to be called whenever this details view will be activated. See the code below for IMDBMovieDetailView.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:imdb="services.imdb.*"
 title="IMDB Trends"
 viewActivate="refresh()">

 <fx:Script>
 <![CDATA[
 public function refresh(): void {
 getMovieDetails(String(data), "1");
 }

 protected function getMovieDetails(q:String="Cast Away", yg:String="1"):void
 {
 getMovieDetailsResult.token = iMDB.getMovieDetails(q, yg);
 }

 ]]>
 </fx:Script>

 <fx:Declarations>
 <s:CallResponder id="getMovieDetailsResult"/>
 <imdb:IMDB id="iMDB"/>
 </fx:Declarations>
 <s:Label x="10" y="10" width="140" fontWeight="bold" text="Title: "/>
 <s:Label x="10" y="41" width="140" fontWeight="bold" text="Country: "/>
 <s:Label x="10" y="72" width="140" fontWeight="bold" text="Languages: "/>
 <s:Label x="10" y="103" width="140" fontWeight="bold" text="Genres: "/>
 <s:Label x="10" y="134" width="140" fontWeight="bold" text="Ratings: "/>
 <s:Label x="10" y="165" width="140" fontWeight="bold" text="IMDB Url: "/>
 <s:Label x="160" y="10" maxDisplayedLines="1" text="{getMovieDetailsResult.lastResult.title}"/>
 <s:Label x="160" y="41" maxDisplayedLines="1" text="{getMovieDetailsResult.lastResult.country}"/>
 <s:Label x="160" y="72" maxDisplayedLines="1" text="{getMovieDetailsResult.lastResult.languages}"/>
 <s:Label x="160" y="103" maxDisplayedLines="1" text="{getMovieDetailsResult.lastResult.genres}"/>
 <s:Label x="160" y="134" maxDisplayedLines="1" text="{getMovieDetailsResult.lastResult.rating}"/>
 <s:Label x="160" y="165" maxDisplayedLines="1" text="{getMovieDetailsResult.lastResult.imdburl}"/>
</s:View>

And our application is ready to run.

In case you have any difficulties, just drop me a comment with your mail address and I will mail you the project file.

Have fun

As beta version of Flash Builder Burrito is available to download, it brought a lot of new things to Flex world for developers. Now developers can write code for mobile applications as well along with web/desktop applications.

Today, we will create our first application. In our first application, we will learn:

• How to create a mobile app
• Using emulator to run our mobile app

Lets talk about our first objective, i.e. How to create a mobile app using Flash Builder

Step 1:  File -> New -> Flex Mobile Project

Step 2:  Specify Project Name and click Next

Step 3:  Leave the default settings as shown in the below screenshot and click Next

Step 4:  Application Server type: None and specify output folder or leave as is bin-debug and click Next

Step 5:  Leave as is and click Finish.

Here is what you will get as a generated code template for your mobile project.

Lets see what has been generated for us in AIRTempAndroid.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					 xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.AIRTempAndroidHome">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:MobileApplication>


and AIRTempAndroidHome.mxml 
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="Home">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:View>

Lets write some utility code here. We will create a temperature converter that will calculate temperature in Celsius OR Fahrenheit for the given value.

We just need to change the code in our view component, i.e. AIRTempAndroidHome.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="Home">
	<fx:Script>
		<![CDATA[
			private function handleAction(e:Event):void {
				switch(radioButtonGroup.selection.id)
				{
					case "toCelsiusRadioButton":
					{
						resultTextInput.text = convertFahrenheitToCelcius(parseFloat(resultTextInput.text)).toString();
						break;
					}
					case "toFahrenheitRadioButton":
					{
						resultTextInput.text = convertCelciusToFahrenheit(parseFloat(resultTextInput.text)).toString();
						break;
					}
					default:
					{
						trace("This block of code should never reach");
						break;
					}
				}
			}
			
			// Converts to celcius
			private function convertFahrenheitToCelcius(fahrenheit:Number):Number {
				return ((fahrenheit - 32) * 5 / 9);
			}
			
			// Converts to fahrenheit
			private function convertCelciusToFahrenheit(celsius:Number):Number {
				return ((celsius * 9) / 5) + 32;
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:RadioButtonGroup id="radioButtonGroup"/>
	</fx:Declarations>
	
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:TextInput id="resultTextInput" text="24"/>
		<s:RadioButton id="toCelsiusRadioButton"
					   label="to Celsius"
					   group="{radioButtonGroup}"/>
		<s:RadioButton id="toFahrenheitRadioButton"
					   label="to Fahrenheit"
					   group="{radioButtonGroup}"/>
		<s:Button label="Calculate" 
				  click="handleAction(event)"/>
	</s:VGroup>
</s:View>

And here is your first Mobile application. Lets try to Run and see how it looks

Second objective : Using emulator to run our mobile app

For running this app in Emulator, right click your mobile application folder in Package Explorer and from the context menu, select Run as -> Mobile Application as shown below

For the first time, it will open the Run configuration as below:

Select On desktop option and select the device that you like to develop for.

And here is your running application on an emulator. See below:

Use Device Menu to rotate your virtual device and see your app (as below)

Thats it. Enjoy flexing mobile apps

In my previous post, we learned how to create a basic Hello World application using ADT plugin in eclipse on android platform. Today, we will learn another basic aspect of any programming language, i.e. library project.

Library project ~ shared source code and resources among multiple application projects.

A few key facts about library projects:

• A library project can be referenced by single/multiple applications at the same time.
• Multiple library projects can be referenced by single application.
• Library project can not be build on it’s own. Instead, at application build time, a library’s compiled src code is included in .apk files.
• For a resource (resource ID) that exists both in application and library, the resource in application will get higher priority, thus, the resource in library will not be compiled in the application.
• As an application can have multiple libraries, if those multiple libraries have same resources (resource ID), resource in library with higher priority will be included and other will be discarded.
• The order in which libraries are added defines their priority, means the library listed at top will gets higher priority. At build time, libraries are merged with the application one at a time, starting from the lowest priority to the highest.
• A library can not reference another library, but, it can import an external (JAR) library.

Creating a Library Project is no different then creating a normal application project in eclipse. Here are the steps:

Android Library Project Creation

1. Create New Project using File > New > Other.. > Android > Android Project and click Next.
2. Specify Project name(For Ex: “androidlibrary”) See screenshot below.
3. Contents: Select Create new project in workspace
4. Build Target: Select a version of your choice(For Ex: Android 2.2, API level 8 )
5. Properties: These values are code specific.

• Give Application Name as you wish(For Ex: “Android Library”)
• Package Name: anything of your likes(For Ex: “md.androidlib”)
• Create Activity: Selected. Give a name to your library activity class (For Ex: “ActivityLib”)
• Minimum SDK Version: Put the integer value listed for the Build Target for Level column as in Step 4 above.

Click Finish.

So as you seen, it is no different than creating a standard application project.

Now to make it a library project,

1. Click on Project > Properties.
2. Select Android on the left panel.
3. Select “Is Library” checkbox to recognize this as a library project. See screenshot below.

Android Library Project

And you are done.

Android is a layered environment built upon a foundation of Linux kernel. Android applications are written in Java programming language and they run in Dalvik Virtual Machine, an open source technology. Each Android application runs within an instance of the Dalvik VM, which in turn resides within a Linux-kernel managed process, as shown below:

Dalvik Virtual Machine

Android platform layers:

Android Platform Layers

A more illustrated figure is shown below:

Android Platform Architecture

Source: Wikipedia, IBM

Disclaimer: All the credit for the above images goes to their authors. Links provided in Source.

As we are done with our android setup in the first step in my previous post. Its time to make use of it in our very first application called “Hello World”.

Start you eclipse with ADT plugin installed and select DDMS perspective.

Step by step guide to Hello World app:

Create Android Project

1. Create New Project using File > New > Other.. > Android > Android Project and click Next.
2. Specify Project name(For Ex: “helloworld”) See screenshot below.
3. Contents: Select Create new project in workspace
4. Build Target: Select the lowest possible version for backward compatibility(For Ex: Android 2.1, API level 7)
5. Properties: These values are code specific.

• Give Application Name as it will appear as title of your application(For Ex: “Hello World!!”)
• Package Name: anything of your likes(For Ex: “md.android”)
• Create Activity: Selected. Give a name to your base activity class (For Ex: “HelloWorldActivity”)
• Minimum SDK Version: Put the integer value listed for the Build Target for Level column as in Step 4 above.

Click Finish.

So we have our helloworld project code generated by eclipse now.

Here is the folder structure generated by eclipse and brief detail about each folder:

Android Project Structure

src: all source-code will go here.

gen: contains java files generated by ADT plugin.

assets: used to store your application raw asset files.

res: used to store application resources. Its like resource bundles that we used in Java, but additionally, it will also store images. These resources will be used across devices with different dimensions, color needs etc.

default properties: contains your project settings. It should never be edited manually.

Creating an Android Virtual Device (AVD):

Launch Android SDK and AVD Manager using eclipse Windows > Android SDK and AVD Manager Or using the icon in the eclipse toolbar. See below screen shot:

In the Android SDK and AVD Manager, select Virtual Devices in left panel.

Android SDK and AVM Manager

Click on the “New” button to launch the New AVD creation wizard. Fill in the specifications for your new device as in the below screenshot:

Note: Make sure your AVD device target satisfies your application’s Build target.

Click “Create AVD”.

Now you can see the just created AVD listed in List of existing AVDs. Select this AVD and Click on “Start” button to start this virtual device.

Don’t panic.. as it might take significant time to appear depending on your machine hardware. Also, once it’s started, you will see the bootstrap process going on with “ANDROID_” on the black screen as in the screenshot:

Android Virtual Device Initializing..

Once its loaded, the below screen will appear.

Android Virtual Device Loaded

Now back to Eclipse,

Select your just created project, in our case it’s “helloworld”.

Right click > Run as.. > Android Application.

And Here it is.. Your Hello World!! running in the virtual device. Screen shot below:

Note: In case, if Android’s landing screen(as in above screenshot) is still appearing, just Unlock the Virtual Device screen by sliding the LOCK slider towards right, and as soon as it gets Unlocked, you can see the Hello World app running.

So today we created our first android application “Hello World!!”.

In our next article we will learn about library projects.

If you are here, then i am sure that you must be the one with thoughts of playing with android next.

I am heading to explore the android next and on the way will write about my findings about it. Also, I will try to provide the steps followed from scratch just for the guidance for a few novice.

So here is my first in this series, Setup for Android.

1. Download the Android SDK.
2. Once you downloaded the zip file(in first step), unzip it in your development folder(For ex: C:\android) and execute SDK Setup.exe file. It will open “Android SDK and AVD Manager”.
3. As soon as you launch, it will start downloading packaging from internet. In case, it failed(like in my case), select “Settings” on the left panel and from the two available checkboxes at bottom, select “Force https…”.
4. Now come back to “Installed Packages” and click on “Update All…” again.
5. Select the packages that you want to work on(See list below for my choice). In case you are unsure, just click on “Accept All” on the right side of the window.
6. Now it will start downloading the packages required which will take a while.

List of packages to download:

• Documentation for Android SDK, API 8, revision 1
• SDK Platform Android 2.2, API 8, revision 2
• Samples for SDK API 8, revision 1
• Google APIs by Google Inc., Android API 8, revision 2
• SDK Platform Android 2.1-update1, API 7, revision 2
• Samples for SDK API 7, revision 1
• Google APIs by Google Inc., Android API 7, revision 1
• USB Driver package, revision 3
• Market Licensing package, revision 1

Eclipse ADT Plugin:

Install/update this ADT plugin using this URL: https://dl-ssl.google.com/android/eclipse/

Configuring ADT Plugin:

1. Select Windows > Preferences
2. Select Android on left panel
3. Update the sdk location to sdk folder as you did above(For Ex: C:\android\android-sdk-windows)
4. Press Apply and Ok. You are done configuring ADT Plugin.

And yes.. You are done with your First Step (Setup) here.

In the next post, we will create a Hello World app using Eclipse ADT Plugin.

https://dl-ssl.google.com/android/eclipse/