In kivy, is it possible to change the color of a sub element in a spinner?

Question

I'm doing a small app with kivy. After I've selected one of the element in a spinner, I don't want it to look the same next round so the user knows a value was entered for this value. I would like to change its color. Just for this element. Is it possible?

kv file

    Spinner:
        id: sliderComponents
        visible: False
        opacity: 1 if self.visible else 0
        disabled: not self.visible
        text: "<Component...>"
        values: ("Component A", "Component B", "Component C", "Component D", "Component E", "Component F", "Component G", "Component H", "Component I")
        pos_hint: {'x': 0.5, 'y': 0.5}

So if I choose "Component B", I want it after to be in a different color. Just "Component B"

Thank you!

Answer 1

Yes, it is possible.

1. Implement a dynamic class or class rule of type SpinnerOption
2. Change the background_color to the colour you want when the button is pressed or released (using Button's on_press or on_release events)

Snippets - kv file

<CustomSpinnerOptions@SpinnerOption>:
    background_normal: ''
    background_color: 0, 0, 1, 1      # blue

    on_release: 
        self.background_color=1, 1, 0, 1    # yellow

Example

The following example is using kv file and Python script.

main.py

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.lang import Builder


Builder.load_string("""
#:import Factory kivy.factory.Factory

<CustomSpinnerOptions@SpinnerOption>:
    background_normal: ''
    background_color: 0, 0, 1, 1      # blue

    on_release: 
        self.background_color=1, 1, 0, 1    # yellow

<CustomDropdown@DropDown>:
    max_height: 300
    bar_width: 5
    bar_color: 0, 1, 0, 1   # green
    bar_inactive_color: 1, 0, 0, 1  # red        
    effect_cls: 'ScrollEffect'
    scroll_type: ['bars', 'content']


<CustomSpinner@Spinner>:
    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            size: self.size
            pos: self.pos

    background_normal: ''
    background_color: 1, 1, 1, 1  # white
    color: 0, 0, 0, 1

    text: '<Component...>'
    values: [ "Component A", "Component B", "Component C", "Component D", "Component E", "Component F", "Component G", "Component H", "Component I" ]

    size_hint: (None, None)
    size: 200, 48
    sync_height: True
    pos_hint: {'center_x': .5, 'center_y': .5}

    on_text:
        app.root.show_selected_value(self, self.text)

    dropdown_cls: Factory.CustomDropdown
    option_cls: Factory.CustomSpinnerOptions


<RootWidget>:
    cols: 1

    CustomSpinner:

""")


class RootWidget(GridLayout):

    def show_selected_value(self, spinner, text):
        print('The spinner', spinner, 'have text', text)


class SpinnerDemoApp(App):
    title = 'Spinner Demo - Change selected button colour'

    def build(self):
        return RootWidget()


if __name__ == "__main__":
    SpinnerDemoApp().run()

Output