Search code examples
pythoncolorstoolbarkivymdtextcolor

Toolbar text does not change in kivyMD and text goes beyond the boundaries


from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.properties import ObjectProperty

class ContentNavigationDrawer(BoxLayout):
    """This class manage the navigation drawer contents"""
    screen_manager = ObjectProperty()
    nav_drawer = ObjectProperty()


class MyApp(MDApp):
    def build(self):
        """Return the main kivy file and set themes """

        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = 'BlueGray'
        self.theme_cls.accent_palette = "Teal"
        return Builder.load_file("main.kv")

MyApp().run()

and the kv file

<ContentNavigationDrawer>:
    MDBoxLayout:
        orientation: "vertical"
        spacing: dp("8")
        padding: dp("8")

        ScrollView:
            MDList:
                OneLineIconListItem:
                    text: "hexagon"
                    on_press:
                        root.nav_drawer.set_state("close")
                        root.screen_manager.current = "mainScreen"
                    IconLeftWidget:
                        icon: 'hexagon'

MDScreen:
    MDToolbar:
        id: toolbar
        title: "Hexagon"
        md_bg_color: app.theme_cls.primary_color
        specific_text_color: 1, 1, 1, 1
        pos_hint: {"top": 1}
        elevation: 9
        icon: 'account-circle'
        left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]

    MDNavigationLayout:
        x: toolbar.height

        ScreenManager:
            id: screen_manager

            MDScreen:
                name: "mainScreen"
                BoxLayout:
                    orientation: 'vertical'
                    size: root.width, root.height

                    ScrollView:
                        do_scroll_x: True
                        do_scroll_y: True
                        size_hint: (1, .85)
                        bar_width: 10
                        bar_color: (1, 0, 0 ,1)
                        scroll_type: ["bars", "content"]
                        pos_hint: {'top': 1.0 - toolbar.height/float(root.height)}

                        GridLayout:
                            id: labels_layout
                            size_hint_y: None
                            height:self.minimum_height
                            size_hint_x: None
                            width: self.minimum_width
                            cols: 1
                            spacing: "5dp"
                            padding: "5dp"
                            
                            MDLabel:
                                id: big_text_label
                                text: "asldklsa\nasdsaf\nssss\n"
                                width: self.texture_size[1]
                                height: self.texture_size[1]
                                
        MDNavigationDrawer:
            id: nav_drawer
            
            ContentNavigationDrawer:
                screen_manager: screen_manager
                nav_drawer: nav_drawer  

test_screen_shot

  1. I want to change the color of the toolbar I tried almost everything to do it like md_bg_color: app.theme_cls.primary_color and md_bg_color: .2, .2, .2, 1

  2. And the text goes beyond the boundaries even of the app if i add some widgets to get back text to its area the it goes under the toolbar

Using: Python 3.9, dev kivyMD 2.0, editor pycharm


Solution

  • Use:

    from kivymd.app import MDApp
    from kivy.lang import Builder
    
    KV = """ 
    <ContentNavigationDrawer>:
        MDBoxLayout:
            orientation: "vertical"
            spacing: dp("8")
            padding: dp("8")
    
            ScrollView:
                MDList:
                                
                    OneLineIconListItem:
                        divider: None
                        text: "hexagon"
                        on_press:
                            app.root.ids.nav_drawer.set_state("toggle")
                            #root.screen_manager.current = "mainScreen"
                        IconLeftWidget:
                            icon: 'account'
                            
    ##                BoxLayout:
    ##                    canvas.before:
    ##                        Color:
    ##                            rgba: [1,.3,0,1]
    ##                        Line:
    ##                            width: dp(1)
    ##                            rounded_rectangle:
    ##                                (self.x, self.y, self.width-dp(20), dp(43),\
    ##                                dp(12),dp(12),dp(12),dp(12),\
    ##                                dp(50))
                                
                    OneLineIconListItem:
                        divider: None
                        text: "hexagon"
                        on_press:
                            app.root.ids.nav_drawer.set_state("toggle")
                            #root.screen_manager.current = "mainScreen"
                        IconLeftWidget:
                            icon: 'hexagon'
                    OneLineIconListItem:
                        divider: None
                        text: "Edit"
                        on_press:
                            app.root.ids.nav_drawer.set_state("toggle")
                            #root.screen_manager.current = "mainScreen"
                        IconLeftWidget:
                            icon: 'pencil'
                    OneLineIconListItem:
                        divider: None
                        text: "Home"
                        on_press:
                            app.root.ids.nav_drawer.set_state("toggle")
                            #root.screen_manager.current = "mainScreen"
                        IconLeftWidget:
                            icon: 'home'
                    OneLineIconListItem:
                        divider: None
                        text: "Likes"
                        on_press:
                            app.root.ids.nav_drawer.set_state("toggle")
                            #root.screen_manager.current = "mainScreen"
                        IconLeftWidget:
                            icon: 'star'
                    OneLineIconListItem:
                        divider: None
                        text: "hexagon"
                        on_press:
                            app.root.ids.nav_drawer.set_state("toggle")
                            #root.screen_manager.current = "mainScreen"
                        IconLeftWidget:
                            icon: 'hexagon'
                    OneLineIconListItem:
                        divider: None
                        text: "Search"
                        on_press:
                            app.root.ids.nav_drawer.set_state("toggle")
                            #root.screen_manager.current = "mainScreen"
                        IconLeftWidget:
                            icon: 'magnify'
    
    Screen:
        MDToolbar:
            id: toolbar
            pos_hint: {"top": 1}
            title: "Hexagon"
            md_bg_color: [1,0,0,1]
            specific_text_color: [1, 1, 1, 1]
            elevation: 0
            left_action_items: [["menu", lambda x: nav_drawer.set_state("toggle")]]
            right_action_items: [["account-circle", lambda x: print(222)]]
    
    
        ScreenManager:
            id: screen_manager
    
            MDScreen:
                name: "mainScreen"
    
                FloatLayout:
                    BoxLayout:
                        id: m5
                        pos_hint: {"center_x": .5, "center_y": .38} #this will change if you change this Window.size = (330, 500)
                        orientation: "vertical"
                    
                        ScrollView:
                            do_scroll_x: False #True
                            do_scroll_y: True
                            #size_hint: (1, .85)
                            bar_width: 10
                            bar_color: (1, 0, 0 ,1)
                            scroll_type: ["bars", "content"]
                            pos_hint: {'top': 1.0 - toolbar.height/float(root.height)}
    
                            GridLayout:
                                id: labels_layout
                                size_hint_y: None
                                height:self.minimum_height
                                size_hint_x: 1
                                #width: self.minimum_width
                                cols: 1
                                spacing: "5dp"
                                padding: dp(20)
                                
                                MDLabel:
                                    id: big_text_label
                                    text: "\\n\\n\\n\\n\\n\\nWelcome to this New App.\\nYou will get a lot of benefits.\\n\\njbsidis recommendations are good so we can design in different ways."
                                    
                MDNavigationDrawer:
                    id: nav_drawer
                    
                    ContentNavigationDrawer:
                        screen_manager: screen_manager
    
    """
    
    from kivy.uix.boxlayout import BoxLayout
    from kivy.properties import ObjectProperty
    
    class ContentNavigationDrawer(BoxLayout):
        """This class manage the navigation drawer contents"""
        screen_manager = ObjectProperty()
        #nav_drawer = ObjectProperty()
    
    
    class WeatherApp(MDApp):
        def __init__(self, **kwargs):
            super().__init__(**kwargs)
            pass
        def build(self):
            self.screen = Builder.load_string(KV)
            return self.screen
    WeatherApp().run()
    

    Pictures:

    enter image description here

    enter image description here

    enter image description here