So i'm making a program that will have a bunch of labels connected to one gridlayout. I want a few of these labels to be "under" the screen so that you can scroll down to it. However, I am having trouble with keeping the formatting of what I have currently and scrolling at the same time.
Below is what I want, with the "stuff7" label being under the screen. However I am unable to scroll.Image of non-scrollable screen
However, I noticed when I put size_hint_y: None I am able to scroll but it messes up my formatting completely.
Messed up format but able to scroll
Below is my MRE
KV code
#:import utils kivy.utils
<HomeScreen>:
FloatLayout:
canvas:
Color:
rgb: utils.get_color_from_hex("#FFFFFF")
Rectangle:
size: self.size
pos: self.pos
ScrollView:
size: self.size
GridLayout:
rows: 6
cols: 1
spacing: 10
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
Label:
text:"stuff1"
color: "black"
size_hint: 1,.18
Label:
text:"stuff2"
color: "black"
size_hint: 1,.18
Label:
text:"stuff3"
color: "black"
size_hint: 1,.18
Label:
text:"stuff4"
color: "black"
size_hint: 1,.18
Label:
text:"stuff5"
color: "black"
size_hint: 1,.18
Label:
text:"stuff6"
color: "black"
size_hint: 1,.18
Label:
text:"stuff7"
color: "black"
size_hint: 1,.18
If you are using height: self.minimum_height for the GridLayout, then you cannot use size_hint: 1,.18 for the Labels. The GridLayout is trying to change its height based on the height of its children (the Labels). But the Labels are trying to set their height based on the height of the GridLaout. Try modifying the Labels as:
Label:
text:"stuff2"
color: "black"
size_hint: 1, None
height: self.texture_size[1]
Im creating a simple chat room and i want it to look like whatsapp and messager so I add ScrollView and inside the ScrollView I make a GridLayout class to be containers of upcoming message but when I add AnchorLayout to position the Button inside the GridLayout my widget are colliding and its get messy
See the 2 button that colliding
Here are my code in that part:
ScrollView:
size_hint: 1 , 0.8
scroll_distance: 0
BoxLayout:
id: messages
cols: 1
size_hint_y: None
height:self.minimum_height
spacing: dp(10)
orientation: "vertical"
# Display Date
Button:
text: root.now
align: "center"
size_hint: 1 , None
height: self.texture_size[1] + dp(15)
AnchorLayout:
anchor_x: "right"
size: test.size[0] , test.size[1] + dp(20)
Button:
id: test
text: root.now
align: "center"
size_hint: None , None
height: self.texture_size[1] + dp(15)
width: self.texture_size[0] + dp(15)
I was trying to show a scrollable text, so I put 3 MDLabel in a MDBoxLayot and put it in a ScrollView. Here is the KV string:
KV = '''
MDBoxLayout:
orientation: "vertical"
MDToolbar:
title: "Toolbar"
ScrollView:
MDBoxLayout:
orientation: "vertical"
size_hint_y: None
MDLabel:
text: "title"
font_size: 27
size_hint_y: None
MDLabel:
text: "description"
font_size: 20
size_hint_y: None
MDLabel:
text: "text"
size_hint_y: None
'''
When I run it I can't see the title and description, only the text, and when I scroll up, it goes back and I can only see the text again. How do I fix that?
By setting the height of the MDBoxLayout to self.minimum_height, it will take the height of its contents. This will ensure the labels fit correctly inside it.
MDBoxLayout:
orientation: "vertical"
MDToolbar:
title: "Toolbar"
ScrollView:
MDBoxLayout:
orientation: "vertical"
size_hint_y: None
# sets the height of the BoxLayout to the height of its contents
height: self.minimum_height
MDLabel:
text: "title"
font_size: 27
size_hint_y: None
MDLabel:
text: "description"
font_size: 20
size_hint_y: None
MDLabel:
text: "text"
size_hint_y: None
I'm clicking the button in the fixed menu at the top even though there is a Button in the vertical Scrollview, it doesn't effect the fixed menu.
I'm trying to click at the button in the fixed menu at the top but the actions are being sent to the horizontal Scrollview below.
I'm new with kivy and even programming and I'm creating an app with Python 3.7, and Kivy(1.11.1) that kinda looks like Netflix's Page layout, in which there is a menu fixed at the top and below it there is a vertical Scrollview with some horizontal scrollviews inside (just like the Netlix's catalogues, eg.: My List, Continue Watching, Series, etc). The problem is that when I scroll down the vertical ScrollView and one of the horizontal scrollview gets behind the fixed menu at the top, the events are sent to this horizontal scrollview and not to the fixed menu that is be above the Scrollview content. If I scroll the vertical Scrollview down and one of the horizontal scrollviews gets "behind" (in quotes because I imagine they aren't supposed to collide with each other) the menu at the top, if I click in the menu the event is being sent to the horizontal scrollview.
from kivy.app import App
from kivy.lang.builder import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.scrollview import ScrollView
Builder.load_string(
'''
<ScrollApp>:
orientation: 'vertical'
BoxLayout:
size_hint: 1, 0.12
Button:
text: 'Fixed Menu'
on_press: print('This button stops working if there is a horizontal scrollview "behind"')
ScrollView:
bar_width: 10
scroll_type: ['bars', 'content']
BoxLayout:
orientation: 'vertical'
size_hint: 1, None
height: self.minimum_height
padding: 22, 0, 22, 50
spacing: 50
canvas:
Color:
rgba: .15, .15, .15, .9
Rectangle:
size: self.size
pos: self.pos
Button:
size_hint: None, None
width: 100
height: 100
on_press: print('This button does not overlap the menu above')
# "ScrollViews containers"
Custom
Custom
Custom
Custom
Custom
BoxLayout:
size_hint: 1, 0.12
Button:
on_press: print("This menu at the bottom is not affected by the problem that occurs with the top one")
<Custom#BoxLayout>:
orientation: 'vertical'
size_hint: 1, None
height: self.minimum_height
Label:
size_hint: None, None
size: self.texture_size
id: label
font_size: 20
text: 'Teste'
ScrollView:
do_scroll: True, True
size_hint: 1, None
height: 150
GridLayout:
id: grid
size_hint: None, 1.01
width: self.minimum_width
spacing: 5
cols: 3
Button:
size_hint: None, None
size: 400, 150
on_press: print('ScrollView button pressed')
Button:
size_hint: None, None
size: 400, 150
on_press: print('ScrollView button pressed')
Button:
size_hint: None, None
size: 400, 150
on_press: print('ScrollView button pressed')
''' )
class ScrollApp(BoxLayout):
pass
class Test(App):
def build(self):
return ScrollApp()
Test().run()
You do manage to find obscure situations in kivy :-).
I believe the problem here is the order of touch event processing. The touch events are normally processed by the top level widgets, and they dispatch the event to their children, all the way down the Widget tree. In any Widget with multiple children, the touch event is dispatched to children in the reverse order that they have been add to their parent. And in kv, child Widgets are added in order as they appear (top to bottom). So, in your case, the ScrollApp has three children, and the touch events will be dispatched to its children starting with the BoxLayout that contains the bottom menu, then to the ScrollView, and lastly, to the BoxLayout that contains the top menu. So the ScrollView gets the touch event before the top menu, and dispatches the touch to its children (including the Custom instances). So the Buttons in the Custom see the touch event before the top menu sees it, and they claim it as their own. The obvious way to fix it would be to change the order of Widgets that appear in the ScrollApp, but since ScrollApp is a BoxLayout, that would dramatically change how your App looks. A different fix is to use a Layout that doesn't depend on the order of its children. Something like a FloatLayout has that characteristic. So, here is a modified version of your code, that makes ScrollApp extend FloatLayout instead of BoxLayout:
from kivy.app import App
from kivy.lang.builder import Builder
from kivy.uix.floatlayout import FloatLayout
Builder.load_string(
'''
<ScrollApp>:
ScrollView:
size_hint: 1.0, 0.76
pos_hint: {'center_y':0.5}
bar_width: 10
scroll_type: ['bars', 'content']
BoxLayout:
orientation: 'vertical'
size_hint: 1, None
height: self.minimum_height
padding: 22, 0, 22, 50
spacing: 50
canvas:
Color:
rgba: .15, .15, .15, .9
Rectangle:
size: self.size
pos: self.pos
Button:
size_hint: None, None
width: 100
height: 100
on_press: print('This button does not overlap the menu above')
# "ScrollViews containers"
Custom
Custom
Custom
Custom
Custom
BoxLayout:
size_hint: 1, 0.12
pos_hint: {'y':0}
Button:
on_press: print("This menu at the bottom is not affected by the problem that occurs with the top one")
BoxLayout:
size_hint: 1, 0.12
pos_hint: {'top':1.0}
Button:
text: 'Fixed Menu'
on_press: print('This button stops working if there is a horizontal scrollview "behind"')
<Custom#BoxLayout>:
orientation: 'vertical'
size_hint: 1, None
height: self.minimum_height
Label:
size_hint: None, None
size: self.texture_size
id: label
font_size: 20
text: 'Teste'
ScrollView:
do_scroll: True, True
size_hint: 1, None
height: 150
GridLayout:
id: grid
size_hint: None, 1.01
width: self.minimum_width
spacing: 5
cols: 3
Button:
text: 'button 1'
size_hint: None, None
size: 400, 150
on_press: print('ScrollView button pressed')
Button:
text: 'button 2'
size_hint: None, None
size: 400, 150
on_press: print('ScrollView button pressed')
Button:
text: 'button 3'
size_hint: None, None
size: 400, 150
on_press: print('ScrollView button pressed')
''' )
class ScrollApp(FloatLayout):
pass
class Test(App):
def build(self):
return ScrollApp()
Test().run()
So, with this child order in ScrollApp, the top and bottom menus get their shot at the touch events before the ScrollView.
I actually think your code should work without this change, so there may be something else happening that I couldn't find.
So I have this chatting app like structure I have made using Kivy's RecycleView to instantiate a custom widget (named 'Row') and I pass it values however I wish.
It works fine if the Row custom widget only contains a Label child, the moment I add an Image and a Button (I'll explain why in a sec), there are weird spacing and positioning problems which shouldn't exist because I am using a BoxLayout and have tried proper size_hint: and height: techniques to get them to look right.
Relevant KV code:
<Row#BoxLayout>:
orientation: 'vertical'
text: ''
source: 'res/icon.png'
buttontext: ''
Label:
markup: True
text_size: self.size
text: root.text
Image:
size: self.size
source: root.source
allow_stretch: True
Button:
text: root.buttontext #contains a link
on_press: app.root.stuff(self.text) #opens that link
# Relevant Screen where I am using the RecycleView
<ChatBotScreen>
BoxLayout:
ti_userinput: ti_userinput
orientation: 'vertical'
ScrollView:
size_hint_y: 85
RecycleView:
id: chatbase_list
viewclass: 'Row'
data: []
RecycleBoxLayout:
padding: "15dp", "45dp", "15dp", "15dp"
default_size: None, dp(25)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
TextInput:
size_hint_y: None
height: "40dp"
id: ti_userinput
multiline: False
on_text_validate: root.on_user_enter_text()
Since my custom widget Row is extending BoxLayout and I am using a vertical orientation, why aren't the child widgets (Label, Image and Button) overlapping?
This is the class & function via which I am calling to pass the data inside the RecycleView
class ChatBotScreen(Screen):
nickname = StringProperty()
rvList = []
def display_bot_output(self, botOutput):
# Initialize an empty dictionary
tempDict = {}
textToDisplay = '' + botOutput
# Update the dictionary with properties:values and then pass it as a list to RecycleView's data
tempDict.update({'text':textToDisplay, 'buttontext':'https://google.com'})
self.rvList.append(tempDict)
self.ids.chatbase_list.data = self.rvList
What I want to be visible on screen is:
The text I send through the textToDisplay variable in the Label
Underneath the Label, Image should be displayed the source of which I can pass, if no source passed, no image displayed
Underneath the Image, a button with a link should be displayed which I pass through buttontext, if not passed, no button should be displayed.
I am able to render all that but the spacing and all is all messed up.
Screenshot below:
Here I first sent data with only Label text info and Image, thus the Button text is empty (it still shows up), then I send another data (2nd Row widget) with Label text info, Image as well as a Button text (which is google link).
Any help is greatly appreciated. Thanks!
<ChatBotScreen>
BoxLayout:
ti_userinput: ti_userinput
orientation: 'vertical'
ScrollView:
# to have the screen get bigger not lliek what you have
size: root.size
RecycleView:
id: chatbase_list
viewclass: 'Row'
data: []
RecycleBoxLayout:
padding: "15dp", "45dp", "15dp", "15dp"
default_size: None, dp(25)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
# add this so you can scroll
row_default_height: 60
orientation: 'vertical'
TextInput:
size_hint_y: None
height: "40dp"
id: ti_userinput
multiline: False
on_text_validate: root.on_user_enter_text()