mainview.kv

#:set item_view_width 205
#:set tool_bar_height 65
#:set quantity_bound 0, 99  # limit the maximum and minimum quantity of purchase

<MainLabel@Label>:
    color: 0, 0, 0, 1
    font_size: "18dp"
    size: self.texture_size

<MainButton>:
    background_normal: "res/images/button_normal.png"
    background_down: "res/images/button_down.png"

<ToolBar>:
    spacing: 12
    size_hint: 1, None
    height: tool_bar_height
    pos_hint: {"top": 1}

    canvas.before:
        Color:
            rgba: .6, .6, .9, 1
        Rectangle:
            pos: self.pos
            size: self.size
        Color:
            rgba: .45, .45, .8, 1
        Line:
            points: 0, self.y + 2, self.width, self.y + 2
            width: 2

<ToolBarButton>:
    name: self.__class__.__name__.replace("Button", '')
    background_normal: "res/images/" + self.name + "_btn_normal.png"
    background_down: "res/images/" + self.name + "_btn_down.png"
    size_hint: None, None
    size: 52, 52
    pos_hint: {"center_y": .5}
    text_size: self.size
    halign: "center"
    valign: "bottom"
    color: 0, 0, 0, 1

<CartButton@ToolBarButton>

<WheelButton@ToolBarButton>

<DropDownButton>:
    size_hint_y: None
    height: 44

<SearchInput@TextInput>:
    canvas.before:
        Color:
            rgba: 0, 0, 0, 0.6
        Line:
            rectangle: self.x, self.y, self.size[0], self.size[1]
            width: 2

    write_tab: False  # disable tab allowing focus behaviour
    multiline: False
    background_color: 0, 0, 0, 0.1
    cursor_color: 0, 0, 0, 1
    font_size: "25dp"
    spacing: 10
    # vertically align text at center
    padding_y: [self.height / 2.0 - (self.line_height / 2.0) * len(self._lines), 0]

# layout for each item display
<ItemView>:

    orientation: "vertical"
    spacing: 8
    size_hint: None, None
    size: item_view_width, 1.6 * item_view_width

    canvas.before:
        Color:
            rgba: 0, 0, 0, 0.1
        Rectangle:
            pos: self.pos
            size: self.size

    quantity: 0

    Image:
        source: "res/item_img/" + self.parent.img
        size_hint: None, None
        width: self.parent.width
        height: self.width
    MainLabel:
        text: self.parent.name
    MainLabel:
        text: "$ {:.2f}".format(self.parent.price)
    BoxLayout:
        orientation: "horizontal"

        MainButton:
            id: _minus_btn
            text: "-"
            font_size: "50dp"
            on_press: root.item_action(-1)
        MainLabel:
            text:  str(root.quantity)
        MainButton:
            id: _plus_btn
            text: "+"
            font_size: "30dp"
            on_press: root.item_action(1)

<MainScrollView>:
    do_scroll_x: False
    do_scroll_y: True
    bar_color: .3, .3, .7, 1
    bar_inactive_color: .3, .3, .7, .5
    bar_width: 5

<MainScreen@Screen>:
    name: "main_screen"
    item_layout: _item_layout

    BoxLayout:
        orientation: "vertical"

        # top toolbar
        ToolBar:

            Image:
                source: "res/images/icon.ico"
                size_hint: None, None
                size: 48, 48
                pos_hint: {"center_y": .5}

            MainLabel:
                markup: True
                text: "Welcome to [color=ffc61a][b][size=24]Energy Max![/color][/b][/size]"
                pos_hint: {"center_y": .5}

            ProfileButton:
                root: root

            CartButton:
                on_release: root.screen_manager.current = "cart_screen"

            WheelButton:
                on_release: root.screen_manager.current = "wheel_screen"

        ToolBar:

            Image:
                source: "res/images/search_icon.png"
                size_hint: None, None
                size: 52, 52
                pos_hint: {"center_y": .5}

            SearchInput:
                id: _search_input
                size_hint_y: None
                height: self.parent.height - 8
                pos_hint: {"center_y": .5}
                on_text: _item_layout.filter(self.text)

        # scroll view for potentially overwhelming amount of items
        MainScrollView:

            pos_hint: {"center_x": .5}

            # all items are displayed in this layout
            ItemLayout:
                id: _item_layout

                padding: 45
                spacing: 45
                cols: int(root.width / (item_view_width + self.padding[0]))
                size_hint_y: None
                height: self.minimum_height