Often when importing Android code into my Eclipse workspace, I find that there are a lot of new ‘errors’ introduced to the code.  These errors were closely linked to my overriden classes (something you’ll find quite often in android code) and read “The method X must override a superclass method” .  For the longest time I’ve wondered how to reliably fix those bugs (until now I had been removing and re-adding the @Override keyword as appropriate to make the compiler shut up).  This morning I stumbled across a Stack Overflow thread that finally solves this problem.

You see, the problem is related to which version of Java the code is checked for compatibility errors against.  Eclipse defaults to using Java 1.5, which only allows the use of interface methods if super() is called.  Java 1.6 allowed the use of the @Override keyword to designation the interface implementation which is current standard way of overriding interface classes in Android coding.

To fix your problem you just need to do a bit of tinkering in the project settings in Eclipse.  Go to your project preferences and under Java > Compiler set the java compiler to 1.6.  While this might fix the error, it is more likely that you’re going to have to change the project specific value for compiler level as well.  Select ”Configure project specific settings” and change the java compiler value there to 1.6 as well.  After an automatic rebuild of your project, you should see all of those pesky error messages disappear!

Let’s be honest.  Sometimes creating icons for you Android Application can be a bit tedious.  There are three different resolutions you have to shoot for (mdpi, ldpi, and hdpi), and several iterations you have to create (launcher icons, menu icons, notification icons, and, now that Icre Cream Sandwich is coming out, Action Bar icons).  I, for one, can never remember all the proper resolutoins and have to keep running back to the Android Developers Icon Design Reference to get it right.  Even then, I’m a bit artistically challenged, so I’m never happy with the final result.

Enter Android Asset Studio.  This simple tool lets you create most, if not all, or the icons in your application quickly and easily.  There are wizards for creating Launcher icons, Menu icons, Action Bar Icons, Tab Icons, Notification Icons, and device framed screenshots.

For each type of icon, there is a simple to use wizard that allows you to choose, the artwork you wish to display on your button (you can upload your own artwork, use predefined clip-art pictures, or just use text).  After choosing artwork, add in trim, color, and shading values, and viola!  You have a set of icons.  This is a nice tool that all you independent developers should check out!

Android Builders Summit – A Walk Through The Android Stack

Learn about the stack that powers Android devices from the linux kernel core on up

Android Builders Summit – Beyond the Phone

Here we see some alternative uses of Android in corporations outside of just for phones

Tutorial: Android Application Development – A 9,000 foot overview

70 minute introduction to Android devices

For more helpful tutorials by the same guys, check out the Marakana TechTV website.

Have any design tips? Design questions? We’d love to hear them; just fire us a comment below, or drop us a message via twitter @droidweb

When you deal with data pulled from an online source, it usually comes in one of two formats, either XML or JSON. Today we’re going to look at how to deal with JSON, and I’m going to introduce you to some tools I use to make the process as painless as possible.

Firstly, what is JSON? JSON stands for JavaScript Object Notation. It is a “lightweight data-interchange format” used transfer data between servers and client applications. JSON is touted as being XML’s low-fat brother, as it doesn’t use the sometimes bloated tag structure that XML does. Instead, data is organized into objects and arrays. Objects may contain arrays and vice-versa. Quite simply put, objects are unordered name: value pairs where the name and value are separated by a colon and the pair is separated by a comma. Arrays are denoted by brackets “[]“. For a complete explanation of JSON, including examples, check out either the wikipedia entry or the JSON.org website

Now that we know what JSON is, how do we use it? There are many ways to process JSON, including via third party libraries. However I prefer to keep things simple and handle the data using the built in java library code. Generally I make a call to a URL which returns the JSON string via an ASYNCTask (gotta keep that URL processing out of the main UI thread). I then create a JSONObject from that string and parse on the fly using a combination of .getJSONArray(), .getJSONObject(); and custom getObject() methods available through the default org.JSON.* libraries.

While writing the code for processing JSON on the fly, I find a few tools out there helpful:

JSON Lint (http://www.jsonlint.com/)

This tool simply validates a given JSON string. If I’m dealing with a small snippet of JSON that I have to process, I’ll drop it into the given window, which will neatly validate and format the code. Reading unformatted JSON outputs is a pain; don’t do it. Use a tool such as this to clean it up, so you can see what’s going on.

Json Editor (http://jsoneditor.net/)

When the JSON gets a little more complicated, pull out this tool. JSON editor lets you see the data in a tree format, which is useful when writing code to parse the JSON output on the fly. In addition, its a Json Editor, meaning that, if necessary, you can write up your own edits to the JSON and get that back as a revised JSON file.

Developers, what are you favorite tools for dealing with JSON? Do you use IDE plugins? Online site? Emacs? Let us know in the comments below or via twitter @droidweb

What is a “SwipeView”?

A SwipeView is an Android UI view similar to the homescreens.  You have several similar panes of content that you access by swiping left and right.  As you swipe left and right, transitions between the views are animated so that the view in focus follows your finger.  See the handy illustration below (Click to enlarge):

When Should I use a “SwipeView”?

SwipeViews are useful if you’re going to have several screens with the same layout and function that you want the user to switch between.  If you’ve ever used the Epicurious app they make good use of a SwipeView-esque implementation when searching for recipes.  Think of SwipeViews as something like a Gallery implementation for Views instead of just images.

How Do I implement a “SwipeView”?

Here’s the fun part.  Now that you know you want a SwipeView in your Android application how do you implement it.  As you probably know its not a standard Android View.  As such we’re going to make use of a third party library.  Jason Fry has put together a nice library for the simple implementation of SwipeViews.  Head on over to his site and blog post for more details about how to implement your very own SwipeView.  Since each SwipeView implementation is going to be widely different, I’m just going to summarize the steps to implement his library below:

• Add SwipeView element (<uk.co.jasonfry.android.tools.ui.SwipeView…) to the desired XML layout as you would any Android View.
• Reference SwipeView in java code via findViewById() as usual
• Populate SwipeView with number of views that you’d like to be able to swipe between
• Implement method private class SwipeImageLoader implements OnPageChangedListener {public void onPageChanged(int oldPage, int newPage) {}}. Look at the library’s documentation and examples for more details on how to do this.  Essentially this method will handle dynamically allocating and populating views as your user swipes back and forth.

I would include an example of implementation here, but my implementation was quite unorthodox and borrowed ideas from how to implement ListViews and other portions of my Android experience. Needless to say its a bit more involved than what should be expected from an introduction to an UI pattern.  If you’d like help implementing your own SwipeView, feel free to drop a line in the comments below or give us a shoutout via twitter @droidweb.

In the next post, we’ll create our application!

Lately I’ve updated to Android 2.0 SDK.  In the process I noticed that things were slightly different.  Following my motto of “Scratching my head so you don’t have to,” I’ve decided to document the new process of installing the SDK from scratch.  (And I mean from scratch… I just freshly installed Mac OSX yesterday.)

System Details:
Here are some details on my system so you know what environment I’m working in:

Essentially I’m running a white MacBook about a year and a half old… Theoretically this install should work with any Mac.

Step 1: Get Eclipse
If you already have eclipse feel free to skip this step, but I was serious about documenting the process from scratch…

Download the version of Eclipse for your purposes at http://www.eclipse.org/downloads/.  I download the Eclipse IDE for Java Developers because I mostly use Eclipse for Android development.  Under this header I choose the Mac Cocoa 32 bit download, as the Carbon download is soon to be deprecated.

Unzip the downloded tar.gz file somewhere convenient.  I just unzipped it to my ‘Documents’ folder.  Inside this folder there is an eclipse executable with the familiar eclipse logo.  (I just add eclipse to my dock items afterwards so I don’t have to hunt for it again.

Step 2: Download the Android SDK

Grab the Android SDK from the Android website.  Choose the proper SDK for your environment (which would be Mac OSX) and download.  Unzip this to an appropriate place as well.  Again I just dump it to my documents folder.

Step 3: (Optional but highly recommended) Add /tools to you $PATH variable

Now to make your life easier if you ever plan on doing anything remotely involved with android, add the /tools directory within the SDK folder to your $PATH variable.  This allows you to easily invoke the tools found in the folder, such as adb quickly from a terminal window.
To edit your path variable:

1. Open a terminal window
2. Edit your .bash_profile file (its ok if this doesn’t exist yet.  I just edit by nano .bash_profile
   )
3. Add export PATH=${PATH}:<your_sdk_dir>/tools to the open file.  I usually make sure i get this right by popping open another terminal window and cd-ing until I’m in the /tools directory, typing pwd and copying and pasting the results.  My .bash_profile file now reads: export PATH=${PATH}:/Users/myusername/Documents/android-sdk-mac/tools
4. Save and close.  To do this with nano use <ctrl>+<x> , <y>, <enter>
5. To test whether your $PATH variable has changed, close all terminal windows, open a new one and type in $PATH.  Something like -bash: /usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/Users/usernamehere/Documents/android-sdk-mac/tools: No such file or directory should appear.

Step 4: Install the Eclipse Plugin
Now we have to install the Eclipse plugin for Android development

1. Open Eclipse
2. Goto Help > Install New Software
3. Click Add
4. In the resulting popup box type Android ADT Plugin (or something similar) into the name field
5. Type https://dl-ssl.google.com/android/eclipse/ into the Location field
6. Press OK
7. Check the box next to ‘Developer Tools’
8. Click Next.
9. Accept the liscense agreememts
10. Click Finish

At this point, the plugin should install.  After installation Eclipse will prompt you to restart it.

Step 5: Adding SDK Components
Here’s where things are different.  Instead of installing the SDK for a given version of Android, we now install SDK Components for that version of Android.  This allows us to test against many different versions of Android easily and make sure that that prized application we’ve worked on for the past several months works on Android 1.5, 1.6, 2.0, and over 9,000

1. Open the preferences pane.  This can be done easily by the keyboard shortcut <cmnd> + <,>.
2. Click Android on the left pane as shown below
   
3. In the field SDK Location fill in the directory where you unzipped the SDK
4. Click Apply then Ok
5. Go to Window > Android SDK and AVD Manager
   
6. Goto Available Packages, check the box next to the website listed, and check the components you want to install.  Click Install Selected. Accept all and Install. This will be how you install new Android versions.

Now you should be ready to go and start developing Android applications!  If you have any trouble following anything listed above, leave a comment and I’ll help remedy the situation.

Now that we’ve got some planning underway, let’s get to work.  The first piece is the homescreen of the app.  Let’s take a look at that mock-up we drew earlier:

Before we do any work on making that app happen, let’s have a quick crash course in Android layout development.  Android layouts can be designed in either of two ways: it can be declared though XML, or it can be created programmatically through Java statements.  We will look at both of those later on, though more focus will be given to XML layouts.  This is because XML layouts are how you’re going to be designing most, if not all, of your layouts.  Java programmatic layout design is used as a secondary means of doing custom / dynamic layouts.

XML layouts are done hierarchically and are composed of views.  A view is a prepackaged module that you can use easily in your applications. (For a quick intro to Android layouts, check out this link: Google Developer’s Hello, Views Blog Entry.)

Let’s look back at our planned layout and break it down into its component views:

Remember how I said that the views are hierarchical?  Well, here’s the hierarchy of the homescreen:

1. LinearLayout

• ImageView
• Button
• Button
• Button

This is a simple layout; more complicated layouts have more levels of hierarchy.

———————

Now that we understand the hierarchy, how do we put this into a project?  Let’s move to the next tutorial: setting up a project and putting some code in it.

development, android, planning, tutorial, HGI

Many people ask me how to get started in Android application development. As a result, I’ve always wanted to write a tutorial for Android beginners to help them accomplish that.  Such an undertaking is easier said than done, but here it goes.

For this tutorial, I’m mixing media types.  I go over some of the important stuff through video; I recount most of the process through text such as this, and there will be pictures galore. If I missed anything, feel free to comment and I’ll add to this tutorial.  Let’s get started, shall we?

Okay – now that you’ve watched that video, let me flesh out some of the ideas presented therein.

• Planning is important: That’s the first thing we’re going to do. I drew a rough mock-up of what the application is going to be / do in the second half of that video.  I’ll expand upon it and make it neater below through making some application mock-ups in an image editor.
• In this tutorial I’m going to focus on the points of Android development, not developing this app per se.  Of course we will develop this app to completion, but I will be highlighting the components that you’ll likely see throughout creating your own development.

Mock-ups

This is the homescreen for our app.  In the coming tutorials, I will show you how to write this homescreen, some of the design thinking behind said homescreen, and more.  This is where you will learn basic Android UI.

This screen will be your wishlist screen.  The same template will be used for the My Library screen.  It will consist of a custom ListView which will be populated with data we pull from both databases and APIs.

Being the tease that I am, I’m going to hold my ideas for the search screen back for now.  Come up with a design for it yourself.  Feel free to send it in to me by emailing triplemwebdesigns@gmail.com.  If it’s good enough, I might choose it and design it in an upcoming tutorial.  Until next time: Happy developing!