Paranoid Android

I am going to start a new article (tutorial) series, about applying MVVM(Model-View-View Model) pattern in Android applications, using the Android Binding open source library.

In this article, we are going to build a simple Android Application:

Tools to get started

Before starting this tutorial, you need following tools:

1. an Java IDE (e.g. Eclipse)
2. the Android SDK

Follow the instruction on Android’s developer web site, to install the above tools first.

If you developed in Android before, you should have the above stuff ready. But you need one more thing before you jump in MVVM, that is the Android Binding library.

After downloading the Android Binding, you should have a android.binding.[version].jar file. Just keep the file, we are going to include this in project shortly.

Starting a new project (in Eclipse)

Launch Eclipse, and then choose (in menu bar) File -> new Project

Next, choose Android project and click “next”

Now, it’s time to put in the project settings.

Project Name: (not shown above) “HelloMVVM”

Build target: Android 1.6 (Android binding requires 1.6+)

Application Name: “HelloMVVM”

Package name: (any valid Java package) com.gueei.demos.mvvm

Create activity: (tick) “Hello”

Min SDK: 4 (1.6+)

Click Finish, as we don’t need to setup the test project.

After that, you should have the following in package explorer:

Including Android Binding library

Remember you downloaded a android.binding.[version].jar file? Now we are going to include that in our application. To do so, right click on the project name (HelloMVVM) => Build Path => Add External Archives…In the file picker, choose the android.binding.[version].jar file that you have downloaded.

Updated: With ADT version 17+, external library no longer needed to include in this way. Instead, create a new folder called “libs” under the project’s root folder (right click HelloMVVM -> create folder), and drop the android.binding.[version].jar to it will automatically include that in the project. (Thanks Ko Ko)

Let’s start coding!

Double click on AndroidManifest.xml, we need to add an application class to the program. After the manifest opened, look for the Application tab on the bottom of screen, click on it.

Click on the “Hyperlinked” Name under Application Attributes. You should then have a window like this:

No need to touch anything else, just key in “HelloApplication” in the Name box, and click Finish. After that, Eclipse should bring you a new window with some codes in it, and that is our Application class. An Application class in Android, is the ‘global’ class that will exists whenever your program is launched. Put the following in the HelloApplication.java:

Everything else is standard, here, we type “Binder.init(this);” to load Android Binding in the system.

Now, we should back to the Activity class. In this simple example, we are going to double the Activity class as the View Model as well. Open the Hello.java from package explorer, and put following in the codes:

We put two public field in the class, one is StringObservable. String Observable is a type of String that is ‘observable’ by other classes. Whenever changes is made on it, the observer of it will be notified; the other is a Command. A command is the mean of UI to trigger some action on the View Model. Here, whenever the Command is invoked, we change the greeting text. Finally, we instruct the binder to bind the content view (layout) to this activity, in the onCreate method.

In the activity above, we defined WHAT kind of data we can display in the screen, and then in the layout file (which is an xml file), we define HOW we want our data to be displayed. In package explorer, double click on the main.xml (which is located under res -> layout):

Most of the stuff is prepared by Eclipse, by default. Note in the LinearLayout, remember to put in the binding namespace (http://www.gueei.com/android-binding/), and in the above example, we change added an extra button to the layout.

After everything is set, just launch the emulator (click Run -> Run in menu) and you should have this:

If you click on the button “Change”, you should have:

See the text changed? that’s because in the command, we instruct that whenever the command is invoked, the text will be set to something else.

Wrap up

We have built a very simple application using MVVM pattern. Although, it’s so simple that we actually don’t have a Model (Model mostly refers to something like Database entries, Web content etc), we have our View (which is the XML layout file) and the View Model (our activity class serve as that, but in practice, that would better be a separate file).

If you have done some Android application development before, you would find by using Android Binding + MVVM, you no longer need to deal with those TextViews, Buttons in your code, and thus, a much cleaner, easier to unit-test code is achieved.

Upcoming in next articles, we will try to bind data to Lists (like Spinner, ListViews) with external data sources.