Why do I have 2 red dots on my KivyMD2.0.0 screen. I am using a KV string and I am rendering it. How to correct this?

Question

I am a newbie using Stack Overflow and kivymd. Why do I have 2 unexpected red dots on my KivyMD2.0.0 screen? I have created a KV string in my Python code to reproduce the behavior. This code loads a KV string and renders it.

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

KV = """
MDScreen:
    MDBoxLayout:
        orientation: "vertical"
        MDTopAppBar:
            font_style: "Display"
            role: "small"
            size_hint_x: 1 # This makes sure the top bar spans the full width of the screen
            pos_hint: {"top": 1}  # Ensures the TopAppBar is at the top of the screen
            MDTopAppBarLeadingButtonContainer:
                MDActionTopAppBarButton:
                    icon: "arrow-left"
                    on_release: app.back_to_previous_screen()
            MDTopAppBarTitle:
                id: edit_cards_top_app_title
                text: "Manager App"
            MDTopAppBarTrailingButtonContainer:
                MDActionTopAppBarButton:
                    icon: "file-document-multiple"
                    MDBadge:
                        id: edit_cards_badge_table_rows
                        text: "0"
                        md_bg_color: 0/255, 128/255, 128/255, 1  # teal by default (RGBA)
                MDActionTopAppBarButton:
                    icon: "database"
                    MDBadge:
                        id: edit_cards_badge_table
                        text: "0"
                        md_bg_color: 0, 0, 1, 1  # blue by default (RGBA)
        MDScrollView:
            pos_hint_x: 1
            size_hint_y: 1      
            MDList:
                #size_hint_y: None 
                #height: self.minimum_height
                pos_hint_x: 1 #{"center_x": .5}
                id: double_card_list        
                MDBoxLayout:
                    orientation: 'horizontal'
                    size_hint_y: None
                    height: "480dp" # Define the size here for both card
                    padding: "10dp"  # Define the space outside around the MDCard here
                    spacing: "10dp"  # Define the horizontal space between the cards here
                    # Row1 Card1                  
                    MDCard:
                        size_hint_x: None
                        size_hint_x: "400dp" 
                        elevation: 10
                        radius: [10]
                        MDBoxLayout:
                            orientation: 'vertical'
                            padding: "10dp" # Inside the border of the card
                            spacing: "5dp"
                            MDLabel:
                                text: "Product Information"
                                halign: "center"
                    # Row1 Card2   
                    MDCard:
                        size_hint_x: None
                        size_hint_x: "400dp" 
                        #size_hint_y: None
                        #size_hint_y: "750dp"                        
                        elevation: 10
                        radius: [10]
                        MDBoxLayout:
                            orientation: 'vertical'
                            padding: "10dp" #Inside the border of the card
                            spacing: "5dp"
                            MDLabel:
                                text: "Agency Information"
                                halign: "center"
        MDListItem:
            id: status_bar
            size_hint_y: None
            height: "40dp"
            #md_bg_color: (137/255, 196/255, 244/255, 1)  # Jordy blue background (RGBA) # Do not work
            #size_hint_x: 0.85
            #pos_hint: {"center_x": 0.5}  # Center the status bar
            size_hint_x: 1
            MDListItemHeadlineText:
                text: "Status :"
            MDListItemSupportingText:
                id: status_bar_supporting_text
                text: "Supporting text:"
            MDListItemTertiaryText:
                text: "Tertiary text"
"""
class Example_unexpected_2_red_dot_(MDApp):
    def build(self):
        return Builder.load_string(KV)


Example_unexpected_2_red_dot_().run()

Any idea on how to correct this code to avoid to have this 2 red dots? Why these 2 dots are coming out of the blue?

Screnshot : unexpected_2red_dots_on_the_screen

I tried to convert the initial KV file with 4k lines to a simple KV string. I have isolated this behavior in this simplified code. If I removed the lines with the badges I do not have the red spots.

Answer 1

Thanks Andy and Furas for your lights,

Here is the corrected code after:

1. commenting

   1.1) the line #md_bg_color: 0/255, 128/255, 128/255, 1 # teal by default (RGBA)

   1.2) the line #md_bg_color: 0, 0, 1, 1 # blue by default (RGBA)

   Each line was generating a red dot. So in total we have 2 red dots. So it wasn't possible to define the background color of the badges in the KV string. By default, the background color of each badge is red. So the only option was to dynamically define each badge's colour at the start of the code.

2. Adding the event on_start function So I have added the on_start event function to define each color of the background of each badge.

3. increasing the value to "70dp" in the line MDListItem: id: status_bar size_hint_y: None height: "70dp" This is more hiding the 2 red dots under the MDListeItem widget? (I changed slowly this value from 40dp till 70dp)

4. I will anyway open a bug report on this case.

Corrected code:

From kivy.lang import Builder
from kivymd.app import MDApp

KV = """
MDScreen:
    MDBoxLayout:
        orientation: "vertical"
        MDTopAppBar:
            font_style: "Display"
            role: "small"
            size_hint_x: 1 # This makes sure the top bar spans the full width of the screen
            pos_hint: {"top": 1}  # Ensures the TopAppBar is at the top of the screen
            MDTopAppBarLeadingButtonContainer:
                MDActionTopAppBarButton:
                    icon: "arrow-left"
                    on_release: app.back_to_previous_screen()
            MDTopAppBarTitle:
                id: edit_cards_top_app_title
                text: "Manager App"
            MDTopAppBarTrailingButtonContainer:
                MDActionTopAppBarButton:
                    icon: "file-document-multiple"
                    MDBadge:
                        id: edit_cards_badge_table_rows
                        text: "0"
                        #md_bg_color: 0/255, 128/255, 128/255, 1  # teal by default (RGBA)
                MDActionTopAppBarButton:
                    icon: "database"
                    MDBadge:
                        id: edit_cards_badge_table
                        text: "0"
                        #md_bg_color: 0, 0, 1, 1  # blue by default (RGBA)
        MDScrollView:
            pos_hint_x: 1
            size_hint_y: 1      
            MDList:
                #size_hint_y: None 
                #height: self.minimum_height
                pos_hint_x: 1 #{"center_x": .5}
                id: double_card_list        
                MDBoxLayout:
                    orientation: 'horizontal'
                    size_hint_y: None
                    height: "480dp" # Define the size here for both cards
                    padding: "10dp"  # Define the space outside around the MDCard here
                    spacing: "10dp"  # Define the horizontal space between the cards here
                    # Row1 Card1                  
                    MDCard:
                        size_hint_x: None
                        size_hint_x: "400dp" 
                        elevation: 10
                        radius: [10]
                        MDBoxLayout:
                            orientation: 'vertical'
                            padding: "10dp" # Inside the border of the card
                            spacing: "5dp"
                            MDLabel:
                                text: "Product Information"
                                halign: "center"
                    # Row1 Card2   
                    MDCard:
                        size_hint_x: None
                        size_hint_x: "400dp" 
                        #size_hint_y: None
                        #size_hint_y: "750dp"                        
                        elevation: 10
                        radius: [10]
                        MDBoxLayout:
                            orientation: 'vertical'
                            padding: "10dp" #Inside the border of the card
                            spacing: "5dp"
                            MDLabel:
                                text: "Agency Information"
                                halign: "center"
        MDListItem:
            id: status_bar
            size_hint_y: None
            height: "70dp"
            #md_bg_color: (137/255, 196/255, 244/255, 1)  # Jordy blue background (RGBA) # Do not work
            #size_hint_x: 0.85
            #pos_hint: {"center_x": 0.5}  # Center the status bar
            size_hint_x: 1
            MDListItemHeadlineText:
                text: "Status :"
            MDListItemSupportingText:
                id: status_bar_supporting_text
                text: "Supporting text:"
            MDListItemTertiaryText:
                text: "Tertiary text"
"""
class Example_unexpected_2_red_dots_with_correction(MDApp):
    def build(self):
        return Builder.load_string(KV)
    
    def on_start(self):
        # Customize the color of the badges dynamically at start
        self.root.ids.edit_cards_badge_table_rows.md_bg_color= (0/255, 128/255, 128/255, 1) # RGBA Teal color of the badge changed dynamically at start
        self.root.ids.edit_cards_badge_table.md_bg_color=      (0/255, 0/255, 255/255, 1)   # RGBA Blue color of the badge changed dynamically at start 

Example_unexpected_2_red_dots_with_correction().run()

Answer 2

I start removing elements from KV (one-by-one) to see which element can make problem
and I found that problem makes MDBadge.

When I remove md_bg_color: 0/255, 128/255, 128/255, 1 # teal by default (RGBA)
then it moves dots to icons

But I don't know why it happening and how to set this color correctly.

---

Little later I tried to use canvas.before and canvas.after but it put item behide circle or on top of number

MDBadge:
    id: edit_cards_badge_table
    text: "0"
    #md_bg_color: 0, 0, 1, 1  # blue by default (RGBA)
    canvas.before:   # canvas.after:
        #Clear:
        Color:
            rgba: 0/255, 128/255, 128/255, 1 
        Rectangle:
            size: self.size
            pos: self.pos

so it would need to add number again - and it would need to know how to add it and keep access to update value later ;)

canvas.before: , canvas.after:

---

Source code for MDBadge

---

Someone reported similar problem to the author(s):

MDBadge color, for a MDNavigationItemIcon inside MDNavigationBar creates random red circle in MDNavigationBar · Issue #1761 · kivymd/KivyMD

Answer 3

I think it has to do with multitouch emulation: Check it here:

Apparently you can do the following to disable it:

from kivy.config import Config
Config.set('input', 'mouse', 'mouse,multitouch_on_demand')