Thanks Andy and Furas for your lights,
Here is the corrected code after:
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.
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.
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()