B4A Class Fixed CustomListView Separator Color When Displaying Small # of Items

The CustomListView has a problem when the number of items displayed does not fill its entire height. The separator color will fill the bottom of the CustomListView which makes it look horrible. Take a look at the "Before" image to see what I mean. The red separator color fills the bottom of the CustomListView where there are only 2 or 3 items in it.

I have solved the problem by shrinking the CustomListView height whenever there are not enough items in it to fill its entire height. Take a look at the "After" image and you will see the background (gradient background panel) will show through and the ugly red separator color is gone from the bottom! Of course when more items are added to the CustomListView it will gradually expand back to its original height.

I have kept the code module name the same because it can replace the existing CustomListView without any code changes.

If you find any problems with it, please let me know.
Enjoy!
 

Attachments

  • BeforeCustomListView.png
    BeforeCustomListView.png
    102.1 KB · Views: 234
  • AfterCustomListView.png
    AfterCustomListView.png
    160.2 KB · Views: 235
  • CustomListView_FixedDividerColor.zip
    12.4 KB · Views: 154
Last edited:

Daniel-White

Active Member
Licensed User
Longtime User
I was trying to figure out that problem 2 weeks ago, without any success, thanks you for share this. I very appreciated, it is very ugly the Customlistview when show few items. :eek:

I have a project with the original class customlistview, I remplace it with your CustomListview.bas class in that project.
I don't know, if I need to do something more or different.

and receive this:

Error occurred on line: 53 (CustomListView)
java.lang.NumberFormatException: Invalid double: "null"
at java.lang.StringToReal.invalidReal(StringToReal.java:63)
at java.lang.StringToReal.parseDouble(StringToReal.java:269)
at java.lang.Double.parseDouble(Double.java:295)
at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:612)

The line 53 is
upload_2016-8-2_16-42-30.png


I noticed the divide color items in the designer
upload_2016-8-2_16-43-35.png
 

Widget

Well-Known Member
Licensed User
Longtime User
I used CustomListView v1.20 which already had that code in DesignerCreateView() and I didn't touch it.
You are getting the error because you must be using an old version of CustomListView that did not have the "DividerColor" property. Since it is not stored in your .b4a layout, it returns NULL from Props.Get("DividerColor") and Java throws an exception when it tries to assign NULL to SV.Color (Int?).

I didn't think it was appropriate for me to modify existing code in CustomListView v1.20 that had nothing to do with what I was working on.
To solve your problem, you need to replace the code:

B4X:
    sv.Color = props.Get("DividerColor")
    dividerHeight = DipToCurrent(props.Get("DividerHeight")) 'need to scale the value

with something like:
B4X:
  'If your old version of CustomListView doesn't have a DividerColor property you will also need to use this code:
  if props.ContainsKey("DividerColor") then
    sv.Color = props.Get("DividerColor")
  else
    sv.Color = Colors.Gray    'Choose any default color you like
  end if

  'If your old version of CustomListView doesn't have a DividerHeight property you will also need to use this code:
  if props.ContainsKey("DividerHeight") then
    dividerHeight = DipToCurrent(props.Get("DividerHeight")) 'need to scale the value
  else
     dividerHeight = 4
  end if
 

Daniel-White

Active Member
Licensed User
Longtime User
I used CustomListView v1.20 which already had that code in DesignerCreateView() and I didn't touch it.
You are getting the error because you must be using an old version of CustomListView that did not have the "DividerColor" property. Since it is not stored in your .b4a layout, it returns NULL from Props.Get("DividerColor") and Java throws an exception when it tries to assign NULL to SV.Color (Int?).

I didn't think it was appropriate for me to modify existing code in CustomListView v1.20 that had nothing to do with what I was working on.
To solve your problem, you need to replace the code:

B4X:
    sv.Color = props.Get("DividerColor")
    dividerHeight = DipToCurrent(props.Get("DividerHeight")) 'need to scale the value

with something like:
B4X:
  'If your old version of CustomListView doesn't have a DividerColor property you will also need to use this code:
  if props.ContainsKey("DividerColor") then
    sv.Color = props.Get("DividerColor")
  else
    sv.Color = Colors.Gray    'Choose any default color you like
  end if

  'If your old version of CustomListView doesn't have a DividerHeight property you will also need to use this code:
  if props.ContainsKey("DividerHeight") then
    dividerHeight = DipToCurrent(props.Get("DividerHeight")) 'need to scale the value
  else
     dividerHeight = 4
  end if

I only added your code and a comment to this line too
' PressedDrawable.Initialize(props.Get("PressedColor"), 2dip)

Thanks you so much, it is working very nice.
 

Widget

Well-Known Member
Licensed User
Longtime User
I only added your code and a comment to this line too
' PressedDrawable.Initialize(props.Get("PressedColor"), 2dip)

Thanks you so much, it is working very nice.

I'm glad you like it. I updated the code 2 hours ago with a minor change to handle an empty CustomListView when the Activity is first displayed. So if your CustomListView has no items in it when you app runs, this later version handles that (otherwise you get the ugly red rectangle until rows are added to the CustomListView). I also updated the demo program to demonstrate this.

Have fun with it.
 
Top