Home > Software engineering >  change text color of a MDRaisedButton on a popup window in kivymd?
change text color of a MDRaisedButton on a popup window in kivymd?

Time:03-07

I am a new learner so i got a silly question. But it did not work for me.

When i first click this program, it opens a popup button with two buttons.

I'd like to have different text color for each button and different its background color.

I am trying to use KivyMD. Hence, I'd love to use MDRaisedButton for those two buttons.

I'd like to have one button with Black Text color with blue background and the other button with White color and black background.

I much appreciate your help.

Python file

'''

from kivy.uix.widget import Widget
from kivy.lang import Builder

from kivy.config import Config                 
Config.set('graphics', 'width', '600')         
Config.set('graphics', 'height', '750')        

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.factory import Factory
from kivy.uix.screenmanager import ScreenManager
from kivy.properties import ObjectProperty
from kaki.app import App
from kivy.factory import Factory
import os

from kivymd.uix.datatables import MDDataTable

from kivy.uix.popup import Popup
from kivy.graphics import Rectangle, Color
from kivy.uix.gridlayout import GridLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty
from kivy.metrics import dp


Builder.load_file('new_window_mo.kv')

class Dex(Popup):

    ptName = ObjectProperty(None)
    ptAdminWeight = ObjectProperty(None)
    ptIdealWeight = ObjectProperty(None)


    def on_open(self):
        
        self.ptName.focus = True
        self.data_tables = None

    def calculate(self):
        ptName = self.ptName.text
        ptAdminWeight = self.ptAdminWeight.text
        ptIdealWeight = self.ptIdealWeight.text

        self.data_tables = MDDataTable(
            size_hint=(0.9, 0.8),
            column_data=[
                ("No.", dp(30)),
                ("User", dp(30)),
                ("Password", dp(30)),
            ],
            row_data=[
                (
                    "1",
                    "The pitonist",
                    "Strong password",
                ),
                (
                    "2",
                    "The c   lover",
                    "Save me!!!:)",
                ),
            ]
        )
        self.ids.data_layout.add_widget(self.data_tables)

    def print(self):
        ptName = self.ptName.text
        ptAdminWeight = self.ptAdminWeight.text
        ptIdealWeight = self.ptIdealWeight.text

        printme(self, ptName, ptAdminWeight, ptIdealWeight)

    def clear(self):
        self.ptName.text =""
        self.ptAdminWeight.text =""
        self.ptIdealWeight.text = ""
    

    
class Remi(Popup):
    def build(self):
        
        return self.root

class test1(Popup):
    def build(self):
        
        return self.root

class MyLayout(Widget):
    pass
class AwesomeApp(MDApp):
    def build(self):
        return MyLayout()

if __name__ == '__main__':
    AwesomeApp().run()

'''

kivy file

'''

#:import Factory kivy.factory.Factory

<Dex>:
    ptName : ptName
    ptAdminWeight : ptAdminWeight
    ptIdealWeight : ptIdealWeight


    auto_dismiss: False
    size_hint: 1, 1
    #pos_hint: {"x":0.2, "top":0.9}

    title: "Dex - Weight-Based"   

    canvas.before:
        Color:
            rgba: (1,0,0,1)
        Rectangle:
            pos:self.pos
            size:self.size

    MDGridLayout:  #전체 블록 1칼럼 4row

        adaptive_height: True
        md_bg_color: app.theme_cls.primary_color
        md_bd_color: app.theme_cls.accent_palette
        cols: 1
        rows: 4
        size: root.width, root.height
        size_hint:1,1

        MDBoxLayout:   #첫 번째 약 이름
            adaptive_height: True
            md_bg_color: app.theme_cls.primary_color
            size_hint: 1, .4
            orientation: "vertical"
            padding: dp(0), dp(30), dp(0), dp(10)
            spacing: dp(20)
            MDLabel:
                text:"Dex"
                halign: "center"
                font_size: '45sp'
            MDLabel:
                text:"Pre"
                halign: "center"
                font_size: '30sp'
        #환자이름,몸무게 정보 넣기
        MDGridLayout:
            rows: 3
            adaptive_height: True
            size_hint:1, None
            height: self.minimum_height
            #spacing: dp(15)
            padding: dp(50), dp(10), dp(50), dp(20)

            MDTextField:
                id: ptName
                #input_filter: "str"
                hint_text: "Patient Name"
                line_color_focus: 0,0,0,1
                font_size: '30sp'
                focus: True
                write_tab: False
                
            MDTextField:
                id:ptAdminWeight
                input_filter: "float"
                hint_text: "Admission Weight"
                required: True
                font_size: '30sp'
                line_color_focus: 0.9,0.75,0,1
                write_tab: False
            MDTextField:
                id:ptIdealWeight
                input_filter: "float"
                hint_text: "Idea Weight"
                required: True
                font_size: '30sp'
                line_color_focus: 0.9,0.75,0,1
                write_tab: False
        MDGridLayout:    #buttons
            cols: 4
            rows: 1
    
            size_hint: 1, .25
            pos_hint: 1, None
            pos_hint: {'center_y':0.5}

            padding: "20dp", "0dp", "20dp", "15dp"
            spacing: "20dp"

            MDRoundFlatIconButton:
                text: "Calculate"
                icon: "calculator"
                pos_hint: {"center_y": .5}
                font_size: '20sp'
                size_hint: .3, 1
                #theme_text_color: "Custom"
                text_color: 1,1,1,1
                icon_color: 1,1,1,1
                line_color: 1,1,1,1
                line_width: 2
                on_release: root.calculate()
                write_tab: False

            MDRoundFlatIconButton:
                text: "Print"
                icon: "printer"
                pos_hint: {"center_y": .5}
                font_size: '20sp'
                size_hint: .3, 1
                #theme_text_color: "Custom"
                text_color: 1,1,1,1
                icon_color: 1,1,1,1
                line_color: 1,1,1,1
                line_width: 2
                write_tab: False
                on_release: root.print()

            MDRoundFlatIconButton:
                text: "New"
                icon: "close-thick"
                font_size: '20sp'
                size_hint: .3, 1
                pos_hint: {'center_y': 0.5}
                text_color: 1,1,1,1
                icon_color: 1,1,1,1
                line_color: 1,1,1,1
                line_width: 2
                on_release: root.clear()
        BoxLayout:
            id: data_layout
            canvas:
                Color:
                    rgba: [1,1,.1,.6]
                Rectangle:
                    pos:self.pos
                    size:self.size
            

<Remi>:
    auto_dismiss: False
    size_hint: 1, 1

    title: "Remi Weight-Based "   
    canvas.before:
        Color:
            rgba: (0,1,0,1)
        Rectangle:
            pos:self.pos
            size:self.size
    
    BoxLayout:
        
        orientation: "vertical"
        size:root.width, root.height

        Label:
            text: "label 1" 
        Button:
            text: "Close"
            font_size: 24
            on_release: root.dismiss()
<MyLayout>
    BoxLayout:
        orientation:"vertical"
        size: root.width, root.height
        #md_bg_color: app.theme_cls.primary_color

        MDRaisedButton:            #This is the problem area
            #id: data_scr
            text: "Dex"
            font_size: 32
            theme_text_color: "Custom"
            #text_color: 0,0,0,1
            #color: [0,0,0,1]
            #background_color: app.theme_cls.primary_color
            #line_color: [0,0,0,1]
            #theme_text_color: root.theme_text_color   
            text_color: (0,0,0,1)
            size_hint: 1,.5
            on_press: Factory.Dex().open()
        #Button:
        MDRaisedButton:
            text: "Remifentanyl"
            font_size: 32
            size_hint: 1,.5
            on_press: Factory.Remi().open()

'''

CodePudding user response:

You shouldn't have any problem setting the background colour using the md_bg_color. But there might be some issue when you try to set text_color especially for the values# [0.0, 0.0, 0.0, 0.87], [0.0, 0.0, 0.0, 1.0] and [1.0, 1.0, 1.0, 1.0] (this seems very awkward !). Except these values you will be free to set any valid colour code in rgba format.

So for black colored text you can set it like text_color: 0, 0, 0, 0.99 in kvlang (but that might change in future versions; I haven't found any in 1.0.0). Or to keep backward compatibility perhaps you can set theme_text_color: "Primary" etc.


#Actually there's a code-block for those restricted values in the source code of KivyMD v0.104.2.

  • Related