Codenameone How to change Picker Text color

user_2581314 0
Viewed 215

Picker has two components :

  1. The Initial/Selected value displayed in Codenameone UI.
  2. The Native picker dialogs/sheets.

It makes sense that we can not control the theme/color/style of Native Pickers as they are influenced by an OS-specific theme selected by the user.

But how do we change the color of text inside the picker in Codenameone Interface? What I want to do in the following screenshot is to make the texts "3/20/20, 00:00, & 0-5 persons" white.

What I tried :

  1. Channing the "Label" font-family in CSS changed the font so I tried changing the "color" from CSS but it didn't help.
  2. I tried changing the foreground color like this : timePicker.style.fgColor = 0xfffff

  3. In CSS I defined a style.

     DropdownStyle{
    background-color: #333333;
    color: #FFFFFF;
}

    Then I set the style to picker 

    datePicker.uiid ="DropdownStyle"

But none of the above ways worked as expected.

What is the right way to do it? I believe I am missing a very simple thing but I couldn't find it myself.

enter image description here

enter image description here

codenameone kotlin java
1 Answers

AS @shai-almog suggested, after digging through Component Inspector, I found out that

enter image description here

  • A PickerComponent has the ID "TextComponent" so if we replace the UIID of PickerComponent it's going to change the style of just the Holder Component that's why I was able to change the background-color only but not the text.
  • Inside it, there is Picker which Represents the Text and has the id TextComponentField.

So I had to Style them individually like this : 

    TextComponent{
        background-color: rgba(0, 0, 0, 0.0);

    }
    TextComponentField{
        color: white;
    }

Output :

enter image description here

user_25813140
Related