Digital content is becoming more popular. E-book readers encourage people that like to read, to read even more because they can take all of their books on one lightweight gadget. Even though I still love hard copies of a book (you don’t need power to read it), I have had very good experiences with several digital readers.

Xiine is an electronic reader created for CODE Magazine. EPS Software wrote Xiine in C# using WPF and based it on SOA architecture. With this software, all subscribers (you can actually register for free) can read CODE Magazine issues on a PC. You can download Xiine at http://www.xiine.com.

There was no Xiine reader for tablets or smartphones, though. Since CODE Magazine issues are available in desktop version and web version, why not have an Android version?

This article will show how we conceived Xiine for Android from beginning to end, including stating the main goals, challenges, as well as some Android features applied.

The Beginning

In the middle of December of 2010 I started to think about writing Xiine for Android. I saw this as a good opportunity to learn more about Android as well as have our own digital reader for our magazines.

I first wrote a small prototype for the Brazilian version of the Motorola Droid (called Motorola Milestone), but it didn’t have much functionality. At that time I was working full time on a huge project and I couldn’t finish what I had idealized. By the end of April 2011, our company (EPS Software Corporation, which publishes CODE Magazine) held a contest: build a good mobile application.

That was a nice injection of motivation to finish what I had started since the project I was working on had finally finished.

The Goals

I wanted users to have a very good UI experience, just like Xiine for desktop. Here was my list of desired goals for this version:

  1. Authenticate Xiine users.
  2. List available brands and respective issues.
  3. Read the articles.
  4. Display user information.
  5. List the read articles.
  6. Cache downloaded articles.
  7. Zoom in and zoom out an article page.
  8. Save a history of what is been read.
  9. Have clean and intuitive screens.

The Challenges

Taking a .NET for desktop application and making a version for the Android mobile platform offered a number of challenges but I want to call out two of them here.

Take Advantage of the Existing Architecture without Messing Anything Up

The original Xiine is based on SOA and returns a SOAP response. However, Android doesn’t support this protocol because it doesn’t have any sort of SOAP library. I didn’t want to change the original service, because I would have to change a large amount of code and we didn’t have enough time until the first release date.

Parse XAML Document to HTML

The most important feature of this project was the ability to read an article. And the article format should be similar to the original one. The problem is that the Xiine service returned the document in XAML format only.

The Solution

I didn’t want to mess with the actual service for two reasons: First, it was not an official project and second, the server should be up and running 24/7.

Because Android doesn’t support SOAP, one possible solution was to build a separate REST service on a different server (www.miltonabe.com.br), running as a bridge between the actual Xiine server and the Android devices.

The basic architecture is very simple: (Figure 1)

Figure 1: The basic architecture for Android service.

The Android devices access the REST service at www.miltonabe.com.br, requesting a JSON object.

The REST service has access to services.xiine.com requesting some information.

The REST service gets and converts the SOAP response to a JSON object.

The REST server sends back to the Android device, which understands the JSON object and converts it into real information.

Reproducing Xiine Desktop on Android

The login screen (Figure 2) on the desktop version should be similar on the Android version. Of course, it’s not possible to be exactly the same, due to different resolutions, but we could have the same functionality: type the user name, password and save them as user preferences, as shown in Figure 3. There are two features that we didn’t put on the Android version: create a new account and forgot password.

Figure 2: Login screen of desktop version.
Figure 3: Login screen of Android version.

To save the user/password, we used a feature called SharedPreferences, which is a Java interface class.

Right after the log in, the user is able to see the available brands. The desktop version (Figure 4) is fancier than the Android one, because it contains some animation. When you click on a specific brand, there is some extra information that I didn’t make available on the Android client: publisher, copyright, last update, type. Because smartphones are smaller devices, I thought that it wouldn’t be a good idea to put a lot of information regarding a simple brand. That’s why it shows only the description on the list (ListView), as shown in Figure 5.

Figure 4: Available brands for desktop version.
Figure 5: The compact view of the brands on Android.

The same thing happens when choosing a brand: A fancy list of the magazines with complete information is displayed when using Xiine on a PC and a magazine is clicked (Figure 6). The displayed information is more limited on the Android version (Figure 7).

Figure 6: A fancy list of magazines with animation is shown.
Figure 7: Simple list of issues by brand.

When resizing the window, a cool animation occurs, relocating the magazines. So the larger the width window, the larger quantity of magazines is shown by row.

By double-clicking on the issue, the system displays a list of the articles that the users can read. The desktop version of Xiine not only displays the title, but it also displays the article summary from the print magazine’s table of contents. We thought that would not be attractive on the smartphone because it already has a smaller screen. Reading a small description could be a pain. Figure 8 shows how it works on the desktop version. Figure 9 shows the compact version built for Android with just the article titles.

Figure 8: Listing the available articles and the article summary from the print magazine’s table of contents.
Figure 9: Listing the available articles for Android.

Keeping the screen size in mind, we had to adjust how the article displays on the desktop version of Xiine (Figure 10) and on Android (Figure 11). All the images displayed in the article are coming from the Internet.

Figure 10: Reading a Xiine article on the desktop version.
Figure 11: Reading the same article on the Android version.

Things that Went Right

A few things in this project went right or even better than expected.

Amount of Time Spent

I spent almost two months on this, working two to three hours daily, for a total of 120 hours. This amount of time is relatively low compared to big projects. If I had worked on it full time every day, it wouldn’t take a month. It couldn’t be different, though. Thinking about an application that must run on a smartphone or a tablet with a very limited screen resolution, I couldn’t imagine something really fancy with a complicated flow and lots of animation. The value of the application was simply the ability to read the articles on Android devices, and that’s it: straightforward.

Usage of the JSON Library

Using the JSON library was one of the most important parts of the project since all information needed was available originally from a WCF service. Unfortunately, at that time the service didn’t offer the JSON response, so I had to make my own interface so Android would understand the message. Well, even writing this interface was fast. All I had to do was to create a REST service to consume the original SOAP service and install it on a separate server. I knew that it would be one extra layer to process all data, but in the end we barely noticed a performance difference.

IntelliJ IDEA

I’ve been working with Visual Studio for a long time and I have found very good tools to help me with productivity. One of the tools that I’ve used the most is ReSharper, which helps especially on refactoring, as well as navigating through files and definitions, check usages of objects, etc. Because IntelliJ IDEA was developed by the same company (JetBrains), and it behaved in some similar ways to ReSharper, I could take advantage of this IDE and use similar shortcuts and facilities for productivity. Besides, the IntelliJ IDEA IDE is a pretty decent.

Caching Information Using SQLite

Even though SQLite is not a professional database, it really does what it says it does: store information. Plus it’s very easy to configure and use. Because it’s a lite version, you should not be worried about special field types. The most complicated type is the blob.

Using Mercurial and BitBucket

Mercurial is a local repository where you can keep track of your changes. You can commit, delete, get specific version, merge and so forth. BitBucket is a remote repository where you can store and share your source code to everyone or a specific group or a person. That was my very first experience with these repositories and I can tell you that it was really worthy using them. I could access the project from anywhere in the world, get latest, commit my changes and keep working from anywhere else. The coolest thing about this: IntelliJ IDEA fully supports Mercurial. It was a very good source control experience!

Things that Went Wrong

A few things on this project were understandably frustrating, which you’d expect moving between completely different display platforms.

Paging

The desktop version of Xiine has a very nice feature that, depending on the current size of the window, the user will read more or less pages for that article (Figure 12). Android doesn’t have any native paging system, and creating one would require a lot of time. So it doesn’t actually mean that paging went wrong. There wasn’t enough time to develop one. I hoped to make paging more like Kindle and less like a web browser. Unfortunately I was forced to use the WebView control to show the articles.

Figure 12: Paging system of Xiine for desktop.

Working with Emulator

As the headline already says, I had to use an emulator -a virtual device. I wouldn’t say that it didn’t work at all, but because it’s an emulator, some weird things happened: different font sizes, strange layouts, wrong resolution displayed after launching the application. So when I could, I was connecting my real device to my computer and I enabled the debug mode on Android. It’s faster and more reliable than the virtual one because it shows exactly what the user will see for real. Besides, working with the emulator, we couldn’t see how the multi-touch feature would behave when trying to zoom in or zoom out an article.

Conclusion

That was my best Android experience so far and I’m pretty sure that we came up with a nice product in the end. I created a complete version of Xiine for Android in less than three months. We had fewer things that went wrong and more that went right on this project!

Android business applications are not supposed to be fancy. They are small devices with limited resolution. We should think of taking advantage of the potential possibilities for each scenario in a simple way. You want a simple flow without any complications.