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..
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).