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