Kivy - Changing Row height of FloatLayout within GridLayout with implemented ScrollView

Question

I'm trying to create a Scrollview with two columns that has 4-5 Icons+Subscripts under them in each "category" separated by a simple title. I have all of the ImageButtons lines up with the subscript of each Image button with a FloatLayout, and all of this is inside of a GridLayout (with one column).

My question is how do I change the Height of the first row (main Title), and rows which include the titles of each category -Secondary smaller font titles of each categroy, (the height of rows which include the Buttons + corresponding subscript are perfect).

As of now, to get my scrollview to work, I have to have a row_default_height value, otherwise all my rows are stacked... And since if all rows are the same height by default, this leaves a lot of empty space taken up by what I want to be a smaller title.

Here's what I've got so far:

'''

:

FloatLayout:
    canvas:
        Color:
            rgb: utils.get_color_from_hex("#69B3F2")
        Rectangle:
            size: self.size
            pos: self.pos

    ScrollView:
        pos_hint: {"top": 1,"right":1}
        size_hint: 1,1


        GridLayout:
            cols: 1
            size_hint_y: None
            height: self.minimum_height
            row_default_height: '100dp'
            spacing: 10,10
            row_force_default: False


            FloatLayout:
                

                Label:

                    
                    font_color:
                        utils.get_color_from_hex("#424FFF")
                    id: general_relativity_label
                    font_size: 25
                    font_name: "Rubik-Bold.ttf"
                    text: "Calculator (by Gleb)"
                    pos_hint: {"top": 0.9, "left": 1}
                    markup: True



            FloatLayout:

                pos_hint: {"top": 0.9,"right":1}
                size_hint: 1,0.225
                

                ImageButton:
                    pos_hint: {"top": 0.8, "right":.85}
                    size_hint: 0.2, 0.7
                    source: "Icons4/014-gravity.png"
                    on_release:
                        app.change_screen("kinematics_screen", direction='right', mode='push')

                ImageButton:
                    pos_hint: {"top": 0.8, "right": 0.35}
                    size_hint: 0.2, 0.7
                    source: "Icons4/019-relativity.png"
                    on_release:
                        app.change_screen("relativity_screen", direction='right', mode='push')

                Label:
                    pos_hint: {"top": 0.1, "right": .85}
                    size_hint: .2,0.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Kinematics"
                    markup: True

                Label:
                    pos_hint: {"top": 0.1,"right": 0.35}
                    size_hint: .2,0.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Relativity"
                    markup: True

            FloatLayout:

                pos_hint: {"top": 0.675, "left":1}
                size_hint: 1,0.225
                #Quantum Tunneling, Energy of H atom

                ImageButton:
                    pos_hint: {"top":0.8,"right":.85}
                    size_hint: .2,.7
                    source: "Icons4/049-atom.png"
                    on_release:
                        app.change_screen("quantum_screen", direction='right', mode='push')

                ImageButton:
                    pos_hint: {"top": 0.8, "right":0.35}
                    size_hint: .2,.7
                    source: "Icons4/046-transverse wave.png"
                    on_release:
                        print("Waves")


                Label:
                    pos_hint: {"top": 0.1,"right":.85}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Quantum"
                    markup: True

                Label:
                    pos_hint: {"top": 0.1,"right":.35}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Waves"
                    markup: True

            FloatLayout:

                pos_hint: {"top": 0.450,"left":1}
                size_hint: 1,.225
               

                ImageButton:
                    pos_hint: {"top": 0.8,"right":.85}
                    size_hint: .2,.7
                    source: "Icons4/034-orbit.png"
                    on_release:
                        print("Astronomy")

                ImageButton:
                    pos_hint: {"top": 0.8,"right":.35}
                    size_hint: .2,.7
                    source: "Icons4/018-clamp.png"
                    on_release:
                        print("Forces")

                Label:
                    pos_hint: {"top": 0.1,"right":.85}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Astro"

                Label:
                    pos_hint: {"top": 0.1,"right":.35}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Forces"

            FloatLayout:

                pos_hint: {"top": 0.675, "left":1}
                size_hint: 1,0.225
                

                ImageButton:
                    pos_hint: {"top":0.8,"right":.85}
                    size_hint: .2,.7
                    source: "Icons4/049-atom.png"
                    on_release:
                        app.change_screen("quantum_screen", direction='right', mode='push')

                ImageButton:
                    pos_hint: {"top": 0.8, "right":0.35}
                    size_hint: .2,.7
                    source: "Icons4/046-transverse wave.png"
                    on_release:
                        print("Waves")


                Label:
                    pos_hint: {"top": 0.1,"right":.85}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Quantum"
                    markup: True

                Label:
                    pos_hint: {"top": 0.1,"right":.35}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Waves"
                    markup: True

            FloatLayout:
                pos_hint: {"top": 0.450,"left":1}
                size_hint: 1,.225
                

                ImageButton:
                    pos_hint: {"top": 0.8,"right":.85}
                    size_hint: .2,.7
                    source: "Icons4/034-orbit.png"
                    on_release:
                        print("Astronomy")

                ImageButton:
                    pos_hint: {"top": 0.8,"right":.35}
                    size_hint: .2,.7
                    source: "Icons4/018-clamp.png"
                    on_release:
                        print("Forces")

                Label:
                    pos_hint: {"top": 0.1,"right":.85}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Astro"

                Label:
                    pos_hint: {"top": 0.1,"right":.35}
                    size_hint: .2,.15
                    font_color:
                        utils.get_color_from_hex("#425FFF")
                    font_size: 18
                    text: "Forces"

'''

Thanks in advance! p.s -> pretty new to kivy, but I can confidently say I've googled a ton and couldn't come up with a solution..

Answer 1

If you use a series of BoxLayouts instead of one GridLayout, then the rows do not have to be the same height. Here is a modified version of your kv that does that:

#:import utils kivy.utils
#:set ImageButtonHeight 150

<ImageButton>:
    size_hint_y: None
    height: ImageButtonHeight
    
<MyLabel@Label>:
    size_hint_y: None
    height: self.texture_size[1]
    font_color:
        utils.get_color_from_hex("#425FFF")
    font_size: 18
    markup: True

FloatLayout:
    canvas:
        Color:
            rgb: utils.get_color_from_hex("#69B3F2")
        Rectangle:
            size: self.size
            pos: self.pos

    ScrollView:

        BoxLayout:
            orientation: 'vertical'
            size_hint_y: None
            height: self.minimum_height
            spacing: 10,10

            Label:
                font_color:
                    utils.get_color_from_hex("#424FFF")
                id: general_relativity_label
                font_size: 25
                font_name: "Rubik-Bold.ttf"
                text: "Calculator (by Gleb)"
                size_hint_y: None
                height: self.texture_size[1]
                markup: True

            BoxLayout:
                orientation: 'vertical'
                size_hint_y: None
                height: self.minimum_height
                
                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    ImageButton:
                        source: "Icons4/014-gravity.png"
                        on_release:
                            app.change_screen("kinematics_screen", direction='right', mode='push')
    
                    ImageButton:
                        source: "Icons4/019-relativity.png"
                        on_release:
                            app.change_screen("relativity_screen", direction='right', mode='push')
                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    MyLabel:
                        text: "Kinematics"
    
                    MyLabel:
                        text: "Relativity"

            BoxLayout:
                orientation: 'vertical'
                size_hint: 1,None
                height: self.minimum_height
                #Quantum Tunneling, Energy of H atom

                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    ImageButton:
                        source: "Icons4/049-atom.png"
                        on_release:
                            app.change_screen("quantum_screen", direction='right', mode='push')
    
                    ImageButton:
                        source: "Icons4/046-transverse wave.png"
                        on_release:
                            print("Waves")


                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    MyLabel:
                        text: "Quantum"
    
                    MyLabel:
                        text: "Waves"

            BoxLayout:
                orientation: 'vertical'
                size_hint_y: None
                height: self.minimum_height
               
                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    ImageButton:
                        source: "Icons4/034-orbit.png"
                        on_release:
                            print("Astronomy")
    
                    ImageButton:
                        source: "Icons4/018-clamp.png"
                        on_release:
                            print("Forces")

                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    MyLabel:
                        text: "Astro"
    
                    MyLabel:
                        text: "Forces"

            BoxLayout:
                orientation: 'vertical'
                size_hint_y: None
                height: self.minimum_height
                
                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    ImageButton:
                        source: "Icons4/049-atom.png"
                        on_release:
                            app.change_screen("quantum_screen", direction='right', mode='push')
    
                    ImageButton:
                        source: "Icons4/046-transverse wave.png"
                        on_release:
                            print("Waves")

                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    MyLabel:
                        text: "Quantum"
    
                    MyLabel:
                        text: "Waves"

            BoxLayout:
                orientation: 'vertical'
                size_hint_y: None
                height: self.minimum_height
                
                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    ImageButton:
                        source: "Icons4/034-orbit.png"
                        on_release:
                            print("Astronomy")
    
                    ImageButton:
                        source: "Icons4/018-clamp.png"
                        on_release:
                            print("Forces")

                BoxLayout:
                    size_hint_y: None
                    height: self.minimum_height
                    MyLabel:
                        text: "Astro"
    
                    MyLabel:
                        text: "Forces"

When using minimum_height for a BoxLayout, you must make sure that the height of each child is well defined. To do that (as well as simplifying the kv), I created rules for the ImageButton and a MyLabel class that is used in place of most of the Labels in the kv.

The general structure of the above code is like this:

ScrollView:
    BoxLayout:  # this is the top level BoxLayout, each child is a row
        orientation: 'vertical'
        size_hint_y: None
        height: self.minimum_height

        Label:   # This is the first row
            size_hint_y: None
            height: self.texture_size[1]

        BoxLayout:  # This is another row (that contains two "subrows")
            size_hint_y: None
            height: self.minimum_height
            orientation: 'vertical'
            BoxLayout:  # a "subrow" of ImageButtons
            BoxLayout:  # a "subrow" of MyLabels

        FloatLayout:  # This is another row
            size_hint_y: None
            height: 150 # just an example

You can basically add anything you want as another "row" under the top level BoxLayout, but you must define the height of that "row" (and that generally includes setting size_hint_y to None).