Blank White space overlapping KivyMD ImageList from MDToolbar

Question

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

Here's what it looks like:

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()

score 1 · Accepted Answer · 2021-08-19T19:46:42.620

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 ):

Thank you so much @jbsidis, from your code alone I can see you actually took your time. Thanks agan.. — Edwin, Aug 19 '21 at 22:27

Blank White space overlapping KivyMD ImageList from MDToolbar

1 Answers1