Android Samsung Nexus S

I’ve been neglecting the blog for a while.. sorry RSS subscribers.

I bought the HTC Magic 2 years ago when it first came out in Canada. That’s why most of my blog posts about Android development are from 2 years ago :).

I decided it was time to get the latest and greatest Android phone in Canada: the NEXUS S. A friend currently working at Google on Android highly recommended the device. And the fact that the phone is unlocked, Rogers will not put its apps on it, and Google will push updates directly to the phone without Rogers mandating when, made it even easier to pay the $300. In Canada the phone currently sells for $99 on a brand new contract, but you know how North America works: if you already have a contract you are not as enticing to the carriers as a brand new client with no contract. So, I had to pay a few fees to get the phone for $300 instead of $100.

I won’t go into a full review of the phone. There are plenty of sites that review the phone and have been doing it since the beginning of the year. I will only review a couple of items that I was worried about and you might be too if you are looking at getting this phone (or just got it).

Item 1: Overall

Overall I am extremely happy. The problem with my HTC Magic was that it was getting slower and slower with every update and every app. It was still running Eclair. So many new technological advancements (and apps) have appeared in the past 2 years, I was ready to take them head on with a new phone!

Item 2: There is no notification light

NoLED App

This is not new; a few of the other Samsung Androids also don’t have a notification light. I loved seeing the button light up on the HTC Magic but I cannot do that any more. I downloaded an app called NoLED (http://www.appbrain.com/app/noled/com.led.notify). It works quite well. You set it up to monitor apps that would give you notifications, and the app lights up a few pixels (or icons) on your screen when you get a notification. I used it for about a week and then I decided to stop using it. I want to see how difficult it is for me to manually check my phone, without having my phone tell me that I have a notification. But I also stopped using it for 2 other reasons:

- In order for the few pixels to light up, the buttons on the phone light up. The picture on the left is a little blurry, but the top-left of the screen has a red dot lit up and the 4 buttons on the bottom lit up. I don’t like that the 4 buttons on the bottom light up. There is a Setting in the app to not light these buttons up, but I turned that setting on and, well, you can see they are still lit up. I might be wrong here, but I feel like it wastes my battery when the NoLED app lights up those few buttons- because it is “waking up” my phone. I don’t think it makes such a big difference to battery usage and I recharge my phone nightly regardless, but it bothered me to think that the phone screen was on for extended periods of time.

- To awake the screen and unlock the phone you have to press the physical button on the top-right, however when you get a notification you should NOT press the top-right button. Essentially the NoLED app wakes up your phone, so the screen is now turned on with just a pixel lit up, so if you press the button on the top-right you will turn off the screen, not unlock your phone. It took some time to get used to… I would see a notification, press the button in the top-right, the screen would turn off, I’d get pissed off, I would press the button again, the screen would turn on (with the NoLED pixel only), then I would press any of the 4 buttons at the bottom of the phone (e.g. the Home button) which would turn on the screen and allow me to slide the thingy over to unlock it.

Anyways, cool app, try it out. I’m going to try and see how I can live without a notification light.

Item 3: There is a weird green bar on the left of the phone

Thin Green Line

This scared me. I thought I had a faulty phone and had to return it - right after I got it! But after reading a few things online, it seems like the green line of 1 pixel on the left of the screen has something to do with the AMOLED screen. I tried to take a picture of it here, but I don’t think you can see much. It only appears if you look closely and only on light backgrounds. http://androidforums.com/samsung-fascinate/229454-green-line-screen.html

Item 4: Text messaging limit

I had 4000+ text messages on my HTC Magic. Opening the Messaging app would take 15 seconds every time I wanted to send or read a message. Eventually I downloaded the app “Delete Old Messages”. It took 8 hours to delete 4000 messages. It seems that with Gingerbread, the Android team understood that too many text messages can make the app slow, so now there is a setting in the Messaging app to clean text messages on a regular basis. I plan to use this setting :).

Item 5: Near Field Communication

NFC!!

http://en.wikipedia.org/wiki/Near_field_communication. To quote Steve Jobs, “This is going to change everything,.. again”. I love that all phones coming out have NFC readers and the Nexus S is one of the first (here in Canada at least). The technology is not new, and is being used in cellphones in Asia and Europe, but for the laggard Canada it is new and exciting! Soon you’ll be able to pay just by swiping your phone, and who knows what other uses will appear. Maybe you will be able to check in on FourSquare just by swiping your phone as you walk into a bar, rather than having to press anything on your screen.

And conclusion

That’s it for now. Great phone, I highly recommend it. I think I’m going to start playing with NFC now. Some links for other NFC enthusiasts:

• http://stackoverflow.com/questions/4417911/where-can-i-buy-nfc-tags
• http://www.tagstand.com/

The official release date for Windows Phone 7 is October 11th (in the US). Word around the internet is that it will be released in Canada around the end of October / beginning of November. LG, Samsung, HTC, and Dell have all developed handsets that will be available in Canada. One of the services we offer at my place of employment is mobile development and since we are a Microsoft Gold Partner, developing on Windows Phone 7 is our forte (actually it’s the only mobile development we do). I assume as this platform gets bigger more people will jump to learn how to program on it, so this is a quick-and-dirty list of resources that will help you to learn about programming on Windows Phone 7.

1. http://developer.windowsphone.com/
   If you are a developer, the first thing you need to do is visit the developer’s home page. You can download tools from here, read about the SDK, look at sample code, and get questions answered in the forums.
2. http://silverlight.codeplex.com/releases
   You must download the Silverlight Toolkit for Windows Phone 7. It has alot of great Silverlight controls that will make your app much cooler. For example, the version of the SDK and Silverlight that you get from the first link does not have a calendar control. The Toolkit from this link has a DatePicker and a TimePicker control that you can just plop on your page and use.
3. http://channel9.msdn.com/Learn/Courses/WP7TrainingKit
   The best place I have found for guides, best practices, code samples, etc was Channel9. This is the home page.
4. http://channel9.msdn.com/Learn/Courses/WP7TrainingKit/WP7Silverlight
   I particularly like the home page for Silverlight on WP7. There are a ton of tutorials here, the ones I found most useful are listed below.
5. http://channel9.msdn.com/Learn/Courses/WP7TrainingKit/WP7Silverlight/WindowsPhoneNavigationAndControlsLab
   How to handle navigation, going back and forth between pages, the best practices for setting up your pages.
6. http://channel9.msdn.com/Learn/Courses/WP7TrainingKit/WP7Silverlight/ApplicationLifetimeWP7Lab
   Very important read on the application life cycle of a WP7 app.
7. http://channel9.msdn.com/Learn/Courses/WP7TrainingKit/WP7Silverlight/LaunchersAndChoosersWP7Lab
   Working with launchers and choosers. Launchers and choosers are parts ofthe API that allow you interact with the Windows Phone 7 first-partyapps, such as the email client, calendar/agenda, contact list, messaging app, etc.
8. http://channel9.msdn.com/Learn/Courses/WP7TrainingKit/WP7Silverlight/UsingPivotAndPanoramaControls
   This tutorial shows you how to make your apps have the cool Windows Phone 7 feel with the sliding between screens (called pivot and panorama controls).
9. http://www.silverlight.net/learn/videos/all/windows-phone-application-bar/
   Great tutorial video on how to set up the application bar at the bottom of your app. The video also shows the different customizations that you can do to the application bar.
10. http://channel9.msdn.com/Blogs/SlickThought/Simplify-Page-Transitions-in-Windows-Phone-7-Silverlight-Applications
    Getting the cool fade-in, fade-out page transitions to work. This effect is done by using the TransitioningContentControl that comes with the Silverlight toolkit (an extra install from link #2). Note: this tutorial was done on the April release of the Windows Phone 7 SDK, the latest SDK is slightly different.
11. http://channel9.msdn.com/blogs/slickthought/custom-per-page-transitions-for-windows-phone-7
    Similar to the previous link, this shows a little bit more about fancy, animated page transitions.
12. http://blogs.msdn.com/b/avip/archive/2010/04/03/windows-phone-frame-page-navigation-and-transitions-using-the-transitioningcontentcontrol.aspx
    This is another link on page transitions by using the TransitioningContentControl. However, it also uses the April release.
13. http://www.viddler.com/explore/pagebrooks/videos/10/
    This video tutorial describes how to create a splash screen for you Windows Phone 7 application. It’s quite simple actually.
14. http://mobileworld.appamundi.com/blogs/andywigley/archive/2010/07/12/migrating-wp7-april-ctp-projects-to-wp7-beta.aspx
    There are differences between the April CTP release and the July release of the Windows Phone 7 SDK. This blog post describes a couple of steps to convert older projects to the new version. Obviously if you are just starting out you do not need this, but if you find sample code on the internet, you might need these steps to get the code working on your machine.

If you are just starting out, then these links (and probably a couple of days of your time) will be sufficient to introduce you into the structure, framework, best practices, and common utilities for Windows Phone 7. And now I’m off to try and get my own TransitioningContentControl to work.

Apparently Samsung is going to stop using Windows Mobile on its cellphones and will concentrate on Android!! I have been a supporter of Android since its inception and stories like these bring tears of joy to my eyes.

Oh, and there’s something about Samsung rolling out their own open source OS called “Bada”. Good for them.

To download the AndroidXmlSimple project click here. You will be taken to another page where you can click to download to the ZIP file.

Below are some instructions on setting yourself up with this source code and customizing it for your own XML data.

1. Download the file AndroidXmlSimple.zip

2. Unzip it on your disk.

3. Open Eclipse and import the Android project into your workspace.

4. The project will look like this:

5. This new project opens up an XML document (the same RSS feed as the original example) and displays it using a ListActivity.

6. The classes are:

- MessageList.java: the main Activity

- Message.java: object that stores the parsed XML data

- RssHandler.java: object that parses the XML data

- BaseFeedParser.java: object that initiates the starting point and configurations for the XML data that should be parsed.

7. To customize this project for your own feed, edit the file BaseFeedParser.java.

Update the URL location here:

static String feedUrlString = "http://www.androidster.com/android_news.rss";

Update the hierarchy of nodes here:

static final String RSS = "rss";
static final String CHANNEL = "channel";
static final String ITEM = "item";

Update the node names that repeat here:

static final String PUB_DATE = "pubDate";
static final String DESCRIPTION = "description";
static final String LINK = "link";
static final String TITLE = "title";

And as in the previous post, if you change any names of the constants, you will need to update other sections of the code-base, for example below in BaseFeedParser.java, and in a few places in RssHandler.java.

        item.getChild(TITLE).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setTitle(body);
            }
        });
        item.getChild(LINK).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setLink(body);
            }
        });
        item.getChild(DESCRIPTION).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setDescription(body);
            }
        });
        item.getChild(PUB_DATE).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setDate(body);
            }
        });

Please leave a comment if you download this ZIP file – I’d like to know if you found this useful. And let me know if it does what you expected after reading my post. Thanks!

While trying to developer my own app which reads a web service from my own server, I ran into a lot of difficulties in implementing the client that consumes the web service. Android does not have libraries for XPath handling of XML documents, so it makes deciphering XML data a little bit more difficult. From what I’ve read online the Android team is currently working on including such libraries in future versions.

After some digging around I found an amazing link that shows different methods for consuming an XML file in Android and parsing through it without the use of XPaths. The link is this: Working with XML on Android. To start off, this link is an absolute must-read. Everything that I am going to write in my post here relates to this link. The code offered on that webpage uses polymorphism to show you 4 different methods of working with XML data. It provides a fully-functional Android application and all the source code for it. The source code can be found here: AndroidXML.zip.

My post today will concentrate on how to customize the code from the application in the above link, in order to read and parse your own XML data. If you are a Java pro, you might not need this post. My Java is a little rusty, so I needed some time to figure out exactly what I had to change and where in order to get this to work with my own web service XML. Now that I’ve figured it out, I thought I’d share it. In my next post I will give the simplified version of this code – where there is no polymorphism, and thus there are only the minimum number of classes needed to implement this XML-reading solution. I can’t offer this simplified code right now – because I haven’t coded it yet :).

So until I post the simplified source code for working with XML data in Android, here are some tips on getting through the larger polymorphism-based source code and customizing it for your own XML data:

1. First off, read over the link Working with XML on Android as much as you can.

2. Download the source code for the Android application that they offer: AndroidXML.zip.

3. Import the project into your Eclipse workspace by right-clicking in Project Explorer and selecting “Import”.

4. Select “Existing Projects into Workspace”

5. Browse to the directory where you extracted the ZIP file with the source code and then click on the Next buttons to finish off the wizard. The project is called “AndroidXml”.

6. You will now see the project in your workspace:

7. Here is a quick breakdown of what some of those Java classes do:

- MessageList.java is the main activity that gets started. It lists the items from the XML data using a ListActivity. In this project the items come from an RSS feed.

- FeedParser.java, FeedParserFactory.java, BaseFeedParser.java, RSSHandler.hava are all classes that this particular example uses to set the framework for polymorphism.

- This example uses 4 methods for grabbing the XML data and reading it.The 4 methods that this example uses are:

1. AndroidSaxFeedParser.java (the default)

2. DomFeedParser.java

3. SaxFeedParser.java

4. XmlPullFeedParser.java

These 4 classes all extend BaseFeedParser.java.

8. In order to customize this for your own XML file you need to edit the following places (assuming you are using AndroidSaxFeedParser, which is the default):

- FeedParserFactory.java: you need to change the URL location of the web service or XML document in the global variable here:

static String feedUrl = "http://www.androidster.com/android_news.rss";

- AndroidSaxFeedParser.java: you need to change the root node of your XML document. This is stored in the String called RSS.

static final String RSS = "RootNode";

- BaseFeedParser.java: you need to change this class according to the nodes that your XML document has.

The nodes CHANNEL and ITEM refer to the nodes <Channel> and <Item> in the RSS feed that this example uses. You need to change them to mimic your nodes from your XML document:

static final String CHANNEL = "channel";
static final  String ITEM = "item";

The other constants that are declared refer to the nodes for each repeating item.

static final  String PUB_DATE = "pubDate";
static final  String DESCRIPTION = "description";
static final  String LINK = "link";
static final  String TITLE = "title";

For this particular example, since an RSS feed XML document is used, it has repeating nodes for <Description>, <Link>, <Title>, <PubDate>. You need to change this structure to mimic your structure.

Note: Remember that if you change the name of the constants (as opposed to the value of the constants), you will need to change other classes which call these constants.

- If you change the names of the constants, you will have to update AndroidSaxFeedParser.java in this section:

        item.getChild(TITLE).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setTitle(body);
            }
        });
        item.getChild(LINK).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setLink(body);
            }
        });
        item.getChild(DESCRIPTION).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setDescription(body);
            }
        });
        item.getChild(PUB_DATE).setEndTextElementListener(new EndTextElementListener(){
            public void end(String body) {
                currentMessage.setDate(body);
            }
        });

As you can see this section is hardcoded for the 4 nodes that are expected in this XML document (TITLE, LINK, DESCRIPTION, PUB_DATE). You will need to change this section and hardcode this for your own nodes.

- If you change the names of the higher-level nodes, i.e. <Channel> and <Item>, then you need to update the following section of AndroidSaxFeedParser.java:

Element itemlist = root.getChild(CHANNEL);
Element item = itemlist.getChild(ITEM);

And that is all. The customized code will use the AndroidSaxParser implementation of an XML Parser, it will go to the URL you provided in FeedParserFactory.java, and it will iterate through the updated nodes as you have labeled them in BaseFeedParser.java and AndroidSaxFeedParser.java.

In my next post I will provide a simplified version of this code, which does not use polymorphism. It will (hopefully) use the minimum required classes to get XML data and parse it.

I want to ask the user to enter their yearly income, after which the screen will flip and their after-tax income will be displayed in a table format for all Canadian provinces. (And for the future: all US states). The problem I ran into is creating a TableRow for each Canadian province in my main.xml. There are 13 provinces and territories, so 13 is not that bad to copy & paste in the main.xml; however, as soon as I have to copy & paste more than 2 times I start cringing and nausea kicks in. Personally I think “copy & paste” should not be in the programming vocabulary. Not only that, but I have 13 provinces now, what about when I have to enter 50 states! So, I had to find a way to create these new TableRow rows programmatically inside my TableLayout layout.

A great source for code snippets and answers to Android questions is http://www.anddev.org. I’m sure if you’re dabbling with Android then you’ve already come across this site. The particular post I read to do this is this one: Dynamically add rows to TableLayout. Commenters on that post were having problems getting this to work, but after I imported all the correct classes (android.widget.TableRow.LayoutParams is an important one to use) everything worked from the first time. I forced Eclipse to find most of the classes for me.

Below is the code from anddev.org, with my changes for my Taxman Android app. I’m too lazy to do a full-out beginning-to-end tutorial for this code snippet.

First I set my constants at the top of the Activity class:

public class Activity1 extends Activity implements OnTouchListener{

    int PROVINCE_Alberta = 0;
    int PROVINCE_BC = 1;
    int PROVINCE_Manitoba = 2;
    int PROVINCE_NewBrunswick = 3;
    int PROVINCE_Newfoundland = 4;
    int PROVINCE_Northwest = 5;
    int PROVINCE_NovaScotia = 6;
    int PROVINCE_Nunavut = 7;
    int PROVINCE_Ontario = 8;
    int PROVINCE_PEI = 9;
    int PROVINCE_Quebec = 10;
    int PROVINCE_Saskatchewan = 11;
    int PROVINCE_Yukon = 12;

    int numProvinces = 13;

There are 13 of them this time, there will be 50 of them for the States… technically this could be made into something much more malleable like an external config-type XML file.

Then in the onCreate method I created an array of String objects that will house all these provinces:

        String[] provinces = new String[numProvinces];
        provinces[PROVINCE_Alberta] = "Alberta";
        provinces[PROVINCE_BC] = "British Columbia";
        provinces[PROVINCE_Manitoba] = "Manitoba";
        provinces[PROVINCE_NewBrunswick] = "New Brunswick";
        provinces[PROVINCE_Newfoundland] = "Newfoundland and Labrador";
        provinces[PROVINCE_Northwest] = "Northwest Territories";
        provinces[PROVINCE_NovaScotia] = "Nova Scotia";
        provinces[PROVINCE_Nunavut] = "Nunavut";
        provinces[PROVINCE_Ontario] = "Ontario";
        provinces[PROVINCE_PEI] = "Prince Edward Island";
        provinces[PROVINCE_Quebec] = "Quebec";
        provinces[PROVINCE_Saskatchewan] = "Saskatchewan";
        provinces[PROVINCE_Yukon] =  "Yukon";

And right underneath that I create a TableRow for each item in the array provinces:

        // Get the TableLayout
        TableLayout tl = (TableLayout) findViewById(R.id.maintable);

        // Go through each item in the array
        for (int current = 0; current < numProvinces; current++)
        {
            // Create a TableRow and give it an ID
            TableRow tr = new TableRow(this);
            tr.setId(100+current);
            tr.setLayoutParams(new LayoutParams(
                    LayoutParams.FILL_PARENT,
                    LayoutParams.WRAP_CONTENT));   

            // Create a TextView to house the name of the province
            TextView labelTV = new TextView(this);
            labelTV.setId(200+current);
            labelTV.setText(provinces[current]);
            labelTV.setTextColor(Color.BLACK);
            labelTV.setLayoutParams(new LayoutParams(
                    LayoutParams.FILL_PARENT,
                    LayoutParams.WRAP_CONTENT));
            tr.addView(labelTV);

            // Create a TextView to house the value of the after-tax income
            TextView valueTV = new TextView(this);
            valueTV.setId(current);
            valueTV.setText("$0");
            valueTV.setTextColor(Color.BLACK);
            valueTV.setLayoutParams(new LayoutParams(
                    LayoutParams.FILL_PARENT,
                    LayoutParams.WRAP_CONTENT));
            tr.addView(valueTV);

            // Add the TableRow to the TableLayout
            tl.addView(tr, new TableLayout.LayoutParams(
                    LayoutParams.FILL_PARENT,
                    LayoutParams.WRAP_CONTENT));
        }

The main.xml contains the following for the TableLayout:

        <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:stretchColumns="0,1"
                android:id="@+id/maintable" >
        </TableLayout>

And here is the final result:

So far I have the Ontario taxes working :). If you make $50,000 in Ontario, you’d be taking home $38,285.53.

For this I will be implemented OnTouchListener and overrided the method OnTouch().

To start off, we need to create an Activity with two screens. The two screens will be implemented using a ViewFlipper in the main.xml layout file. Follow the steps in this blog post to set yourself up: Android: Switching screens in an Activity with animations (using ViewFlipper).

1. Now that you have yourself set up, open the Activity1 class.

2. Make the class implement OnTouchListener. The top of the class will look like this:

...
import android.view.View.OnTouchListener;

public class Activity1 extends Activity implements OnTouchListener{
...

2. You will have to override the OnTouch() method as well. If you were using eclipse, it might have created the method stub for you:

    @Override
    public boolean onTouch(View arg0, MotionEvent arg1) {
        // TODO Auto-generated method stub
        return false;
    }

Here is the method that you need to use instead:

    public boolean onTouch(View arg0, MotionEvent arg1) {

        // Get the action that was done on this touch event
        switch (arg1.getAction())
        {
            case MotionEvent.ACTION_DOWN:
            {
                // store the X value when the user's finger was pressed down
                downXValue = arg1.getX();
                break;
            }

            case MotionEvent.ACTION_UP:
            {
                // Get the X value when the user released his/her finger
                float currentX = arg1.getX();            

                // going backwards: pushing stuff to the right
                if (downXValue < currentX)
                {
                    // Get a reference to the ViewFlipper
                     ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                     // Set the animation
                      vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
                      // Flip!
                      vf.showPrevious();
                }

                // going forwards: pushing stuff to the left
                if (downXValue > currentX)
                {
                    // Get a reference to the ViewFlipper
                    ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                     // Set the animation
                     vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
                      // Flip!
                     vf.showNext();
                }
                break;
            }
        }

        // if you return false, these actions will not be recorded
        return true;
    }

What I’ve done is added a CASE statement. On press down of the finger we save the current X value. On press up of the finger, after the dragging motion has finished, I check the X value again. I compare the two X values and I make a logical decision whether I should switch the screens forwards or backwards.

3. For the above to work, you need to add a global variable called downXValue that will store the X value when the finger was pressed down. Add the line below at the top of the class:

...
public class Activity1 extends Activity implements OnTouchListener{

    private float downXValue;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
...

4. Now, you we will edit the main.xml layout. This is different from the main.xml from the previous post in two ways:

• The two buttons that switched the views have been removed, because we don’t need them anymore and
• I added an ID to the main LinearLayout so that I may reference it in my code.

Here is the entire main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:id="@+id/layout_main"
    >

    <ViewFlipper android:id="@+id/details"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">  

        <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff">

            <TextView android:id="@+id/tv_country"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="18px"
            android:text="Country" >
            </TextView>
            <Spinner android:text=""
            android:id="@+id/spinner_country"
            android:layout_width="200px"
            android:layout_height="55px">
            </Spinner>
        </LinearLayout> 

        <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff">

            <TextView android:id="@+id/tv_income"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="18px"
            android:text="Income" >
            </TextView>
            <EditText android:text=""
            android:id="@+id/et_income"
            android:layout_width="200px"
            android:layout_height="55px">
            </EditText>
        </LinearLayout> 

    </ViewFlipper>

</LinearLayout>

5. We will have to add a listener for the OnTouch() event in the OnCreate() method of the Activity1 class will be. Add the following two lines:

...
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set main.XML as the layout for this Activity
        setContentView(R.layout.main);

        // Add these two lines
        LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);
        layMain.setOnTouchListener((OnTouchListener) this);
...

6. You should also remove the two Button OnClick() events and listeners, because those buttons do not exist anymore. Here is the final version of the Activity1.java class:

package com.warriorpoint.taxman3;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.Spinner;
import android.widget.ViewFlipper;

public class Activity1 extends Activity implements OnTouchListener{

    float downXValue;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set main.XML as the layout for this Activity
        setContentView(R.layout.main);

        // Add these two lines
        LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);
        layMain.setOnTouchListener((OnTouchListener) this); 

        // Add a few countries to the spinner
        Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
        ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
                    android.R.layout.simple_spinner_dropdown_item,
                    new String[] { "Canada", "USA" });
        spinnerCountries.setAdapter(countryArrayAdapter);

    }

    public boolean onTouch(View arg0, MotionEvent arg1) {

        // Get the action that was done on this touch event
        switch (arg1.getAction())
        {
            case MotionEvent.ACTION_DOWN:
            {
                // store the X value when the user's finger was pressed down
                downXValue = arg1.getX();
                break;
            }

            case MotionEvent.ACTION_UP:
            {
                // Get the X value when the user released his/her finger
                float currentX = arg1.getX();            

                // going backwards: pushing stuff to the right
                if (downXValue < currentX)
                {
                    // Get a reference to the ViewFlipper
                     ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                     // Set the animation
                      vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
                      // Flip!
                      vf.showPrevious();
                }

                // going forwards: pushing stuff to the left
                if (downXValue > currentX)
                {
                    // Get a reference to the ViewFlipper
                    ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                     // Set the animation
                     vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
                      // Flip!
                     vf.showNext();
                }
                break;
            }
        }

        // if you return false, these actions will not be recorded
        return true;
    }

}

That’s it! Run it!

You will see that the button is gone and dragging across to the left or right will switch the screens!

Disclaimer: The back animation is not perfect, I still have to figure out why. It flickers a little. If you figure it out to animate properly please drop me a comment. Thanks!

I tried doing animations on the opening and closing of activities, but I haven’t figured that out yet fully. So instead, I will show you how to use animations when switching on objects/layers inside the same activity. It will still look like you are switching screens, but all the layout data will be in one single XML. If we were to switch between activities, each activity would have had (usually) its own layout XML.

And in the post coming after this one, I’ll show you how to start this animation and switch the screen while dragging your fingers on the touch screen. Let me be a little more precise: while dragging one finger on the touch screen. I’m not sure if the OS handles multi-touch right now – or if that’s something the device has to enable – or both.

Back to the topic: how to switch between layers using animations to make it look like you are changing screens… we will be using a ViewFlipper widget in the layout XML.

1. Create a new Android project, unless you already have one

2. Create a new Activity class that extends android.app.Activity.

3. Create a new directory under the /res directory and call it anim

4. Right-click on the new directory called anim and Import all the XML files from: Android_SDK\Platform\android-1.5\samples\ApiDemos\res\anim.

These are animations created using XML. The same animations can be created in code, but these are ready for us to use in XML.

5. Open res\layout\main.xml and copy/paste the following in:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    >

    <ViewFlipper android:id="@+id/details"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">  

        <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff">

            <TextView android:id="@+id/tv_country"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="18px"
            android:text="Country" >
            </TextView>
            <Spinner android:text=""
            android:id="@+id/spinner_country"
            android:layout_width="200px"
            android:layout_height="55px">
            </Spinner>
            <Button android:text="Next"
            android:id="@+id/Button_next"
            android:layout_width="250px"
                android:textSize="18px"
            android:layout_height="55px">
        </Button>
        </LinearLayout> 

        <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff">

            <TextView android:id="@+id/tv_income"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="18px"
            android:text="Income" >
            </TextView>
            <EditText android:text=""
            android:id="@+id/et_income"
            android:layout_width="200px"
            android:layout_height="55px">
            </EditText>
            <Button android:text="Previous"
            android:id="@+id/Button_previous"
            android:layout_width="250px"
                android:textSize="18px"
            android:layout_height="55px">
            </Button>
        </LinearLayout> 

    </ViewFlipper>        

</LinearLayout>

This is a little long, let’s inspect it more closely.

• The outmost layer is a LinearLayout.
• It contains only one inner layer: ViewFlipper
• The first-level layers inside ViewFlipper will be the screens!
  • • ViewFlipper contains 2 LinearLayouts. Each LinearLayout is 1 screen.
• The first LinearLayout contains a label, a spinner (a dropdown), and a button
• The second LinearLayout contains a label, an edit view (input box), and a button

6. Here is what Activity1.cs looks like:

package com.warriorpoint.taxman3;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.ViewFlipper;

public class Activity1 extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set main.XML as the layout for this Activity
        setContentView(R.layout.main);

        // Add a few countries to the spinner
        Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
        ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
                    android.R.layout.simple_spinner_dropdown_item,
                    new String[] { "Canada", "USA" });
        spinnerCountries.setAdapter(countryArrayAdapter);

        // Set the listener for Button_Next, a quick and dirty way to create a listener
        Button buttonNext = (Button) findViewById(R.id.Button_next);
        buttonNext.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                // Get the ViewFlipper from the layout
                ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);

                // Set an animation from res/anim: I pick push left in
                vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
                vf.showNext();
        }
        });

        // Set the listener for Button_Previous, a quick and dirty way to create a listener
        Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
        buttonPrevious.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                // Get the ViewFlipper from the layout
                ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                // Set an animation from res/anim: I pick push left out
                vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
                vf.showPrevious();
        }

        });        

    }
}

Let’s try and decipher the code:

• First I set the main.xml to be the layout for this Activity
• I input Canada and USA as the values in my dropdown (the Spinner object)
• Then I create two listeners for the two buttons that I have Button_next and Button_previous
• Each button does the following:
  • • Gets a reference to the ViewFlipper
    • Sets an animation by passing it the context of this class and an animation from a res/anim XML file
    • showNext() or showPrevious() is called – which literally flips between the LinearLayouts in the ViewFlipper widget in the main.xml either forwards or backwards

That’s it! Run it!

Look at that fancy Spinner!

Click Next and watch it flow!

Disclaimer: There is a problem with the back animation when you press “Previous”. It flickers a little and doesn’t flow properly backwards. I still have to figure out why. If anyone knows why, drop me a comment below!

Next up: Removing the “Next” and “Previous” buttons and switching screens by using your finger to drag on the touch screen.

WTF? Why? What did I do wrong this time, again?

You can find the answer very easily:

1. Open a command prompt window.

2. Go to the SDK_directory\tools\

3. Run “abd logcat”

This will show you all logs that the Android system produces as you click around. Some of the logs will be related to the Exceptions getting thrown because of your app.

Null Pointer! But… you still need to decipher where this Null Pointer is from.

I had trouble adjusting to what an “Activity” was and how to handle it. Here is a quick and dirty way to create an Activity, and to switch to another Activity (think of it as another screen) on the click of a button.

1. Create a new Android project – or you might already have one created.

2. Add a new Class that extends android.app.Activity. You need a total of two classes that extend Activity. You will switch from one Activity to another.

3. Now, we’ll create two XML files to store the layout of each Activity. Under the res/layouts directory create a copy of main.xml

4. Each XML file will contain 1 button. On the click of the button, the Activities will switch.

main.xml will contain:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"  >

    <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="This is Activity 1" />

       <Button android:text="Next"
        android:id="@+id/Button01"
        android:layout_width="250px"
            android:textSize="18px"
        android:layout_height="55px">
    </Button>    

</LinearLayout>

main2.xml will contain:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"  >

    <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="This is Activity 2" />

       <Button android:text="Previous"
        android:id="@+id/Button02"
        android:layout_width="250px"
            android:textSize="18px"
        android:layout_height="55px">
    </Button>    

</LinearLayout>

So each Activity will have a text that says “This is Activity x” and a button to switch the Activity.

5. Add the second Activity to the main manifest file. Open AndroidManifest.xml and add:

        <activity android:name=".Activity2"></activity>

The final result will look similar to this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.warriorpoint.taxman2"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".Activity1"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".Activity2"></activity>
    </application>
    <uses-sdk android:minSdkVersion="3" />
</manifest>

If you forget to do this, then the you will get a Null Pointer exception because “Activity2” will not be found at runtime. It took me some time to find out how to find what Exception was getting thrown as well. I will include how to debug and look at Exceptions in another future post.

5. Open Activity1.java and enter the following code:

package com.warriorpoint.taxman2;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class Activity1 extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Button next = (Button) findViewById(R.id.Button01);
        next.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                Intent myIntent = new Intent(view.getContext(), Activity2.class);
                startActivityForResult(myIntent, 0);
            }

        });
    }
}

Here’s a quick explanation of what this does:

- setContentView(R.layout.main) makes sure that main.xml is used as the layout for this Activity.

- Gets a reference to the button with ID Button01 on the layout using (Button) findViewById(R.id.Button01).

- Create san OnClick listener for the button – a quick and dirty way.

- And the most important part, creates an “Intent” to start another Activity. The intent needs two parameters: a context and the name of the Activity that we want to start (Activity2.class)

- Finally, the Activity is started with a code of “0”. The “0” is your own code for whatever you want it to mean. Activity2 will get a chance to read this code and use it. startActivityForResult means that Activity1 can expect info back from Activity2. The result from Activity2 will be gathered in a separate method which I will not include here.

6. Open Activity2.java and enter the code below:

package com.warriorpoint.taxman2;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class Activity2 extends Activity {

    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main2);

        Button next = (Button) findViewById(R.id.Button02);
        next.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                Intent intent = new Intent();
                setResult(RESULT_OK, intent);
                finish();
            }

        });
    }

This code does the following:

- Sets main2 as the layout for this Activity

- Gets a reference to Button02 and creates an OnClick listener

- In the OnClick listener, the Activity finishes with finish(). setResult() returns information back to Activity 1. In this example, it returns no information; and Activity1 doesn’t even have the listener to receive this information anyway.

That’s it! Run it!

The app will load in Activity 1:

When you click the button you will see Activity 2. There are no animations, no tweens, etc, so the screen will just “change”. I’ll talk about animations in future posts.

And clicking on the button “Previous” here will go back to Activity1.

Still to come:

1. How to create animations when switching screens.

2. How to switch using a dragging motion of your finger.

3. How to see a log of the exceptions that your app throws.