performance - Approach for rendering Dynamic Forms on Android? -


i'm hoping in wide world of android development has come across problem/use case before, , has relatively straight-forward approach implementation.

i have client android application, needs render list of fields end-user fills out. each field known-type, such "text" or "radio", "multiselect", etc. when user taps on form, api call made backend returns schema form (ie: each field's uuid, title, description, hint text, etc), , data form fields filled out prior time. example of data on api call:

{   "submittedby": 8,   "updatedby": 8,   "createdby": 8,   "submitteddatemillis": 1489680600000,   "updateddatemillis": 1489680600000,   "createddatemillis": 1489680600000,   "name": "my form",   "formtemplateid": 3,   "id": 0,   "schema": {     "6051c1e3-b4bf-4e6a-afe3-de2497dbff11": {       "units": "ft.",       "hinttext": "length of measurement",       "required": false,       "description": "take length of measured item 4 decimal places.",       "title": "measurement",       "type": "number"     },     "fdf6ff0b-e60d-4591-a3e7-5467cd7bc67e": {       "enum": [         "foo",         "bar",         "baz",         "bat"       ],       "required": true,       "hinttext": "",       "description": "this description multiple choice question",       "title": "multiple choice (radio) title",       "type": "radio"     },     "203ef6d8-03fe-48e8-9a45-b18d12721d44": {       "enum": [         "option 1",         "option 2",         "option 3",         "option 4"       ],       "required": true,       "hinttext": "",       "description": "this description multiselect question",       "title": "this title multiselect question",       "type": "multiselect"     },     "751e9b8f-a59d-4e81-b3da-17ae44daa44e": {       "enum": [         "a dropdown answer",         "this option dropdown question it's limit 130 characters"       ],       "required": true,       "hinttext": "",       "description": "this description dropdown question",       "title": "this title dropdown question",       "type": "select"     },     "33e13828-9171-4680-b68b-9838d4d42af8": {       "required": true,       "hinttext": "this hint text text question limit 130 characters",       "description": "this description text question limit 5000 characters",       "title": "this title text question limit 130 characters",       "type": "text"     }   },   "fields": {     "6051c1e3-b4bf-4e6a-afe3-de2497dbff11": "5555.5555",     "fdf6ff0b-e60d-4591-a3e7-5467cd7bc67e": "bar",     "751e9b8f-a59d-4e81-b3da-17ae44daa44e": "a dropdown answer",     "203ef6d8-03fe-48e8-9a45-b18d12721d44": [       "option 1",       "option 2",       "option 4"     ],     "33e13828-9171-4680-b68b-9838d4d42af8": "my answer text question."   } } 

the api call, /api/v1/forms/0, returns above data. in have schema describes field types, , fields give me answers populate (some of missing). both have uuids "match up", know field data put form field.

now have render form, , allow user tap "submit" , post/put new data api.

what approach dealing this? consider myself beginner in android, , i've come far, not best solution (and doesn't scale beyond say, 50 questions, "render" , "submit" portions of activity become slow):

  1. make api call, data (above example) back.
  2. for every schema type, .inflate() xml layout whatever .type (number, text, radio, etc), and construct java type (formelement i'm calling it) represents schema json type. after .inflate(), .settag(formelement) , "attach" java formelement it.
  3. get widget inside layout inflated, , if have corresponding data fields mapping in json, set data whatever is. if not, leave blank.
  4. when user taps "submit", grab parent form view, , it's children. loop through every child , pull out formelement via .gettag(). formelement#gettype find type of view, work backwards , knowing view iterating on, cast it, it's inner data value, build resulting json data up, , put api.

i might assign every widget represents data entry point (text, radio, etc) unique id, based on uuid schema (uuid v1, 1 way timestamp, , hope best, since going 128 bits 32 bits). use id later, when need pull data out after user taps submit.

there looks promising capability in android's data binding library, don't think android's data binding can handle "dynamic" nature of laying out ui, different widgets have different data types (some of these pull down menus).

  1. is data binding better approach here?
  2. can data binding handle both concerns of rendering ui here, and helping fetch data ui compose api put request server?

resources i've looked @ far, shine light on overall problem:

thank ahead of time!

you should create representation of fields in memory (like collection of field's). can use recyclerview lay them out efficiently. in recyclerview, can have view types (one each field type) knows how handle particular field. inside recyclerview, bind views, can use data binding. there demo on github shows how use data binding recyclerview.

last not least, make sure network operations de-coupled ui. ui reads collection each time network request, updates collection, notifies change , recyclerview update itself. (you want make optimistic updates on collection since network requests may take time large topic cover here).


Comments