CODEWITHSUNDEEP
pythonkivy
Gatt88
Gatt88

Reputation: 77

Python Kivy RecycleView. How to change the background color of the Recycleview table based on the data value of the cells

I'm trying to change the background color of the Recycleview table based on the data value of the cells. So, I'would like to change the color only the in the cells containing a specific string of text.

The Goal is to change the color when text is = '1'

Somebody could help?

Here is my code, a simple working app. .py file:

from kivy.core.window import Window
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.recycleview.views import RecycleDataViewBehavior
from kivy.uix.label import Label
from kivy.properties import BooleanProperty
from kivy.uix.recyclegridlayout import RecycleGridLayout
from kivy.uix.behaviors import FocusBehavior
from kivy.uix.recycleview.layout import LayoutSelectionBehavior

class ScreenManagement(ScreenManager):
    pass

class Sfondo_tabella(RecycleDataViewBehavior, Label):
    index = None
    selected = BooleanProperty(False)
    selectable = BooleanProperty(False)


class RecycleGridLayout(FocusBehavior, LayoutSelectionBehavior, RecycleGridLayout):
    pass

class Schermo_1(Screen):
    data_list = ['1', '2', '3', '2', '1', '3', '3', '2', '1']


class Temp_kvApp(App):
    Window.size = (1182, 739)

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

.kv file:

ScreenManager:
    id: screen_manager
    name: "screen_manager"

    Schermo_1:
        id: schermo_1
        name: "Schermo_1"
        manager: screen_manager

<Sfondo_tabella>:
    color: 0,0,0,1
    font_size:  self.height * 0.5
    text_size: self.width, None
    valign: 'top'
    halign: 'center'

    canvas.before:
        Color:
            rgba: (1, 1, 1, 1)
        Rectangle:
            pos: self.pos
            size: self.size
    canvas:
        Color:
            rgba:0,0,0,1
        Line:
            width:0.5
            rectangle:(self.x,self.y,self.width,self.height)

<Schermo_1>

    BoxLayout:
        orientation: "vertical"
        GridLayout:
            size_hint: 1, 0.1
            height: 50
            cols: 1

            Label:
                font_size:  self.height / 1.75
                text_size: self.width, None
                valign: 'top'
                halign: 'left'
                color: 1, 1, 1 ,1
                text: ""
                canvas.before:
                    Color:
                        rgb: 0.803, 0.486, 0.176
                    Rectangle:
                        pos: self.pos
                        size: self.size

        GridLayout:
            id: tasti
            size_hint: 1, 0.075
            cols: 3

        #COL_1
            Button:
                id: col_1
                text: "COL_1"
                size_hint_x: 0.33
                font_size:  self.height / 2.5
                text_size: self.width, None
                valign: 'top'
                halign: 'center'
                background_color: 1.22, 1.22, 1.22, 1

        #COL_2
            Button:
                id: col_2
                text: "COL_2"
                size_hint_x: 0.33
                font_size:  self.height / 2.5
                text_size: self.width, None
                valign: 'top'
                halign: 'center'
                background_color: 1.22, 1.22, 1.22, 1

        #COL_3
            Button:
                id: col_3
                text: "COL_3"
                size_hint_x: 0.33
                font_size:  self.height / 2.5
                text_size: self.width, None
                valign: 'top'
                halign: 'center'
                background_color: 1.22, 1.22, 1.22, 1


        BoxLayout:
            RecycleView:
                id: tabella_lista_costi_aggiuntivi
                viewclass: 'Sfondo_tabella'
                data: [{'text': str(x)} for x in root.data_list]
                scroll_y: 1
                effect_cls: "ScrollEffect" # prevents overscrolling
                RecycleGridLayout:
                    cols: 3
                    cols_minimum: {0: col_1.width, 1: col_2.width, 2: col_3.width}
                    size_hint: 1, None
                    default_size: None, dp(col_1.height/1.75)
                    default_size_hint: 1, None
                    height: self.minimum_height
                    width: self.minimum_width

Upvotes: 0

Views: 678

Answers (1)

amras
amras

Reputation: 1619

This can be done in the canvas.before instruction under <Sfondo_tabella> section like below:

<Sfondo_tabella>:
    color: 0,0,0,1
    font_size:  self.height * 0.5
    text_size: self.width, None
    valign: 'top'
    halign: 'center'

    canvas.before:
        Color:
            rgba: (0, 1, 0, 1) if root.text == '1' else (1, 1, 1, 1)
        Rectangle:
            pos: self.pos
            size: self.size
    canvas:
        Color:
            rgba:0,0,0,1
        Line:
            width:0.5
            rectangle:(self.x,self.y,self.width,self.height)

Here the background of the cell would be green if the cell text is '1' otherwise it would be white.

Upvotes: 1

Related Questions