Android Question Group a List of names by Month Date into some kind of UI list

[Mark Stuart]

Hi all,

Continuing with my Birthday app, I would like to list the persons by their birthday month number and display those names and other data into some kind of list, in that group.
I have an example image where the names are listed as I mention.
I've experimented with the CustomListView with group headers. but the group header touch behavior is just like any other row, in that it gets hilited, which it does not need to be.
If you try any other android app, group headers don't behave on a touch as it would in a B4A CustomListView.

Here's a UI example of what I'm looking for - clean where the group header is no different in its looks (really) compared to a person row. Notice the group header in a LightGray color:

Any suggestions or examples would be appreciated.
FYI: I have searched the forum for examples but not to my liking.

Regards,
Mark Stuart

 

[Peter Simpson]

Hello Mark,

Continuing with my Birthday app, I would like to list the persons by their birthday month number and display those names and other data into some kind of list, in that group.

If you store the data correctly in an SQLite database, this is extremely simple to achieve

I have an example image where the names are listed as I mention.

That's a nice clean image.

I've experimented with the CustomListView with group headers.

The layout in the screenshot that you've attached can easy be created with CustomListView.

Basically a simple SQLite database to store all the basic information needed, plus it's simple to manipulate the data use SQL queries.

Search the forum for lazy loading examples.

Enjoy...

 

[Mark Stuart]

Hi,
I searched on lazy loading and didn't find the specific concept of creating a group header similar to the image I attached to my original post.
Yeah, I can create the group header with database records and a CLV, but will it behave like other apps I've used where the group header row is a very relevant aspect of the UI. It does not and shouldn't respond to touches, and shouldn't change background color like the CLV does in B4A.
This is the main criticism I have about using the CLV in this situation.
I've tried - like I previously mentioned - the ScrollView, Panels, and Labels, but I didn't get it quite like I wanted. The ScrollView got all messed up.

Any other thoughts and suggestions would be appreciated.

Thank you Peter for the suggestion on lazy loading, but I didn't find anything.

Mark Stuart

 

[Alex_197]

Hi,
I searched on lazy loading and didn't find the specific concept of creating a group header similar to the image I attached to my original post.
Yeah, I can create the group header with database records and a CLV, but will it behave like other apps I've used where the group header row is a very relevant aspect of the UI. It does not and shouldn't respond to touches, and shouldn't change background color like the CLV does in B4A.
This is the main criticism I have about using the CLV in this situation.
I've tried - like I previously mentioned - the ScrollView, Panels, and Labels, but I didn't get it quite like I wanted. The ScrollView got all messed up.

Any other thoughts and suggestions would be appreciated.

Thank you Peter for the suggestion on lazy loading, but I didn't find anything.

Mark Stuart

Use WebBiew - create HTML with Javascript

 

[Mark Stuart]

Use WebBiew - create HTML with Javascript

I've never used the WebView. Any examples of using it with a demo app?

 

[mangojack]

Here's a UI example of what I'm looking for - clean where the group header is no different in its looks (really) compared to a person row. Notice the group header in a LightGray

I have knocked up a simple sample that might help. similar to your image using a clv, the group headers don't react to a clv Click.

PS: just noticed the separator bar does show the click color at the extreme right .. you might have to fine tune the bar layout.
cheers

 

[Mark Stuart]

I have knocked up a simple sample that might help. similar to your image using a clv, the group headers don't react to a clv Click.

Thank you mangojack. I'll check it out tomorrow.

 

[mangojack]

Following on ... The Separator/Group Header bar just needed to be anchored correctly. I have updated the sample.

 

[TILogistic]

I was working on something similar to what you're looking for, this might help you achieve it.

CLVNested - Allows nesting CLVs

Putting a CLV inside another one will not work out of the box. The inner list will not be scrollable. CLVNested makes it possible. Limitations: - One list per item. - The user will not be able to interact with views added to the inner list. The basic features of the inner list will work. -...

www.b4x.com

 

[Mark Stuart]

Hey TILogistic,

I saw that and it is not a fit to what I'm looking for, but thank you.

So far @mangojack has come up with, what I think, is a solution. It's not exactly perfect for my standards, ie: the clicking sound when touching on the group header on the CLV - a basic function of the CLV. But hey, I'm all in on his solution. I've played around with it to match the UI I want and it's looking good. Also functional.

I'll post my app solution - a modified @mangojack version - to let you see my modifications. It still uses the SQLite database of course and the excellent capabilities of creating different layouts to the CLV.Add() function, from what @mangjack coded.

Thanx all for your contributions to my asking for help.

Regards,
Mark Stuart

 

[Alex_197]

I've never used the WebView. Any examples of using it with a demo app?

it's simple, just create HTML with CSS and javascript and load it as a string to WebView

 

[mangojack]

It's not exactly perfect for my standards, ie: the clicking sound when touching on the group header on the CLV - a basic function of the CLV.

Didn't come accross that .. ? Possibly because I have haptic feedback off maybe.
Hope you can solve that if you decide to continue in this direction.

 

[Mark Stuart]

OK, so here's my version of what @mangojack put together.
I've updated the UI and added some things to it.

Here's a screen shot of my UI update. Pretty close to the first example screenshot in post #1.
I've attached the B4XPages app that @mangojack supplied me with my changes.

I added a MenuItem to refresh the CLV. Try it after scrolling to the end and then press the Refresh button. It returns the focus to the top of the CLV list. Neat trick to have for the user.

Feel free to download the app and modify it to your liking. I ask in turn if you add to the app that you zip it up and post it to this thread so that others can learn from your knowledge. B4A's CLV is a very well used and an important part of almost every app out there that keeps records in a database.
It's UI must be intuitive to the user as they use the app. That is my undertaking here, and so I hope I've reached that today.

Happy hunting
Mark Stuart

 

[TILogistic]

Clicking on elements generates a selection animation, clicking on a group does not trigger the click event, and other improvements.