Changelog is short and sweet:

• Exam mode
• Interface language switch in menu

The Exam Mode doesn’t sound like that much of a deal, but it took quite a bit of development effort. I had to rethink navigation, make the main activity stateful, and add “Exams” section in statistics screen.

Navigation changes

In the earlier versions the navigation model was rather simple. There was an “infinite” deck of questions (in my mental model and in code I call them “cards”, and they are implemented as fragments) that one can scroll through. The extra functions were stuffed in options menu. Now, with the exam mode there are a few problems:

• Need to make clear when we’re in “Training” mode and when in the “Exam” mode.
• When in exam mode, need to display exam progress (number of questions answered, elapsed time)
• When user completes exam, need to show exam results and allow to review cards with mistakes

As for the exam progress, I came up with what I thought was great idea: when user swipes through exam cards, show a centered translucent window with progress information. Here’s how it looked:

The spinning strip of numbers was a custom widget that was fun to build. Ultimately I ended up using a different method for showing exam progress, and this one was dropped from codebase.

As for exam results, I had an idea of having a new type of “card” that displays exam results instead of question and answers. So the decks of cards could look like this, training mode:

And exam mode:

When user completes exam, we should allow reviewing questions, for the educational effect. At least this is how I used the official online exam webapp: complete exam, then look at every question again, memorize my reasoning that lead to answer, and memorize whether that reasoning was correct or not.

Instead of looking at all answers, some might want to look just at the wrong answers, so my app should allow for that. So I stretched my “deck of cards” metaphor further:

I actually had this implemented, but as with the exam progress overlay window, this didn’t make it into the app. Although the navigation model was perfectly clear in my head, I was worried it wouldn’t make such perfect sense to others.

Actionbar

The need to clearly indicate training and exam modes was what ultimately lead me to introducing actionbar in the interface. That, and then-recently launched Android Design site, which established actionbar as a standard component of typical Android app.

I had considered adding actionbar before, but was reluctant to do so, because actionbar takes vertical screen space, and I was already struggling to fit some of the more text-heavy questions into available space. Making things vertically scrollable of course is the easy way out. Anyhow, I set out to try add actionbar and still fit everything into the screen.

I picked up the beta version of ActionBarSherlock and got busy. Having actionbar opened new avenues of UX. Here’s the custom widget that shows exam progress:

Once the exam is over, there’s an “lightbulb” action item that cycles through the red cards:

ActionBarSherlock comes with tab support, perfect fit for the statistics screen:

Fitting everything

The questions have varying amount of content:

• Some have illustrations, some do not
• Each question has 2-5 answer variants. Each variant could be as short as “Yes” or “No”, or it could take a couple sentences
• Questions and answers in Russian take considerably more screen space. It seems words in Russian are just longer on average

For the cards, I have my “ideal” layout with nice, readable font sizes, margins, and equal amounts of vertical space devoted to each answer. If I cannot fit content in the screen, I’m willing to gradually give these up:

• Allow answers to have different screen heights. This is for situations where one answer could fit in, for example, two lines of text, and another answer needs three lines. Give just enough space for each one. Doesn’t look as neat as equal heights, but oh well
• Question block has defined certain minimum height. If the content still doesn’t fit, remove that minimum height requirement
• Last resort–drop down on font sizes and try everything again

I wrote a crazy-messy-looking “constraints solver” that implements this strategy. And it works, every screen eventually kinda fits, even if the font sizes have to be dropped down significantly:

Another nice tweak I did, is this: if there are 4+ answers, and all are really short, display them in two columns:

Making the main activity stateful

Before there was exam mode, the main activity could get away without keeping any state information–except for statistics kept in sqlite database. If user leaves the app, and Android system kills the app, and user comes back again, it’s OK to start a brand new deck of cards. It isn’t quite so for exam. If I’m midway of an exam, then take and incoming call, and upon returning to app, the exam state is gone–I’d be greatly disappointed. So I made my activity save its state in onSaveInstanceState(), and then restore it in onCreate(). To make this process clean and easy, I implemented the Parcelable interface for some of my data objects.

In the closing, I thought it would be interesting to compare LOC of an early version which had just two short .java files, and the current version. Then:

$ find . -name *.java | grep -v R\.java | xargs cat | wc -l
159

And now:

$ find . -name *.java | grep -v R\.java | xargs cat | wc -l
2398

Mobile web dev, PhoneGap, jQuery Mobile and XUI

One feature that got requested was to include a reference of driving rules within the app. The reference is available on internet (i.e. I don’t have to scan books), as a long formatted HTML document. Formatting is bold, italic, font sizes, superscripts. For the mobile, it makes sense to keep format in HTML and use WebView to display it. But one long page is not easy to get around. So…

First, got python script running that splits the page in subpages, it uses both BeautifulSoup and regexps, whichever is easier in each case. It generates output with Mako templates.

Next, bundle the static HTML, JS and CSS in the app with PhoneGap. But, umm, phonegap.jar is big (158KB although ProGuard would probably shave some parts off). And phonegap.js is big as well at 146KB. I’m developing for mobile, I’m concerned with file sizes, kilobytes count! Scratch that, bytes count!

So I got rid of phonegap, as I didn’t really have use all the cool integration features, I just needed a WebView that loads local static content.

Next I stole some generic style rules from jQuery Mobile. Next I integrated the whole jQuery Mobile, which drags in jQuery itself too. Just to rip them out soon after. Because, again, for the little features that I needed (showing/hiding elements, handling onclick) this was definitely an overkill, dragging along IE compatibility stuff and everything. Next I picked up xui.js. Mostly because I was amused with the name and its meaning in Russian, but also because on the homepage it was described as being “super micro tiny”. At 10KB, I thought, it wasn’t all that super-micro-tiny. But it’s OK, and the library packs a (relatively) lot in those 10KB.

Yeah, and browsers these days. I’ve been out of the loop for some time, and look now, animations in CSS, gradients in CSS, nice nice nice.

The other things

Manipulating messy HTML and getting the taste of mobile web development was really the most interesting part, but there were few others.

Did the translation to Russian. Russian texts on average seem to be longer than Latvian so had to do some conditional font size tweaking. Also, they take twice the space on disk, because each character is two bytes in UTF-8! sqlite file with Latvian questions is 270KB, Russian version is 542KB for approximately the same number of questions. When compressed the difference goes down to about 30%.

I’ve fixed some bugs (one was to do with picture sizing on XHDPI devices like Galaxy Nexus. I want Galaxy Nexus. I want many things.), and am aware of some bugs still remaining.

In closing, an unrelated comment about the Go language! I haven’t written a single line of Go yet, but from the samples I’ve seen and articles I’ve read it looks like a sweet language. Low-level enough to be able to do interesting things fast–think data structures, pointers (I’m obsessed with optimizations if you haven’t noticed by now), and still feel reasonably high-level, readable and concise. I don’t have an immediate application for it, I however have a small hope that in the next IO Google annouces Go as supported on Android and releases SDK and everyone gets crazy writing impressively performant apps.

So that was that. A really bare-bones app, but a fun weekend project. Now I’ve got another fun weekend project to share! The same idea and codebase fixed up to look better, and work better! Here it is on Android Market.

The notable changes:

• I’m still no artist/designer, but I think this one looks a bit better than the previous version
• I’m using newer version of libwebp, and the JNI bindings that are supplied with it. Byte array to Bitmap conversion in Java land is a bit more efficient too. Details here
• Move through question “cards” with swipes. I’m using ViewPager for this and I have to admit I’ve had a pleasant experience with it. Each question screen is a self-contained fragment. I wrote adapter that instantiates the fragments, and ViewPager takes care of the rest–creating new fragments when they are about to become visible, destroying fragments when they move further off-screen
• Encoded WebP pictures are not in SQLite database any more but in separate file now. The reason is this: A SQLite database bundled with the app (in /assets/ or in /res/raw) cannot be used, even if read-only, from these locations. It first has to be copied to internal or external storage. By storing pictures separately, I can keep the database size low (200KB or so), and waste less space with the duplicate copy

Cool stuff, in other news my car has engine knock. Android development is enjoyable once you learn the ropes, but now when I think about it, it would be so so insanely cool if I had the necessary expertise to work on engines of motor vehicles. Yeah, well THAT would be something!

• Django Best Practices document, and linked resources, e.g. Django Coding Style. This lead me to
  • Rearranging and renaming my templates
  • Splitting up my urls.py file
  • Getting I18N to work early. LOCALE_PATHS must be set in settings.py!
  • Moving my stuff into an virtualenv

  Also reassured some things I had done were right to do:

  • Start populating DEVELOP.txt and README.txt early on
  • Install requirements with pip from requirements.txt. My app doesn’t have setup.py yet, and it isn’t managed by Silver Lining, I’ll think about deployment options when it’s closer to being somewhat ready
• There was a bit of mess with static files. I’m using django.contrib.staticfiles, and my STATIC_ROOT and STATICFILES_DIRS variables are set like here (except I have “whatever” instead of “bla” in STATIC_ROOT and this path doesn’t have to exist by the way).
• I’m playing with django-cms. Some discoveries:
  • CMS toolbar didn’t show up in my templates, turns out had to add {{ cms_toolbar }} tag in templates.
  • South, the intelligent schema and data migrations thing seems nice. But it broke my tests, I had to add SOUTH_TESTS_MIGRATE = False in settings.py to fix this
  • Sekizai is a neat useful library. It’s used in django-cms for handling css and js imports in templates
• When I run tests with ./manage.py test it appears all the included tests for Django and all of the things in my INSTALLED_APPS are run. Signifcant portion of them fail, and that’s apparently normal. For example, Sekizai ships with tests but with no templates that the tests use–in my setup these tests have no chance to succeed. So apparently I should only test my stuff, like so: ./manage.py test my_cool_app my_other_cool_app ...
• I’m developing in Eclipse, with PyDev plugin. PyDev has special project type “Django project”. With that set up, I can run manage.py commands and development server from within Eclipse. That’s cool, but I’m so used to console…
• Overall I’m impressed by readability of the code. When facing a problem, it’s sometimes more productive to view .py source than search on internets
• That’s it for now, but there’s lot more to come, because, LOOK AT THIS

I’ve done some small tweaks to my LockingHorizontalScrollView as well:

• Fixed the bug where short and slow scroll wouldn’t register as fling
• Added getPosition() and setPosition(int position) calls that let you get/set “screen” currently visible
• Added setInsensitiveEdges(boolean value) method. After calling setInsensitiveEdges(true) the touch events close to left and right sides of widget won’t be considered when detecting scrolls and flings. This works around the problem when user has hand wrapped around phone and touches sides of touchscreen by accident, and the widget jumps!
• Updated example application and .apk file.
• New demo video!

Code lives here in bitbucket.

Those guards sure got confused when I was sprinting through them with invisibility cloak on. Likewise, dynamic languages sure can confuse hell out of poor unsuspecting programmer: quick recap of last 3 hours of adventures:

• Let’s set up development environment for my Pylons app on Fedora 15, Python2.7! Deployment of this app is managed by SilverLining, which has strong ties with Ubuntu and Py2.6–so I’m in unexplored teritory, exciting!
• Replace Py 2.6 references in SilverLining to 2.7
• Install my app: some weird errors mentioning sys.prefix but app seems to work overall
• Let’s run tests: nose complains that there’s no such thing as “--with-pylons” flag
• That’s because I cannot do “import pylons“
• That’s because I cannot do “import paste.registry“
• That’s because for some reason Paste didn’t get installed in lib/python but in lib/python2.7/site-packages
• Research virtualenv
• Research sitecustomize.py
• Where does sys.prefix come from?
• Dig through easy_install, setuptools
• Dig through distutils, discover distutils.cfg, discover Distribution.parse_config_files(). Smell magic
• Discover setuptools.dist.Distribution but no magic there
• Discover code in distutils/__init__.py that patches Distribution class at runtime (this is the confusing dynamic bit)
• Discover code in SilverLining that patches distutils/__init__.py
• Finally understand what’s going on and can fix the sys.prefix issue
• Try tests again?

Tricky bits:

• no mouse! –disable mouse integration in Machine menu
• how do I install my APKs? –follow instructions on their site about setting up NAT & connecting with adb
• portrait mode is rotated by 90 degrees–google “android x86 portrait” and follow instructions
• it’s LiveCD, my stuff disappears after each reboot! They have instructions for installing on disk, but didn’t bother with that yet

PS. Live wallpaper in the screenshot: get it here

The effect I’m going after is the same as in Google+ and the new Market app:

• Several homescreens/streams/dashboard views. One visible at a time, swipe left and right to switch between them.
• There is no padding around each child view, they take all the space that is allocated to their parent view.
• Switching views one-at-a-time. Don’t want flinging over 3 views at once.

Turns out Gallery widget is not the best starting point for implementing something like this:

• It supports padding around each gallery item. Gallery items don’t generally take up all the horizontal space, several can be visible at the same time, next to each other.
• When user swipes, Gallery flings, potentially over several child elements. Preventing that requires some hacky code.
• It is adapter-based. Cannot define all the views in singe XML layout, need to create/inflate them in adapter.

Then there’s HorizontalScrollView. It’s much simpler than Gallery so less quirks to hack around. The most prominent feature that Gallery has and HorizontalScrollView lacks, is that gallery always tries to center on one of its elements. HorizontalScrollView can be scrolled freely, and will happily stay at any horizontal scroll offset. But this is not hard to fix. By listening in on touch events and detecting flings, I can make it smooth-scroll to the nearest screen-ful in fling’s direction. I’m saying “screen-ful” not “element” because HorizontalScrollView is a subclass of FrameLayout and can only have a single child view. So I’m putting a horizontal LinearLayout in there, and the child views go in that layout. The LinearLayout is slightly hacked too to set appropriate widths for its child views.

Here’s screencast of updated the demo application:

So two classes of interest in the repo:

• LockingHorizontalScrollView. “Locking” as in “will lock on to grid“
• WideLinearLayout. “Wide” as in “each child element will be asked something similar to FILL_PARENT“

There’s also an example app. It demonstrates that this widget has issues with ListView as child :-/

Don’t be surprised, but the custom Gallery from yesterday, it’s buggy.

I was looking at one of the bugs, my investigation involved lots of debug messages about touchscreen events in rapid succession. While scrutinizing these, I spotted a boolean variable that was flipping seemingly without me assigning anything to it.

OK easy, I thought, apparently there’s some code assigning to it that I don’t know about. Maybe the superclass is messing with me, maybe I’ve leaked some object reference somewhere, maybe it’s threading issue. Or maybe there’s several copies of my code running, with several corresponding boolean variables.

So I wrapped my boolean in object that

• prints all reads and assignments to debug console: nobody can bypass my logging statements now
• is threadsafe: assignments, reads and logging statements won’t get interleaved
• doesn’t leak reference to wrapped value, but primitive Java types are pass-by-value anyway right?
• prints its hashCode and timestamp of creation: gives some affirmation that I’m looking at the same object all of the time

And as I was staring at the log, the value was still flipping! Two reads, with no write inbetween, were reporting different values. So my next line of thought touched on aspects of JVM, CPU, radioactivity and sanity. As usual though, explanation turned out to be simple and boring: debug log not outputting messages in chronological order. I came up with a counter variable that I would increment on every assignment, so it should only monotonically grow. Lo and behold, in the log messages it was going up and down! Quick glance at timestamps of debug messages and there was my answer, in plain sight, the order of messages was clearly not chronological.

(I’ve circled some timestamps with orange, and my counter variable with red)

By the way, it appears that printing debug messages in terminal with adb logcat is fine, the messages come in order.