Bubble ZOO Escape Anouncement

  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!

Android "DataEntry ListView" Design Pattern

Feb 28

Written by: Goran Siric
2/28/2012 9:59 PM  RssIcon

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.

4 comment(s) so far...


Gravatar

Re: Android "DataEntry ListView" Design Pattern

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

By Sam on   8/19/2012 8:33 AM
Gravatar

Re: Android "DataEntry ListView" Design Pattern

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!

By Fred on   11/23/2012 6:10 PM
Gravatar

Re: Android "DataEntry ListView" Design Pattern

Dear Goran Siric,

I required that program. kindly send us coding of this program.

Thanks

Best regards

Farid

By Farid on   6/25/2013 8:55 PM
Gravatar

Re: Android "DataEntry ListView" Design Pattern

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

By Goran Siric on   6/27/2013 9:03 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Bubble Zoo Escape

  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!

Search Blog

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.

Recent Entries

Unity start guide
AndEngine - Textures tips and tricks
Calculated variables
Comments about Parking SMS Scheduler
Comments about cities and parking zones
Android "DataEntry ListView" Design Pattern
Android application and the Internet

Recent Comments

Re: Creating Android button with image and text using relative layout
What if, using the drawable left method, i want to increase the distance of the icon from the left limit of the button, making it a bit more central?
Re: Creating Android button with image and text using relative layout
Hi Shameel,try to use ImageView android:scaleType property in xml button layout:

android:scaleType="centerInside"

For more info see: developer.android.com/reference/android/widget/ImageView.ScaleType.html
Re: Creating Android button with image and text using relative layout
Hi bro,

Can u tell me how to set the size of icon according to our requirement in button ?

Actually my icon size is 256x256 and i want 20x20 ???
Re: Creating Android button with image and text using relative layout
Hi dude, i have also find out one good example

How To Create Button

Re: Creating Android button with image and text using relative layout
Hello, I am new for android.I want to move text on image view. how its possible?
Plz help me.Thanks in advance