Posts Tagged ‘ui’

Business Android: Enterprise APIs missing in the platform

Friday, December 3rd, 2010

My definition or, rather, my perception of an enterprise mobile app is generally the following:

  • The app in question is a mobile client for a multi-user client-server application. It can either be the only kind of client for the app, or co-exist with a web interface or, for example, a PC desktop client for the same server app.
  • It has a “serious” user interface – rather than trying to impress the end-user with a slick, non-typical UI, it aims to be as straightforward and predictable as possible. It tends to have various forms, charts, trees and lists of various complexity.
  • Conceptually, very often a big part of the app is dedicated to managing (CRUDing) a set of entities such as users, documents, reports etc. Domain models can get quite complex, often with tree-like structures, fine-grained user permissions with different access levels and profiles.
  • Internally the app uses typical client-server protocols like SOAP, XML-RPC or even CORBA. Often in-house protocols and frameworks are used on top of those generic ones or instead of them. You get the picture.

Enterprise apps might not seem to be the most interesting kind to work on. However, they are attractive for many studios because customers usually pay well for them. In addition, as a developer, you will find that they are often challenging to implement – at least with functional and internal quality that will satisfy both the customer and you.

In this article, I would like to cover a list of typical facilities that Android developers need when developing such kind of apps. The platform does not really have that much to offer (as we will see), and many developers build their own ad-hoc frameworks that they try to reuse as needs arise.

I will share some thoughts that I have about that, and will be happy to know your stories too.


Android UI: Vintage Thermometer – Code Update

Wednesday, August 4th, 2010

After I had posted the original article about making a vintage Android thermometer, it became popular very quickly and I was really surprised how useful some people found it. The code I wrote for that article was meant as an example, a draft of what you could really do using the techniques described in the post.

Freddy Martens from ATS Tech Lab took that code, improved it and modified it for his needs while creating several industrial automation components based on the improved code of Vintage Thermometer. You can have a look at them here. I recommend reading other articles on their blog as well and keeping an eye on it.


Android UI: Making an Analog Rotary Knob

Wednesday, July 28th, 2010

For some reason, I really enjoy recreating analog components on Android. Today I’d like to share my experience of re-creating a knob that looks like this:

As you can guess, this type of knob does not have min/max bounds and can be freely rotated as much as you want. This type of control is often used for browsing through a list of options that can be wrapped around. Also, an important property is that this knob does not rotate smoothly but switches from one nick to another. You can imagine that it also clicks when you rotate it – and our Android replica will also make that sound!

Here’s how the Android version looks:

I’ve included the source into this article. However, please be warned it is not completed and you will need to fix or finish few things before you can use this code in your own app.

And now, let’s get down to work!


Android Beatz: Making a Drum Machine App

Monday, July 5th, 2010

Hello again! I’m back from a wonderful vacation and ready to share some more experience of Android programming. Today I’m presenting a simple drum machine app that I made for fun. If you saw the video above, then you probably got the idea how a drum machine works. The design was inspired by one of the greatest drum machines ever – the AKAI MPC. You can have a look at how the original device looked like for example here. Our app is, of course, greatly simplified compared to AKAI MPC, but you can have some fun with it too.

Here’s a screenshot for a better idea of how the UI looks (clickable):

Some interesting features of this app:

  1. The UI is done using bitmaps and custom controls to imitate the original device
  2. The latency is low enough not to be annoying (at least on my Droid)
  3. You can press multiple buttons at once which is very good for long samples such as the bass drum
  4. The LCD screen control uses a 9-patch bitmap background, and switches between flashing, static and ticker text
  5. The LCD screen uses a custom TrueType font that is included within the app

Now let’s see how the most interesting features of this app were implemented (as usual, the source is available at the bottom of the article).


Android UI: Making a Live Wallpaper (Fire Simulation)

Sunday, June 13th, 2010

In the previous article we used 2D graphics via the Android Canvas to draw a custom UI widget. The Canvas approach is very useful when you need to draw relatively static graphics or when there is not too much complex animation. That is the typical case for UI widgets.

In this article we will develop a live wallpaper that displays a fire simulation that you might remember from the good old days of demo scene and DOS. Since we need very fast graphics, we will use OpenGL as the rendering engine. Although OpenGL is typically used for 3D graphics, it can also be used for hardware-accelerated 2D graphics, such as in this case.

Here’s our plan:

  1. Understand and implement the fire effect
  2. Enable OpenGL to render the fire on the screen
  3. Convert our simulation into a live wallpaper

The source code is available at the bottom of the article (but read on to learn some of its limitations).

Note: The part related to live wallpapers will only work on Android 2.1 or higher.


Android Custom UI: Making a Vintage Thermometer

Monday, June 7th, 2010

Hi everyone. Today I would like to show how to design a simple yet cool-looking custom UI element for Android. Since an analog clock is already part of the standard UI, I came up with an vintage thermometer as an example.

The final result looks like this:

Here’s the list of nice features this custom view has:

  • A gradient metallic rim and a textured face
  • The logo changes its color depending on the temperature (as you can see in the screenshots)
  • A circle-bent title below the logo
  • A 3D hand with a shadow
  • The hand moves in a physically realistic fashion
  • And, of course, it shows the real temperature – based on the phone temperature sensor (if your phone has one)

Also, the thermometer view tries to be a good Android UI citizen:

  • Scales well to any size
  • Supports screen orientation changes and layout changes
  • Optimizes its drawing procedures, doesn’t eat CPU when the hand is not moving
  • Saves and restores its state gracefully when the activity is paused, re-created etc.
  • Reusable – not bound to any external code

If you’d like to know how to develop views of this kind, read on. It’s so easy and fun to do that you will be surprised.