Android Video Tutorials (links)

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..

Flash Builder Mobile Development – Action Bar

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 🙂

Flash Builder Mobile Development – Creating Views and passing data across views

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 😉

Android: First Step (Setup)

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/