MaikelS
MaikelS

Reputation: 1299

Efficient way of creating long forms

I have to recreate a number of extremely long forms with checkboxes, input fields, etc. on Android devices.

I was going about this just hardcoding it all, but it's such an enormous number of fields, it doesn't seem very efficient.

I have attached a screenshot below so you can get an idea.

enter image description here

Upvotes: 0

Views: 1615

Answers (7)

Dia Kharrat
Dia Kharrat

Reputation: 6006

I suggest you think carefully about a suitable UI for a mobile platform where you don't have much real-estate. The screenshot you showed might work on a desktop, but isn't appropriate for a mobile platform.

In any case, I've recently released an open source project that aims to simplify building forms on Android. It supports text fields, labels, select lists, date pickers, etc. Check it out here:

NexusDialog: https://github.com/dkharrat/NexusDialog

Upvotes: 0

HitOdessit
HitOdessit

Reputation: 7256

You can divide your complex one-page layout for multiple steps, each one in separate activity/fragment with next/prev buttons, in other words implement "wizard".

You can use open source library of @Roman Nurik: Android WizardPager

Upvotes: 1

Thomas Clayson
Thomas Clayson

Reputation: 29925

Building on Dany's idea, create a list view in your layout XML then create a row layout in a new XML file. In this row layout (e.g. chkboxRow.xml) you will have a list view row defined as a textview and three check boxes.

You can also create the layout of the other rows in a similar fashion.

Now in your List View Adapter you will need to feed in a list (array) of rows you'll need. The adapter can then use this list to get the number of rows needed. If each item in the list is a Dictionary<String, String> then you can give the row attributes:

List of items:

[1]:{ rowTitle:"First row", rowStyle:"chkbox", rowID:"123" }
[2]:{ rowTitle:"Second row", rowStyle:"picker", rowID:"124", items:((List)[1]:"first item",[2]:"Second item") }

Then when you're looking for the view for the row you're on you can get the corresponding item in the list and check the rowStyle property. Based on this you know which row layout file you need to inflate with your layout inflater, and you can go about customising the view appropriately.

Hope this helps.

Upvotes: 0

Egor
Egor

Reputation: 40203

I think, the best approach here will be to divide the whole form into pieces and place them inside some number of activities. Every piece of form should not be scrollable, meaning the checkboxes should fit in the screen. Every activity should have a Next button, and you should also place some kind of progress bar inside every activity, informing the user of how much is left to go. Hope this helps.

Upvotes: 0

akkilis
akkilis

Reputation: 1934

First of all, there must be a difference in the design of the web app and a mobile app.
you can use the web view to open this page.

Else divide your fields in pieces and have tabs architecture or multiple activities.

Upvotes: 1

Leon van Noord
Leon van Noord

Reputation: 898

You could have a few options per Activity and 'scroll' through the form by clicking a 'next' button on the bottom of the screen to go to the next options.

This way you don't have a huge list to scroll through, which possibly can cause the user to overlook an option.

Upvotes: 0

Dany&#39;s
Dany&#39;s

Reputation: 928

i think you can create a ListView. And on every row you will have a TextView, and 3 Checkboxes..Also you can personalize the row and you ca tell for example if(row==3)then draw textview and edit text. This is the best approach i think.

Upvotes: 0

Related Questions