Café Kleyn, Android app for the cafe in Arnhem, the Netherlands

Kleyn icon Café Kleyn already had an iOS app, which served as a guide to this Android version.

Kleyn employees use a content management system to keep a database of available beers, and both apps query this database to remain up to date. This translates to both apps downloading the same JSON file.

The app uses the android compatibility library's ActionBar to maintain a consistent look on older versions of Android, as well as 4.0 and up.

List screen

The beers are ordered in categories; Ale, IPA, Triple, etc. If a beer is currently on tap, an indicator is shown. This indicator is one of the beer's TextView's compound drawables. Beers can be selected, after which the detail screen is shown.

Detail screen

The detail screen shows a relevant picture of the selected beer, entered online by Kleyn employees. To display this image, the Picasso library is used, which downloads and caches the picture from the url specified in the online database.

Other information in this screen is the alcohol content, as well as a short description of the beer.

The screen is a seperate activity, with a custom style and additional code to resize the window. This gives the appearance of being a popup.

In landscape a slightly different layout is used, taking advantage of more horizontal space.

News screen

The News screen is basically the cafekleyn Twitter feed. Because of Twitter's limitations we mirror this timeline using our own TwitterMirror

In order to have a proper look, each item in the list finds potential urls and gives them a different color, to indicate links. When a user taps a tweet, a dialog is shown allowing them to choose where to go, the tweet on Twitter's mobile site, or any of the links contained in the tweet.

About screen

The about screen displays opening times, contact information and the address. Clicking the address button starts a Google Maps url. Not all Android versions properly respond to the "geo:" intent, so a workaround is used. Some phones will have the Google Maps app intercept these urls.

A dialer button shows the cafe's phone number. If the device cannot make phonecalls (tablets, for example), the button is disabled.

The buttons use a custom style, to avoid having the user's Android theme style the button in un-aesthetic manner.

Inner workings

The datamodel is stored inside a singleton, which gets loaded on startup by a custom Application class. The app supplies an initial database as JSON, but if a downloaded version is found, it will use it (since it will probably be newer).

Updates happen in an IntentService, first it queries the Kleyn database, second it queries Twitter. Currently the updates happen automatically when the List screen is shown, but only if the last time an update happened was more than an hour ago. The user can also force an update, by clicking the refresh item in the action bar. If the user forces an update, a Toast will be shown when it's done, informing the user of success or failure.

When an update finishes, a Broadcast is sent to any object listening, which can then decide to refresh its contents. Currently the List screen and the Twitter screen respond to these broadcasts.

The list of tweets is also stored internally, in order to immediately have something to show, should the update still be running.

Get it on Google Play