adapt the SmartTileWithLabel to a RecycleView

Question

Good morning my friends, I would like to have the SmartTileWithLabel result as shown in the link below:

Demonstration

The problem is that I need to use RecycleView

Below is my code:

My main.py

class Imagem(MDGridLayout):
    text = StringProperty()
    source = StringProperty()
    
import random
class ScreenNovaTela(Screen):

    def on_kv_post(self, base_widget, text="", search=False):
    
        # Inicializando o banco de dados.
        self.firebase = pyrebase.initialize_app(config)
        self.db = self.firebase.database()

        #self.produtos = self.db.child("Produtos").order_by_child("codigos/Chamada").get(token='5z5z5z5z5z5z5z5z')
        self.produtos = self.db.child("Produtos").order_by_child("codigos/Chamada").limit_to_first(5).get(token='5ZcdRS5cXIFtvv2BbULpQMKl6sV8QZbnSDUdQzJl')

        self.ids.rv2.data = []
        for produto in self.produtos.each():
        
            if text.upper() in produto.val()['nmproduto']:
                # Verifico se a imagem existe:
                valor = round(random.uniform(33.33, 66.66), 2)
                if produto.val()['url'] != 'SemUrl':
                    self.ids.rv2.data.append(
                        {
                            "source": produto.val()['url'],
                            "text": '[size=26]{}[/size]\n[size=14]{}[/size]'.format(valor, produto.val()['nmproduto']),
                            "callback": lambda x: x,
                        }
                    )
                else:
                    self.ids.rv2.data.append(
                        {
                            "source": './images/sem_imagem.png',
                            "text": '[size=26]{}[/size]\n[size=14]{}[/size]'.format(valor, produto.val()['nmproduto']),
                            "callback": lambda x: x,
                        }
                    )   

My main.kv

<Imagem@MDGridLayout>
    cols: 2    

    SmartTileWithLabel:
        source: ''
        text: ''

<ScreenNovaTela>:
    name: 'nova_tela' 

    FloatLayout:
        CampoArredondado:
            id: pesquisa
            hint_text: 'Digite o que procura'
            text_validate_unfocus: False
            pos_hint: {'center_x': 0.42, 'center_y': 0.84}
            padding: dp(15)        
            size_hint_x: .75
            #on_text: root.on_kv_post(self, self.text)

        MDIconButton:
            icon: "magnify"
            pos_hint: {"center_x": .95, "center_y": 0.84}
            on_release: root.on_kv_post(self, pesquisa.text)            


    FloatLayout:
        pos_hint: {'center_x': 0.5, 'center_y': 0.52}
        RecycleView:
            id: rv2
            viewclass: 'Imagem'
            key_size: 'height'
            pos_hint: {'center_x': 0.5, 'center_y': 0.27}
            RecycleGridLayout:
                cols:2                
                row_default_height: dp(4)#(self.width - self.cols*self.spacing[0]) / self.cols
                #adaptive_height: True
                #adaptive_size: True
            
                padding: dp(4), dp(4)
                spacing: dp(4)
                md_bg_color: app.theme_cls.primary_color

and below is the image of the result:

How do I adapt SmartTileWithLabel to a RecycleView?

What am I doing wrong to not show these images?

Answer 1

Following is a complete minimal example of RecycleView using SmartTileWithLabel:

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.properties import ListProperty


my_image_data = [
    {"source" : "./images/coragem_btn.png",
    "text" : "[size=26]Cat 1[/size]"},

    {"source" : "./images/coragem_btn.png",
    "text" : "[size=26]Cat 2[/size]"},

    {"source" : "./images/coragem_btn.png",
    "text" : "[size=26][color=#ffffff]Cat 3[/color][/size]"},

    {"source" : "./images/coragem_btn.png",
    "text" : "[size=26][color=#ffffff]Cat 4[/color][/size]"}
]


KV = '''
BoxLayout:
    RecycleView:
        data: app.image_data
        viewclass: "PhotoTile"
        RecycleGridLayout:
            cols: 4
            padding: dp(4), dp(4)
            spacing: dp(4)
            size_hint_y: None
            height: self.minimum_height
            default_size: None, dp(64)
            default_size_hint: 1, None

<PhotoTile@SmartTileWithLabel>:
    tile_text_color: app.theme_cls.accent_color
'''

class MyApp(MDApp):
    image_data = ListProperty()
    def build(self):
        root = Builder.load_string(KV)
        self.image_data = my_image_data*50
        return root


MyApp().run()