Multi column support for tablet layout

[jingtang10]

SDK should scale well on tablet devices by providing optional multi-column layouts

AIm to demonstrate on:

• Tablets of different screen sizes esp 7/8 inch
• If possible, chromebook running an Android app

[FikriMilano]

@jingtang10 @pld @f-odhiambo

1. does this mean: by having this feature enabled, the screen can show x columns of questionnaire items? currently we can only show 1 column by using Linear Layout Manager.

2. can we consider using Grid Layout? I think it will be easier since we just need to change the recycler view's layout manager from Linear Layout to Grid Layout. We can drop using Linear Layout since Grid Layout with 1 span/column behave the same way, plus it has the flexibility for more columns.

3. is there a reason why you suggest using table layout?

4. I suggest we configure this by using DataCaptureConfig, but let me know if people have other ideas.

5. speaking of configuration, do we only want to configure the enablement of this feature or we also like to configure the amount of columns?

6. to make it responsive, I suggest we define the amount of columns by deciding from the device's screen size

[FikriMilano]

@shelaghm @jingtang10 can you please provide a design? so we can have a clear end result once the feature is done

[shelaghm]

What is the rationale for adding multiple columns? Is it for questionnaires? For most questionnaires even on large devices /web/desktop it's most common and best practise to do a single column questionnaire. It's easier to follow and typically also faster to complete.

I agree to make it responsive so that the layouts adjust to the screen size.

[FikriMilano]

@shelaghm

1. For me, I'm still trying to understand the end goal of this ticket, which I don't have the final decision to
2. Yes it's for questionnaires.
3. I think this question is either for @jingtang10 / @fredhersch / @f-odhiambo

   What is the rationale for adding multiple columns?

[jingtang10]

Thanks @shelaghm and @FikriMilano. A few thoughts to share here:

1. First of all, there is some multi column (or table) support baked in SDC IG we need to think about supporting: https://hl7.org/fhir/R4/valueset-questionnaire-item-control.html. This is about laying out questions in a group either horizontally or vertially in a table. Not exactly clear how much more work here is needed and priority. But we need to keep this in mind.
2. For multi columns, I don't really know if SDC IG has anything to say about this. But I think there're at least two possibilities we can explore -> one is to allow overflow to the next column and enable swiping to nagivate, i think this would be super neat as an alternative way of navigation; another is to provide a navigation draw on the left for pages/sections to utilise the horizontal space provided by large screens.
3. A simpler problem to solve is probably just to provide horizontally arranged questions, for example, first name and last name typically in a paper questionnaire are just on the same line, but this is currently not possible with SDC.

[FikriMilano]

Thanks @jingtang10, for clarifying.

@shelaghm can you create some designs based on Jing's comment please? That would be really helpful.

[jingtang10]

@FikriMilano can you please do some prototyping here first regarding 2 and 3? I think for 2, it might be interesting to see how view pager works here: https://developer.android.com/guide/navigation/navigation-swipe-view, and for the navigation drawer as well.

as for 3, might be useful to clarify on chat.fhir.org first if there's any extension we should use.

[FikriMilano]

@jingtang10 okay I'll do that

[Itskiprotich]

Hello @jingtang10 Let me share some design work we wanted to achieve using the SDC Library

Given the constraints we faced, we made the decision to utilize a custom layout to achieve our design goals

[FikriMilano]

@Itskiprotich thank you

[FikriMilano]

@jingtang10 referring to your points

1. First of all, there is some multi column (or table) support baked in SDC IG we need to think about supporting: https://hl7.org/fhir/R4/valueset-questionnaire-item-control.html. This is about laying out questions in a group either horizontally or vertially in a table. Not exactly clear how much more work here is needed and priority. But we need to keep this in mind.

2. For multi columns, I don't really know if SDC IG has anything to say about this. But I think there're at least two possibilities we can explore -> one is to allow overflow to the next column and enable swiping to nagivate, i think this would be super neat as an alternative way of navigation; another is to provide a navigation draw on the left for pages/sections to utilise the horizontal space provided by large screens.

3. A simpler problem to solve is probably just to provide horizontally arranged questions, for example, first name and last name typically in a paper questionnaire are just on the same line, but this is currently not possible with SDC.

to solve point 1 and 3 we can use gtable, instead of table or htable. refer to this conversation w Lloyd https://chat.fhir.org/#narrow/stream/179255-questionnaire/topic/sample.20of.20table.20and.20htable/near/391804725

for point 2, I don't know why we need it, but we can have a conversation about it.

[FikriMilano]

@jingtang10 let me know if you have comments on these 2 options:

1. Render the horizontal sub-items inside the GroupViewHolderFactory

Challenges:

• need access to questionnaire viewmodel
• how to build the questionnaire adapter items and that also contains a list of questionnaire view item via questionnaire viewmodel
• managing the questionnaire state via questionnaire view model
• need access to fragment to get the right custom matcher provider

=====================

2. Render the horizontal sub-items in the QuestionnaireFragment, the same way we render other items. By using GridLayoutManager, dynamic span count for each item, and items positioning (grid starts from top-left then move to right).

If there are 3 items in a single row, the span for each of item is 1. If there's only 1 item in a single row, the span of that item is 3 (taking the whole row).

Challenges:

• dynamic span for each item
• positioning of sub items, make sure the intended sub items are rendered in the same row

[FikriMilano]

this has been deprioritized over the following ticket: https://github.com/google/android-fhir/issues/2003

[FikriMilano]

thanks @jingtang10

Jing’s comment: do option 1 w a tweak

1. create a separate widget, sort of a container for the questions
2. check repeated groups PR from kevin https://github.com/google/android-fhir/pull/1994
3. there is a abstraction we can use called QuestionnaireAdapterItem, we can have data class other than Question, we could have a new type for the container, that is not necessarily has to be rendered the same way as the Question type
4. how do we recycle the view inside the container, since those sub items are in a different recycler view as compared to the one on QuestionnaireFragment