Android "DataEntry ListView" Design Pattern

by Goran Siric on Tuesday, February 28, 2012 12:59 PM

If you, like me, recently started to develop applications for the Android platform (or any other mobile platform) it is likely that you encountered the problem of designing user interfaces.

One of the first application that I developed for the Android platform was some kind of "data entry" application. In some parts that application requires input of large amount of data, and it was necessary to design a screen for entering the required data.

 
Since I have been mainly developed desktop or web application I developed data entry screens that look like desktop applications.

An example of such screen can be seen here:



I spent lots of time to make the screen look better, but after a while I realized that this screen layout has several disadvantages:

Creating such a layout is quite tedious because you must use relative layout and this leads to that you must take care about relationship between controls.

If you found that there is a need for displaying and entering new data then adding new controls to this layout is not such easy task.

Changing the ID of a control can be very problematic because it can disrupt the entire layout.

If the screen contain too much controls then entire layout may not fit on the screen, so the whole layout must be wrapped inside the ScrollView.

You must take care about focusing correct control in data entry process.

This layout will hardly be usable in landscape screen orientation

There is hard to find correct place for displaying "hint" about data to be entered

I spend some time to try to find a user interface design pattern  for the "data entry" applications. I found few sites with helpful  design patterns for the Android platform, but I could not find "something" that I need.

Some of these sites you must visit are:

www.androiduipatterns.com
www.androidpatterns.com


After spending some time thinking about the best way to present  and allow the user to enter and change data obvious solution appeared to me. Why not using ListView control in a similar way how it is used to manage application preferences  ?

Each list item within the control can be set to present different type of data. When you touch specific list item there will be displayed dialog for entering and changing that data according to the type of data. With this idea in mind I developed a small framework that utilize ListView and ListAdapter in similar way like preferences already work in android applications.

 

Result can be seen here:

When you tap one of the list items you will get dialog for entering or changing data: 


Advantages over previous design are obvious:

Advantages for developers are:

- Simple layout in main xml file
- Each list item layout is in separate file
- Easy to add new or rearrange existing data items

Advantages for the users are:

- Consistent and natural look of the screen
- Easy navigation through the data
- An intuitive way to change the data
 - Layout will look good on the landscape screen orientation

If we compare old and new look we will see that there are more advantages in new design:


1. There is more space for displaying caption text in new design. 
2. In new design each data is displayed and changed in similar way (tap and change)
3. There is no need for visual data separator like one in old design
4. In new design it is easier to describe data cause you have more space for caption in each list item

I hope you will find this article usefull and please feel free to leave a comment or tell me your experience about developing “data entry” applications for android.

Author
Goran Siric

Blog about programming

4 comment(s) so far...

Anonymous 8/19/2012

Would you be able to post your sample code for the screen

 
Anonymous 11/23/2012

I was already beginning to picture my data entry app in a traditional desktop manner also but after reading this article I definitely like your listview approach much better. Thanks for the help!

 
Anonymous 6/25/2013

Dear Goran Siric,<br /><br />I required that program. kindly send us coding of this program.<br /><br />Thanks<br /><br />Best regards<br /><br />Farid<br />

 
Goran Siric 6/27/2013

Dear Farid, I will try to put some example code in next few weeks.<br />



  Hi folks! I am proud to present: 
Bubble Zoo Escape, my first Android game built using AndEngine 
If you have a time, please download and give feedback!

If you found this useful,
you can buy me a coffe :)

By me a coffe through PayPal :)


Featured articles

AndEngine - Textures tips and tricks

What you should know abot textures before get started programming your first game.

GIMP script for creating Android icons at once

Script for creating Android icons for different screen resolutions at once. Icons can be saved using standard Android icons naming conventions and saved in appropriate folders.

Creating Android button with image and text using relative layout

Source code with examples how to use relative layout to create nice buttons with text and images in Android

Android application and the Internet

Tutorial about connecting to the web pages on the Internet from Android application, using both POST and GET web requests.

Copyright 2011 by Goran Siric