Kivy: Buttons in GridLayout have gap

Question

Inside of GridLayout, odd numbered Button children do not appear.

I've tried several configurations of both Button and GridLayout size, size_hint, height, etc, and cant seem to fix this. Removing the Button class from the children fixes this, but I'd like the functionality of a button widget.

main.py:

from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.gridlayout import GridLayout
from kivy.properties import NumericProperty, StringProperty, ListProperty
from kivy.uix.behaviors.focus import FocusBehavior
from kivy.uix.button import Button


class Tube(Button, RelativeLayout, FocusBehavior):
    pass


class TubeMapView(GridLayout, FocusBehavior):
    orderNumber = NumericProperty()
    customerName = StringProperty("")
    tubeList = ListProperty([])
    bundleList = ListProperty([])

    def add_tube(self):
        self.tubeList.append(Tube())
        self.add_widget(self.tubeList[-1])

    def _on_focusable(self, instance, value):
        self.add_tube()

    def keyboard_on_key_down(self, window, keycode, text, modifiers):
        print(keycode)
        if keycode[1] is 'enter':
            self.add_tube()




class LengthView(GridLayout):
    pass


class AppView(GridLayout):
    pass


class TubeMapApp(App):
    pass


if __name__ == '__main__':
    TubeMapApp().run()

tubemap.kv:

<Tube>:
    size_hint_y: None
    height: dp(60)
    canvas.before:
        Color:
            rgba: (0,1,0,1)
        Rectangle:
            size: self.size

<LengthView>:
    size_hint_x: 1
    size_hint_y: 1

    canvas.before:
        Color:
            rgba: (0,0,1,1)
        Rectangle:
            size: self.size


<TubeMapView>:
    cols: 1
    rows: None
    size_hint_max_x:
    size_hint_y: None
    height: self.minimum_height
    canvas.before:
        Color:
            rgba: (0,1,0,1)
        Rectangle:
            pos: self.pos
            size: self.size


AppView:
    cols: 2
    rows: None
    RelativeLayout:
        size_hint_x: 0.75
        ScrollView:
            size: self.size
            TubeMapView:
                focus: True
                Tube:
                Tube:
                Tube:
    RelativeLayout:
        size_hint_x: 0.25
        ScrollView:
            LengthView:

I would expect each one to render, but instead only every other Button renders, starting with the first one:

Answer 1

You can inherit from Button, RelativeLayout and FocusBehavior, and create your own style.

Snippets - py file

class Tube(Button, RelativeLayout, FocusBehavior):
    pass

Snippets - kv fie

<-Tube>:
    text: ''
    focus: False

    size_hint_y: None
    height: dp(60)

    canvas.before:
        Color:
            rgba: (0,1,0,1)
            # rgba: (1,0,1,0.5) if self.focus else (0,1,0,1)
        Rectangle:
            size: self.size

    state_image: self.background_normal if self.state == 'normal' else self.background_down
    disabled_image: self.background_disabled_normal if self.state == 'normal' else self.background_disabled_down

    canvas:
        Color:
            rgba: (1,0,1,1) if self.focus else self.background_color
        BorderImage:
            border: self.border
            pos: self.pos
            size: self.size
            source: self.disabled_image if self.disabled else self.state_image
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            texture: self.texture
            size: self.texture_size
            pos: int(self.center_x - self.texture_size[0] / 2.), int(self.center_y - self.texture_size[1] / 2.)

Output

Example

The following kv file is a mock-up.

poc.kv

<-Tube>:
    text: ''
    focus: False
    size_hint_y: None
    height: dp(60)
    canvas.before:
        Color:
            rgba: (0,1,0,1)
        Rectangle:
            size: self.size

    state_image: self.background_normal if self.state == 'normal' else self.background_down
    disabled_image: self.background_disabled_normal if self.state == 'normal' else self.background_disabled_down

    canvas:
        Color:
            rgba: (1,0,1,1) if self.focus else self.background_color
        BorderImage:
            border: self.border
            pos: self.pos
            size: self.size
            source: self.disabled_image if self.disabled else self.state_image
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            texture: self.texture
            size: self.texture_size
            pos: int(self.center_x - self.texture_size[0] / 2.), int(self.center_y - self.texture_size[1] / 2.)

<LengthView>:
    size_hint_x: 1
    size_hint_y: 1

    canvas.before:
        Color:
            rgba: (0,0,1,1)
        Rectangle:
            size: self.size


<TubeMapView>:
    cols: 1
    rows: None
    size_hint_y: None
    height: self.minimum_height
    canvas.before:
        Color:
            rgba: (0,1,0,1)
        Rectangle:
            pos: self.pos
            size: self.size


AppView:
    cols: 2
    rows: None
    RelativeLayout:
        size_hint_x: 0.75
        ScrollView:
            size: self.size
            TubeMapView:
                Tube:
                    focus: True
                    text: 'tube 1'
                Tube:
                    text: 'tube 2'
                Tube:
                    text: 'tube 3'

    RelativeLayout:
        size_hint_x: 0.25
        ScrollView:
            LengthView:

Answer 2

If you want your Tube to be a RelativeLayout that behaves like a Button, change the declaration of your Tube class to:

class Tube(ButtonBehavior, FocusBehavior, RelativeLayout):
    pass

Note that the documentation says Behavior class must precede the Widget class in inheritance.

This change does what I think you want.