Develop Reference

Kivy: Having trouble getting two Recycleviews to show up in my Kivy application

I'm working on a kivy application. I create two recycleViews, both pull data from a database table and I want the data to be displayed under the two recycleviews.
I've created the following .kv file:
#:kivy 2.1.0
<SelectableUserBoxLayout>:
# Draw a background to indicate selection
font_size: '26sp'
canvas.before:
Color:
rgba: (.0, 0.9, .1, .3) if self.selected else (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
userid: ""
uniqueid: ""
displayname: ""
status: ""
permissionid: ""
GridLayout:
cols:5
Label:
text: root.userid
Label:
text: root.uniqueid
Label:
text: root.displayname
Label:
text: root.status
Label:
text: root.permissionid
<SelectableUserBoxLayout>:
# Draw a background to indicate selection
font_size: '26sp'
canvas.before:
Color:
rgba: (.0, 0.9, .1, .3) if self.selected else (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
resid: ""
startTime: ""
endTime: ""
userId: ""
lockerId: ""
GridLayout:
cols:5
Label:
text: root.resid
Label:
text: root.startTime
Label:
text: root.endTime
Label:
text: root.userId
Label:
text: root.lockerId
<UserListView>:
id: userlist
viewclass: 'SelectableUserBoxLayout'
SelectableUserRecycleBoxLayout:
id: controller
default_size: None, dp(56)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
multiselect: True
touch_multiselect: True
font_size: '26sp'
<ReservationListView>:
#id: reservationlist
viewclass: 'SelectableReservationBoxLayout'
SelectableReservationRecycleBoxLayout:
id: rescontroller
default_size: None, dp(56)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
multiselect: True
touch_multiselect: True
font_size: '26sp'
<ManagementScreen>:
name: 'managementscreen'
#id: management_screen
BoxLayout:
orientation: 'vertical'
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: './assets/background.png'
Label:
font_size: '26sp'
size_hint_y: 0.1
text: 'Management Screen'
GridLayout:
cols: 3
size_hint_y: 0.9
spacing: 10
padding: 10
GridLayout:
rows: 2
GridLayout:
size_hint_y: .15
cols:5
canvas.before:
Color:
rgba: (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'UserID'
Label:
text: 'UniqueIdentifier'
Label:
text: 'DisplayName'
Label:
text: 'Status'
Label:
text: 'PermissionID'
UserListView:
id: recview
key_selection: 'selectable'
size_hint_x: .4
GridLayout:
rows:2
GridLayout:
size_hint_y: .15
cols:5
canvas.before:
Color:
rgba: (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'ReservationID'
Label:
text: 'StartTime'
Label:
text: 'EndTime'
Label:
text: 'UserID'
Label:
text: 'LockerID'
ReservationListView:
id: resrecview
key_selection: 'selectable'
size_hint_x: .4
GridLayout:
size_hint_x: .2
rows: 4
spacing: 0
padding: 0
Button:
text: 'Verwijder'
font_size: '26sp'
on_release: recview.delete_user()
Button:
text: 'Laad CSV'
font_size: '26sp'
Button:
text: 'Reserveringen'
font_size: '26sp'
These are the relevant Recycleviews:
class UserListView(RecycleView):
def __init__(self, **kwargs):
super(UserListView, self).__init__(**kwargs)
self.data = [{"userid": str(x[0]),"uniqueid": x[1], "displayname": str(x[2]), "status": str(x[3]), "permissionid": str(x[4]), "selected":False} for x in database.get_all_users()]
class ReservationListView(RecycleView):
def __init__(self, **kwargs):
super(ReservationListView, self).__init__(**kwargs)
self.data = [{"resid": str(x[0]),"startTime": x[1], "endTime": str(x[2]), "userId": str(x[3]), "lockerId": str(x[4]), "selected":False} for x in database.get_all_reservations()]
while the colums show correctly, the data under the colums aren't. To illustrate (mind that my application runs on a raspberry pi with a custom screen):
As you can see, my columns load correctly, and the first recycleview loads userdata from the database. The data, however isn't lined up properly. My second recycleview loads reservation data from the database. When I tap under the column, my screen shows data being clicked, but isn't displayed correctly in the recycleview.
My questions:
How can I get the data to line up correctly to my colums?
How can I get the data under my second column to be displayed correctly?
Edit: Seems like I've used SelectableUserBoxLayout twice. That explains a lot! I've rewritten my .kv file and it now works the way I want.
my new .kv file:
#:kivy 2.1.0
<SelectableUserBoxLayout>:
# Draw a background to indicate selection
font_size: '26sp'
canvas.before:
Color:
rgba: (.0, 0.9, .1, .3) if self.selected else (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
userid: ""
uniqueid: ""
status: ""
permissionid: ""
GridLayout:
cols:4
Label:
text: root.userid
size_hint_x: .1
Label:
text: root.uniqueid
size_hint_x: .6
Label:
text: root.status
size_hint_x: .1
Label:
text: root.permissionid
size_hint_x: .2
<SelectableReservationBoxLayout>:
# Draw a background to indicate selection
font_size: '26sp'
canvas.before:
Color:
rgba: (.0, 0.9, .1, .3) if self.selected else (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
resid: ""
startTime: ""
endTime: ""
userId: ""
lockerId: ""
GridLayout:
cols:5
Label:
text: root.resid
size_hint_x: .2
Label:
text: root.startTime
size_hint_x: .3
Label:
text: root.endTime
size_hint_x: .3
Label:
text: root.userId
size_hint_x: .1
Label:
text: root.lockerId
size_hint_x: .1
<ReservationListView>:
viewclass: 'SelectableReservationBoxLayout'
SelectableReservationRecycleBoxLayout:
id: rescontroller
default_size: None, dp(56)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
multiselect: True
touch_multiselect: True
font_size: '26sp'
<UserListView>:
viewclass: 'SelectableUserBoxLayout'
SelectableUserRecycleBoxLayout:
id: controller
default_size: None, dp(56)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
multiselect: True
touch_multiselect: True
font_size: '26sp'
<ManagementScreen>:
name: 'managementscreen'
id: management_screen
BoxLayout:
orientation: 'vertical'
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: './assets/background.png'
Label:
font_size: '26sp'
size_hint_y: 0.1
text: 'Management Screen'
GridLayout:
cols: 3
spacing: 10
padding: 10
GridLayout:
cols: 1
size_hint_x: .45
canvas.before:
Color:
rgba: (.0, 0.9, .1, .3)
Rectangle:
pos: self.pos
size: self.size
GridLayout:
size_hint_y: .15
cols: 4
canvas.before:
Color:
rgba: (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'UserID'
size_hint_x: .1
Label:
text: 'UniqueIdentifier'
size_hint_x: .6
Label:
text: 'Status'
size_hint_x: .1
Label:
text: 'PermissionID'
size_hint_x: .2
UserListView:
id: userview
size_hint_y: .85
GridLayout:
cols: 1
size_hint_x: .45
canvas.before:
Color:
rgba: (.0, 0.9, .1, .3)
Rectangle:
pos: self.pos
size: self.size
GridLayout:
size_hint_y: .15
cols: 5
canvas.before:
Color:
rgba: (0, 0, 0, 1)
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'ReservationID'
size_hint_x: .2
Label:
text: 'StartTime'
size_hint_x: .3
Label:
text: 'EndTime'
size_hint_x: .3
Label:
text: 'UserID'
size_hint_x: .1
Label:
text: 'LockerID'
size_hint_x: .1
ReservationListView:
id: resview
size_hint_y: .85
GridLayout:
rows: 3
size_hint_x: .1
canvas.before:
Color:
rgba: (.0, 0.9, .1, .3)
Rectangle:
pos: self.pos
size: self.size
Button:
text: 'Verwijder'
font_size: '26sp'
on_release: userview.delete_user()
Button:
text: 'Laad CSV'
font_size: '26sp'
Button:
text: 'Reserveringen'
font_size: '26sp'
This question can be closed.

KivyMD Text Field doesn't work, recieve attribute error when pressing clear button and MD Cards arent aligned properly

I completed my code for main window which is the login page and I'm writing my code for the second page. Then, I tried to use the text field on my login screen and I can't type in it. However, before making my second window, the text field worked as expected and I can type in it. What could cause this issue?
Furthermore, I recieve an error (AttributeError: 'super' object has no attribute 'getattr'
) when I tried to press the clear button in main window.
Also, if you tried to run this code and see the second window, you will notice 3 MD cards not aligned properly if you don't expand the window to full size. if you have any idea how to fix it, please let me know.
SUMMARY OF WHAT I'M TRYING TO ACHIEVE HERE:
Figure out what why I can't use the textfield in main window
Fix the error when press the clear button
Align MD Cards properly
.py file
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.uix.screenmanager import ScreenManager, Screen
class MainWindow(Screen):
pass
class SecondWindow(Screen):
pass
class WindowManager(ScreenManager):
pass
class BaseApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Light"
self.theme_cls.primary_palette = "Green"
return Builder.load_file("base.kv")
def clear(self):
self.root.ids.user.text = ""
self.root.ids.passw.text = ""
if __name__ == "__main__":
BaseApp().run()```
.kv file
# Filename: base.kv
#:kivy 2.1.0
#:include main.py
WindowManager:
MainWindow:
SecondWindow:
<MainWindow>:
name: "main"
Screen:
MDCard:
size_hint: None, None
size: 400, 500
pos_hint: {"center_x": 0.5, "center_y": 0.5}
elevation: 10
padding: 25
spacing: 25
orientation: "vertical"
MDLabel:
id: login_label
text: "WELCOME TO JAMES MADISON/n HIGH SCHOOL STUDENTS APP"
font_size: 22
font_name: "Raleway-Regular"
halign: "center"
size_hint_y: None
height: self.texture_size[1]
padding_y: 15
MDBoxLayout:
Image:
source: "jmhs.png"
size_hint_x: 1.15
halign: "center"
size_hint_y: 1.15
height: self.texture_size[1]
padding_y: 10
MDTextFieldRound:
id: user
hint_text: "Username"
icon_right: "account"
size_hint_x: None
width: 200
font_size: 18
font_name: "Roboto-Regular"
pos_hint: {"center_x": 0.5}
MDTextFieldRound:
id: passw
hint_text: "Password"
icon_right: "eye-off"
size_hint_x: None
width: 200
font_size: 18
font_name: "Roboto-Regular"
pos_hint: {"center_x": 0.5}
password: True
MDRoundFlatButton:
text: "LOG IN"
font_size: 12
font_name: "Raleway-Regular"
pos_hint: {"center_x": 0.5}
on_press:
app.root.current = "second"
root.manager.transition.direction = "left"
MDRoundFlatButton:
text: "CLEAR"
font_size: 12
font_name: "Raleway-Regular"
pos_hint: {"center_x": 0.5}
on_press: app.clear()
<SecondWindow>:
name: "second"
MDBoxLayout:
orientation: "horizontal"
MDBoxLayout:
size_hint: .225, 1
canvas.before:
Color:
rgba: 0, 0, 0, 0
Rectangle:
pos: self.pos
size: self.size
MDBoxLayout:
orientation: "vertical"
spacing: "10dp"
size_hint: 1, 1
canvas.before:
Color:
rgba: 227/255, 255/255, 226/255, 0.8
Rectangle:
pos: self.pos
size: self.size
MDBoxLayout:
spacing: "10dp"
size_hint: 1, .1
MDBoxLayout:
spacing: "10dp"
size_hint: 1, .9
canvas.before:
Color:
rgba: 227/255, 255/255, 226/255, 0.8
Rectangle:
pos: self.pos
size: self.size
MDGridLayout:
cols: 3
padding: 18
spacing: "20dp"
MDCard:
padding: 16
elevation: 0
border_radius: 20
radius: [15]
size_hint: None, None
size: "370dp", "140dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDCard:
padding: 16
elevation: 0
border_radius: 20
radius: [15]
size_hint: None, None
size: "370dp", "140dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDCard:
padding: 16
elevation: 0
border_radius: 20
radius: [15]
size_hint: None, None
size: "200dp", "140dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDBoxLayout:
size_hint: .29, 1
canvas.before:
Color:
rgba: 0, 0, 0, 0
Rectangle:
pos: self.pos
size: self.size

Create a recycle view(Gridlayout) inside a Boxlayout kivy

I need all the elements of my FirsWindow, put them in a recycleview. I'm thinking to do it from RecycleGridLayout instead of GridLayout, but I don't how to really apply it in the code. It's necesary that the GridLayout or RecycleGridLayout have cols:4, I think it's not necessary upload my py.file but I'm not sure. please I need help on this. thanks in advance.
kv.file
<FirstWindow>:
name: "Catalogue"
BoxLayout:
id: Boxmain
orientation: "vertical"
#size: root.width, root.height
#size_hint: 1, None
#height: 300
#padding: 50
spacing: 50
size: root.height, root.width
GridLayout:
cols: 4
padding: 4
Label:
text: "Items"
#font_size: 25
Label:
text: "Number"
Label:
text: "Price"
Label:
text: "Add to Cart"
Label:
text: "Tornillos"
text_size: self.size
halign: 'center'
valign: 'bottom'
Image:
id: image_tornillos
allow_stretch: True
keep_ratio: True
size_hint: 0.2,0.2
width: 60
height: 80
#pos_hint: {'center_x':1, 'center_y':1}
source: "images/tornillo.png"
center_x: self.parent.center_x
center_y: self.parent.center_y+10
TextInput:
id: input_tornillo
text: ""
halign: "right"
font_size: 18
multiline: True
#size_hint: (1, .15)
Label:
text: "0.0"
Button:
id: shopping1
#text: "Hello"
#font_size: 32
allow_stretch: True
keep_ratio: True
size_hint: .25,.30
pos_hint: {'center_x':0.5, 'center_y':0.5}
background_color: 0,0,0,0
#on_press: root.press_on()
#on_release: root.press_off()
on_press: root.ids.Shoppingcart1.source= root.var2
on_release: root.ids.Shoppingcart1.source= root.var1
Image:
id: Shoppingcart1
allow_stretch: True
keep_ratio: True
size_hint: 0.5,0.5
width: 60
height: 60
pos_hint: {'center_x':0.5, 'center_y':0.5}
source: root.var1
center_x: self.parent.center_x
center_y: self.parent.center_y
#------------------------
Button:
text:"lala"
Button:
text:"lal2"
Button:
text:"lale"
Button:
text:"lal5"
Button:
text:"lala"
Button:
text:"lal54"
Button:
text:"lala"
#------------------------------------------------------------

Gridlayout height based on Label height in recycleview not aligned

I have managed to get the size of a box layout to change based on the corresponding Label height, however, it doesn't line up perfectly and I cannot figure out why.
I have looked at adding offsets but have had no luck since it ended up making the issue worse
Thank you for any help
MainInterface:
<MainInterface#BoxLayout>:
orientation: "vertical"
Label:
#font_name: "Nunito-Black.ttf"
text: "T R U T H"
size_hint: 1, 0.1
GridLayout:
size_hint: 1, 0.12
cols: 4
Button:
text: "Menu1"
Button:
text: "Menu2"
Button:
text: "Menu3"
Button:
text: "Menu4"
PageLayout:
border: "20dp"
swipe_threshold: 0.2
RecycleView:
viewclass: 'PostGrid'
scroll_y: 1
id: rv
data: app.posts
RecycleBoxLayout:
id: box
default_size: None, None
default_size_hint: 1, None
size_hint_y: None
padding: ["10dp", "16dp"]
spacing: "8dp"
height: self.minimum_height
orientation: 'vertical'
key_size: '_size'
BoxLayout:
orientation: "vertical"
Button:
text: "peni"
Button:
text: "tag # will J"
Button:
text: "Input"
<PostGrid#BoxLayout>:
message_id: -1
orientation: "horizontal"
text: ''
spacing: "10dp"
#size_hint: self.width, None
_size: 0, 74
size: 0, 74
text_size: None, None
BoxLayout:
orientation: "vertical"
spacing: "10dp"
size_hint: .1, 1
size: self.size
Button:
text: "UP"
font_size: "5dp"
size_hint: 1, 0.2
Button:
text: "DOWN"
font_size: "5dp"
size_hint: 1, 0.2
Label:
text: "test"
font_size: "5dp"
size_hint: 1, 0.6
Label:
text: root.text
padding: 5, 5
size_hint: .9, 1
#size: self.texture_size
height: self.texture_size[1]
text_size: self.width, None
color: 0,0,0,1
#text_size: self.width, None
#size_hint: None, 1
#size: self.texture_size
#font_name: "Nunito-Bold.ttf"
#font_size: "12dp"
multiline: True
#size: 1, root.min_height
on_texture_size:
app.update_message_size(
root.message_id,
self.texture_size,
root.width)
pos: self.pos
canvas.before:
Color:
rgba: (0.8, 0.8, 0.8, 1)
RoundedRectangle:
size: self.texture_size
radius: [5, 5, 5, 5]
pos: self.x, self.y
canvas:
Color:
rgba:0,0.9,0.9,1
Line:
width:0.8
rounded_rectangle:(self.x,self.y,self.width,self.height, 5)
from kivy.app import App
from kivy.lang import Builder
from kivy.clock import Clock
from kivy.properties import ListProperty
from kivy.animation import Animation
from kivy.metrics import dp
class TruthApp(App):
posts = ListProperty([{'message_id':0, 'text':"testskjhfjksdhfkjshfjshfjkhskjdfhskjdhfkjshfdkjhsjkdfhskjhdfkjshdfjkhzxczxczxczxcxzczxcxsjkdfhjksdhfkjshkjdfhksjdhfjkshdfjkhsdkjhfkjshdfjkshkjfhskjhfkjshfjkshdkjfhskjhfjshfkjshdfjkshdjkfhskjhfkjshfjksdhjfhsjkdhfjkhsdkjfhskjhfjk\ngdgdgd\ndgdgdg\ndgdgdg\ndggdgd",'_size':[0,0] }, {'message_id':1, 'text':"testskjhfjksdhfkjshfjshfjkhskjdfhskjdhfkjshfdkjhsjkdfhskjhjfhskjhfjk,'_size':[0,0]"}])
def update_message_size(self, message_id, texture_size, max_width):
#print(self.posts)
#print("Here")
self.posts[message_id] = {**self.posts[message_id], '_size':[0, texture_size[1]]}
if __name__ == '__main__':
TruthApp().run()
^ Image showing how the code above runs

The problem is in the viewclass of RecycleView (i.e. PostGrid). You set its heightas such it could not accomodate its children which is supposed to be the minimum height that will place all its children.
Now that's exactly the attr. minimum_height does. With this being applied you also don't need default_size: None, None (especially the height attr.)
With this and other modifications your .kv file should now look like,
MainInterface:
<MainInterface#BoxLayout>:
orientation: "vertical"
Label:
#font_name: "Nunito-Black.ttf"
text: "T R U T H"
size_hint: 1, 0.1
GridLayout:
size_hint: 1, 0.12
cols: 4
Button:
text: "Menu1"
Button:
text: "Menu2"
Button:
text: "Menu3"
Button:
text: "Menu4"
PageLayout:
border: "20dp"
swipe_threshold: 0.2
RecycleView:
viewclass: 'PostGrid'
scroll_y: 1
id: rv
data: app.posts
RecycleBoxLayout:
id: box
default_size_hint: 1, None
size_hint_y: None
padding: ["10dp", "16dp"]
spacing: "8dp"
height: self.minimum_height
orientation: 'vertical'
key_size: '_size'
BoxLayout:
orientation: "vertical"
Button:
text: "peni"
Button:
text: "tag # will J"
Button:
text: "Input"
<PostGrid#BoxLayout>:
message_id: -1
orientation: "horizontal"
text: ''
spacing: "10dp"
size_hint_y: None
#_size: 0, 74
height: self.minimum_height
text_size: None, None
BoxLayout:
orientation: "vertical"
spacing: "10dp"
size_hint: .1, 1
Button:
text: "UP"
font_size: "5dp"
size_hint: 1, 0.2
Button:
text: "DOWN"
font_size: "5dp"
size_hint: 1, 0.2
Label:
text: "test"
font_size: "5dp"
size_hint: 1, 0.6
Label:
text: root.text
padding: 5, 5
#size_hint: .9, 1
#size: self.texture_size
size_hint_y: None
height: self.texture_size[1]
text_size: self.width, None
color: 0,0,0,1
#text_size: self.width, None
#size_hint: None, 1
#size: self.texture_size
#font_name: "Nunito-Bold.ttf"
#font_size: "12dp"
multiline: True
#size: 1, root.min_height
on_texture_size:
app.update_message_size(
root.message_id,
self.texture_size,
root.width)
pos: self.pos
canvas.before:
Color:
rgba: (0.8, 0.8, 0.8, 1)
RoundedRectangle:
size: self.texture_size
radius: [5, 5, 5, 5]
pos: self.x, self.y
canvas:
Color:
rgba:0,0.9,0.9,1
Line:
width:0.8
rounded_rectangle:(self.x,self.y,self.width,self.height, 5)

How to push kivy widget to the top of the screen

Am having a hard time trying to align my widgets to the top of window in kivy, here is the pictorial represenation. My expectation is that adding an empty widget at the bottom would push the widgets to the top of the screen but it only gets to the middle of the screen. Any guidance will be helpful.
Layout
.kv file
#:import utils kivy.utils
#: import Window kivy.core.window.Window
<FlatButton#ButtonBehavior+Label>:
font_size: 14
<PosWindow>:
id: main_win
orientation: 'vertical'
canvas.before:
Color:
rgb: utils.get_color_from_hex('#ffffff')
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
spacing: 0
orientation: 'vertical'
#THE BEGINNNING OF THE TOP BAR
BoxLayout:
size_hint_y: None
height: 30
Label:
text: 'HEADER POSITION'
size_hint_x: .6
bold: True
color: (1,1,1,1)
canvas.before:
Color:
rgb: utils.get_color_from_hex('#5B2437')
Rectangle:
size: self.size
pos: self.pos
Label:
text: 'The Name'
size_hint_x: .4
height: 30
bold: True
color: (1,1,1,1)
canvas.before:
Color:
rgb: utils.get_color_from_hex('#5B2437')
Rectangle:
size: self.size
pos: self.pos
# THE END OF THE TOP BAR
#THE BEGINNING OF THE SECOND WAVE FULL
BoxLayout:
id: current
size_hint_y: None
height: 50
canvas.before:
Color:
rgba: (1,1,1, 1)
Rectangle:
size: self.size
pos: self.pos
Button:
text: 'Current Item:'
background_normal: ''
background_color: (.06, .32, .32, 1)
size_hint_x: .4
Button:
id: cur_product
text: 'Default Product'
background_normal: ''
background_color: (.06, .4, .4, 1)
Button:
id: cur_price
text: '0.00'
background_normal: ''
background_color: (.06, .65, .65, 1)
size_hint_x: .2
Widget: #To place everything at the top of the screen
#THE END OF THE SECOND WAVE FULL
#SEARCH FOR A PRODUCT
BoxLayout:
id: current
orientation: 'horizontal'
size_hint_y: None
height: 50
canvas.before:
Color:
rgba: (1,1,1, 1)
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
size_hint_x: .4
id: searchBox
canvas.before:
Color:
rgba: (.06, .75, .35, 1)
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
size_hint_x: .6
id: previewBox
canvas.before:
Color:
rgba: (.06, .35, .85, 1)
Rectangle:
size: self.size
pos: self.pos
Widget:

I found that as a little, I had to remove the first BoxLayout first the empty widgets except for the last boxlayout.
#:import utils kivy.utils
#: import Window kivy.core.window.Window
<FlatButton#ButtonBehavior+Label>:
font_size: 14
:
id: main_win
orientation: 'vertical'
canvas.before:
Color:
rgb: utils.get_color_from_hex('#ffffff')
Rectangle:
size: self.size
pos: self.pos
#THE BEGINNNING OF THE TOP BAR
BoxLayout:
size_hint_y: None
height: 30
Label:
text: 'HEADER POSITION'
size_hint_x: .6
bold: True
color: (1,1,1,1)
canvas.before:
Color:
rgb: utils.get_color_from_hex('#5B2437')
Rectangle:
size: self.size
pos: self.pos
Label:
text: 'The Name'
size_hint_x: .4
height: 30
bold: True
color: (1,1,1,1)
canvas.before:
Color:
rgb: utils.get_color_from_hex('#5B2437')
Rectangle:
size: self.size
pos: self.pos
#THE BEGINNING OF THE SECOND WAVE FULL
BoxLayout:
id: current
size_hint_y: None
height: 50
canvas.before:
Color:
rgba: (1,1,1, 1)
Rectangle:
size: self.size
pos: self.pos
Button:
text: 'Current Item:'
background_normal: ''
background_color: (.06, .32, .32, 1)
size_hint_x: .4
Button:
id: cur_product
text: 'Default Product'
background_normal: ''
background_color: (.06, .4, .4, 1)
Button:
id: cur_price
text: '0.00'
background_normal: ''
background_color: (.06, .65, .65, 1)
size_hint_x: .2
#THE END OF THE SECOND WAVE FULL
#SEARCH FOR A PRODUCT
BoxLayout:
id: current
orientation: 'horizontal'
size_hint_y: None
height: 50
canvas.before:
Color:
rgba: (1,1,1, 1)
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
size_hint_x: .4
id: searchBox
canvas.before:
Color:
rgba: (.06, .75, .35, 1)
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
size_hint_x: .6
id: previewBox
canvas.before:
Color:
rgba: (.06, .35, .85, 1)
Rectangle:
size: self.size
pos: self.pos
Widget: