Forum > Android
[LAMW] How doI change item color in a jListView?
(1/1)
Manlio:
I'm trying to implement dark/light modes in my LAMW-written app, and after a lot of trying I still cannot change the color of the items of a jListView. I managed to change the background color at will, but not the item's text color.
Can anyone kindly help?
Thanks.
nicelybrewed:
You can change the back color of the items of a jListView's items using the OnDrawItemBackColor event like below, can be customised depending on the items required, just amend as required:
--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure TAndroid1.jListView1DrawItemBackColor(Sender: TObject; itemIndex: integer; out backColor: TARGBColorBridge);begin if (itemIndex > -1) then // or (itemIndex mod 2 = 0) for alternate items, although I think you said you want a blanket color begin backColor := colbrYellow end;end;
You can change the text color of a jListview's items using the OnDrawItemTextColor event, can be customised depending on the item required, just amend as required:
--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure TAndroid1.jListView1DrawItemTextColor(Sender: TObject; itemIndex: integer; itemCaption: string; out textColor: TARGBColorBridge);begin if (itemIndex > -1) then begin textColor := colbrBlue end;end;
If you need a blanket color set for the item's text color you can also use the FontColor and TextColorInfo property in the ObjectInspector properties of the jListview.
Manlio:
Thank you! The code below did the trick.
One thing that changed, however, is that when an item is tapped in white over black mode, nothing shows it is, while the other way around (tapping an item in black over white) the item background goes gray for a moment, highlighting the fact that it has been tapped.
Do you or anyone else know how to maintain that behaviouf of the jListView when the font color has been changed?
The code that worked for me: (unlike FontColor and unlike TextColorInfo) is this:
--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure TAndroid1.jListView1DrawItemTextColor(Sender: TObject; itemIndex: integer; itemCaption: string; out textColor: TARGBColorBridge);begin if (itemIndex > -1) then begin textColor := colbrBlue end;end;
If you need a blanket color set for the item's text color you can also use the FontColor and TextColorInfo property in the ObjectInspector properties of the jListview.
[/quote]
nicelybrewed:
What color is the property of HighlightSelectedItemColor set to? if it's set to white and item text set to white then I would expect the text to disappear.
Does it still behave the same once set to a different text color?
I'm also assuming you're using the latest LAMW version.
A workaround could be to do this, or something similar based on your setup, it sets the text to a different color if the itemIndex and selected index match, otherwise uses the default text color:
--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure TAndroid1.jListView1DrawItemTextColor(Sender: TObject; itemIndex: integer; itemCaption: string; out textColor: TARGBColorBridge);begin if (itemIndex > -1) and (jListView1.getItemIndex <> itemIndex) then begin textColor := colbrwhite end else if (jListView1.getItemIndex = itemIndex) then begin textColor := colbrBlack end; end;
--- Quote from: Manlio on May 30, 2025, 07:45:20 pm ---One thing that changed, however, is that when an item is tapped in white over black mode, nothing shows it is, while the other way around (tapping an item in black over white) the item background goes gray for a moment, highlighting the fact that it has been tapped.
--- End quote ---
Manlio:
--- Quote from: nicelybrewed on May 30, 2025, 09:41:24 pm ---What color is the property of HighlightSelectedItemColor set to? if it's set to white and item text set to white then I would expect the text to disappear.
--- End quote ---
I tried HighlightSelectedItemColor and what it does is to permanently change the background color of the currently selected item.
What I wanted, instead, is to have that brief flash, brief change of color, that happens when you tap an item. It flashes and then it goes away after a second.
What I finally realized is that this temporary flash is achieved by darkening the current background color under that item for just a second. But if the background color is black, as I make it in dark mode, then the darkening of the current item's background is not visible, because the background color is already black. What should happen in that case is a lightening of the background color, but I don't think there's an option for that. Does anyone know if there is? My only other option would be to make the background rather dark but not quite black, so that the darkening of that already dark background should still be at least barely noticeable, instead of the totally invisible effect when the background is fully black...
But if anyone has a better solution, I'd be very grateful.
Navigation
[0] Message Index