python-3.xkivy-languagekivymdimagelistmdtool

Blank White space overlapping KivyMD ImageList from MDToolbar


I am practicing KivyMD ImageList, and the imagelist is been overlayed by a blank space coming from MDBottomAppbar.

Here's what it looks like:

enter image description here

Please how do I remove the white blank space that is above MDBottomAppbar and overlapping Imagelist. Here's my code.. Thanks in Advance!

from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.core.window import Window

Window.size = (330, 500)


kv = '''
<MyTile@SmartTileWithLabel>
    size_hint_y: None
    height: "240dp"

BoxLayout:
    orientation: "vertical"
    md_bg_color: (240/255, 240/255, 240/255, 1)

    MDToolbar:
        id: success_screen_toolbar
        title: "Project"
        right_action_items: [["progress-check", lambda x: x]]


    ScrollView:

        size_hint_y: None
        size: "280dp", "360dp"
        pos_hint: {"center_x": .5, "center_y": .6}
        height: root.height - success_screen_toolbar.height - dp(90)
        y: root.height - success_screen_toolbar.height - dp(50)
        elevation: 8


        MDGridLayout:
            cols: 1
            adaptive_height: True
            padding: dp(4), dp(4)
            spacing: dp(4)

            MyTile:
                source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
                text: "[size=26]Cat 1[/size]\\n[size=14]cat-1.jpg[/size]"

            MyTile:
                source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
                text: "[size=26]Cat 2[/size]\\n[size=14]cat-2.jpg[/size]"
                tile_text_color: app.theme_cls.accent_color

            MyTile:
                source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
                text: "[size=26][color=#ffffff]Cat 3[/color][/size]\\n[size=14]cat-3.jpg[/size]"
                tile_text_color: app.theme_cls.accent_color


    MDBottomAppBar:
        MDToolbar:
            id: success_screen_bottomappbar
            icon: "magnify"
            on_action_button: x 
            type: 'bottom'
            mode: 'center'
            elevation: '8dp'
            left_action_items: [["calendar-text", lambda x: x], ["account-group", lambda x: x]]
            right_action_items: [["magnify", lambda x: x], ["menu", lambda x: x]]

'''

class Main(MDApp):
    def build(self):
        return Builder.load_string(kv)


Main().run()

Solution

  • Use the following please, I have changed a few things and a few main widgets in your code because they added additional space that was not being used and that caused the white space in the body of the app, so here is the code by jbsidis:

    from kivymd.app import MDApp
    from kivy.lang.builder import Builder
    from kivy.core.window import Window
    from kivy.uix.boxlayout import BoxLayout
    from kivy.uix.floatlayout import FloatLayout
    
    Window.size = (330, 500)
    
    
    kv = '''
    #:import MDTextField kivymd.uix.textfield.MDTextField
    <MyTile@SmartTileWithLabel>
        size_hint_y: None
        height: "240dp"
    
    <S>:
        MDTextFieldRound:
            pos_hint: {"center_x": .5, "center_y": .95}
            normal_color : [1,1,1,.1]
            color_active : [1,1,1,1]
            size_hint: .8, .07
            hint_text : 'Search a product...'
            icon_left : 'magnify'
    
    Screen:
        FloatLayout:
            BoxLayout:
                id: m5
                pos_hint: {"center_x": .5, "center_y": .371} #this will change if you change this Window.size = (330, 500)
                orientation: "vertical"
    
                ScrollView:
                    MDGridLayout:
                        cols: 1
                        adaptive_height: True
                        padding: dp(4), dp(4)
                        spacing: dp(4)
    
                        MyTile:
                            source: "Photos/pro.jpg"
                            text: "[size=26]jbsidis[/size]\\n[size=14]cat-1.jpg[/size]"
    
                        MyTile:
                            source: "Photos/pro.jpg"
                            text: "[size=26]jbsidis[/size]\\n[size=14]cat-2.jpg[/size]"
                            tile_text_color: app.theme_cls.accent_color
    
                        MyTile:
                            source: "Photos/pro.jpg"
                            text: "[size=26][color=#ffffff]jbsidis[/color][/size]\\n[size=14]cat-3.jpg[/size]"
                            tile_text_color: app.theme_cls.accent_color
    
    
                        MyTile:
                            source: "a11.png"
                            text: ""
                            tile_text_color: [0,0,0,0]
                            FloatLayout:
                                AnchorLayout:
                                    pos_hint: {"center_x": .5, "center_y": .9}
                                    MDTextButton:
                                        halign: "center"
                                        text: "\\n\\n\\n\\n\\n\\n\\nLoading more...\\n\\n"
                                    MDSpinner:
                                        size_hint: .1,.1
    
        MDToolbar:
            id: success_screen_toolbar
            title: "Project"
            pos_hint: {"top": 1}
            right_action_items: [["progress-check", lambda: print(6)]]
    
    
        MDBottomAppBar:
            MDToolbar:
                id: success_screen_bottomappbar
                icon: "magnify"
                on_action_button: root.add_widget(app.sbar())
                type: 'bottom'
                mode: 'center'
                #elevation: '8dp'
                left_action_items: [["calendar-text", lambda: print(6)], ["account-group", lambda: print(6)]]
                right_action_items: [["magnify", lambda: print(6)], ["menu", lambda: print(6)]]
    
    '''
    
    class blanks1(BoxLayout):
        pass
    class S(FloatLayout):
        pass
    
    
    class Main(MDApp):
        def build(self):
            return Builder.load_string(kv)
        def sbar(self):
            self.root.ids.success_screen_toolbar.md_bg_color=[1,1,1,1]
            return S()
    
    
    Main().run()
    

    I also added the function to add the search bar on top when we press the magnified glass icon at the bottom bar, I added an empty image at the bottom of the pictures so you can show your app is loading more results, hope this is helpful for you and everybody, greetings from El Salvador, picture (something else, the a11.png image is a blank transparent png image, the last should be an empty image to extend the scroll area otherwise the bottom bar will hide it, this is something that most operating systems implement but we cannot know because we don't see the source code, watch my youtube channel: https://www.youtube.com/channel/UCIMmPyY7XjWHk1AHlR_UdWQ ):

    enter image description here