Here is a screenshot of my kivy app. I am trying to get the TextInput in the bottom left to be centered in the BoxLayout which it is in, and I don't want it to be the same size as the layout, I want it to be much smaller. This BoxLayout in question resides in the bottom half of the screen. I have tried setting the TextInputs propertycenter:self.parent.center but this doesn't work. As you can see, I have printed the center coords from the BoxLayout into the TextInput using that very line, self.parent.center, with the correct result. Yet, setting the TextInputs center or position to these coords is not centering it, it doesn't move... what am I doing wrong?
py file:
import kivy
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
class TimeTabler(Widget):
pass
class TimerApp(App):
def build(self):
return TimeTabler()
if __name__ == "__main__":
TimerApp().run()
****kv file:****
#:kivy 1.0
BoxLayout:
orientation: 'vertical'
size: root.size
BoxLayout:
orientation: 'vertical'
Label:
text: 'TimeTabler'
BoxLayout:
TextInput:
text: '%s' % (self.parent.center) # why does this work here
size_hint: None, None
width: sp(200)
height: sp(30)
center: self.parent.center # but not here
You gave the TextInput size_hint: None, None, therefore the BoxLayout doesn't try to manually give it the right size, and it assumes the default size of 100, 100. Just delete the size_hint line to fix it.
Also, several widgets have lines like size: self.size. This is meaningless, self refers to the widget itself, and clearly the line does nothing since it just tries to set the size to what it already is.
Things would also be simpler if you made your TimeTabler inherit from BoxLayout instead of Widget. That way you wouldn't need to manually set it's child BoxLayout's size.
Edit: It looks like I misunderstood what you wanted, here's an example that uses an AnchorLayout to center the TextInput:
<TimeTabler>
BoxLayout:
orientation: 'vertical'
size: root.size
on_touch_down: print self.pos, self.size
canvas:
Color:
rgba: 0, 1, 1, .3
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
orientation: 'vertical'
size: self.size
Label:
text: 'TimeTabler'
BoxLayout:
id: bl
on_touch_down: print 'center', self.center
canvas:
Color:
rgb: 1,1,1
Line:
rectangle: self.x, self.y, self.width, self.height
AnchorLayout:
TextInput:
size_hint: None, None
text: '%s, %s' % (self.get_center_x(), self.get_center_y())
I think your problem was the BoxLayout automatically sets the position of the TextInput even when it is setting its own size. A simple way around this is to just next the TextInput in another widget, in this case an AnchorLayout that takes care of the centering for you. You could also just use a Widget and your previous mechanism of setting the TextInput center.
Related
When I add a widget, namely Label, sometimes its size cannot fit it's text height. Changing its height manually doesn't helped because i can type a text so its height will exceed the label's height. Here is the example of the code
.py file
#testing.py
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
import random
import GlobalVariable
from GlobalVariable import *
import time
class ScreenOne(Screen):
pass
class WindowManager(ScreenManager):
pass
kv = Builder.load_file("testing.kv")
class testing(App):
def build(self):
return kv
if __name__ == "__main__":
testing().run()
.kv file
#testing.kv
WindowManager:
ScreenOne:
<ScreenOne>:
ScrollView:
size: self.size
GridLayout:
size_hint_y: None
size: root.height, root.width
cols: 2
Label:
text: "boom\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nboom"
Label:
text: "boom\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nboom"
Label:
text: "boom\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nboom"
Label:
text: "boom\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nboom"
Label:
text: "boom\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nboom"
Label:
text: "boom\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nboom"
When you run the code, you will see that there is text that exceed it's label height. I expect to make those label always fit the text (not shorter but also not longer than its text) whatever the text is, and is scrollable. Any help or suggestion is appreciated. Thanks.
Use these properties for your Label
Label:
text_size: self.width, None
size_hint: 1, None
height: self.texture_size[1]
I have a scroll view with GridLayout child and lany varying height labels are added in gridlayout. My question is, How to know which widget is shown in the screen at any time? Reason is, I want to show the details of topmost visible label in other part of the screen(to show which widget is top of the visible scrollview area now). For ex, if the gridlayout has 50 labels, when we scroll, screen might show 4 labels(due to size of the scrollview) for ex 23,24,25 and 26. In this case, how to know label 23 is being shown at the top of the scroll view visible area?
UPDATED:
sample code showing above explanation
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.behaviors.focus_behavior import ButtonBehavior
KV = '''
BoxLayout:
orientation: 'vertical'
MDLabel:
id : lbl_id
text: 'This should show the top label in scrollview below(red canvas) dynamically as we scroll'
size_hint : (1,None)
height : self.texture_size[1]
MDSeparator:
ScrollView:
id : scroll_id
size_hint_y:None
height : root.height - (lbl_id.height)
do_scroll_x: False
do_scroll_y: True
scroll_type: ['bars', 'content']
canvas:
Color:
rgba: [1,0,0,0.5]
Rectangle:
pos: self.pos[0],self.height-100
size: self.size
GridLayout:
id:grid_id
cols: 1
height: self.minimum_height
size_hint_y: None
'''
class MyMDLabel(ButtonBehavior, MDLabel ):
pass
class Example(MDApp):
def build(self):
self.res=Builder.load_string(KV)
for i in range(20):
lbl = MyMDLabel(text='pressme Label-%d ' % (i), size_hint=(1, None) )
lbl.bind(on_release=self.update_lbl)
self.res.ids.grid_id.add_widget(lbl)
return self.res
def update_lbl(self,instance):
content='\nThis should show the top label in scrollview below(red canvas) dynamically as we scroll'
self.res.ids.lbl_id.text=instance.text + content
Example().run()
Am trying to have 4 Horizontal box layout stacked in a BoxLayout in a vertical way.
My KV file :
<HBoxWidget>:
BoxLayout:
size: root.size
pos: root.pos
id: boxlayout_h
orientation: 'horizontal'
Image:
source: '/Users/driftking9987/Desktop/fp.gif'
<VBoxWidget1>:
BoxLayout:
spacing: 10
orientation: "horizontal"
size: [1,.25]
pos: root.pos
Label:
text: "Status : "
color: [0,84,80,19]
Label:
text: "Pending"
color: [0,84,80,19]
Widget:
<ContainerBox>:
orientation: 'horizontal'
HBoxWidget:
VBoxWidget1:
I planned to have multiple VBoxWidget in a vertical way but it's just not working out.
Moreover to achieve the [9] Label, I thought I will have a BoxLayout with 2 rows, in horizontal, 2nd row will have the above mentioned properties. But this is just not working out. Below is what am getting. I tried setting the size_hint as 1,.25 i.e the whole area will be divided into 4 parts but it's not giving the desired result.
PY File :
from kivy.app import App
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
class HBoxWidget(Widget):
def __init__(self, **kwargs):
super(HBoxWidget, self).__init__(**kwargs)
class VBoxWidget1(Widget):
def __init__(self, **kwargs):
super(VBoxWidget1, self).__init__(**kwargs)
class ContainerBox(BoxLayout):
def __init__(self, **kwargs):
super(ContainerBox, self).__init__(**kwargs)
class TestApp(App):
def build(self):
return ContainerBox()
if __name__ == '__main__':
TestApp().run()
What about this: I changed HBOX and VBOX widget to BoxLayout and added Label and another BoxLayouts to ContainerBox. It looks quite like on your drawing
<HBoxWidget>:
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
Image:
source: 'duck.jpg'
<VBoxWidget1>:
BoxLayout:
orientation: "horizontal"
size: [1,.25]
pos: root.pos
Label:
text: "Status : "
color: [0,84,80,19]
Label:
text: "Pending"
color: [0,84,80,19]
Widget: # Because of this widget Labels are not in the middle, its not on your drawing tough
<ContainerBox>:
orientation: 'vertical'
Label:
text: 'Label'
size_hint_y: 0.1
BoxLayout:
id: four_horizontals
orientation: 'horizontal'
HBoxWidget:
BoxLayout:
orientation:'vertical'
# One solution
#GridLayout:
# cols:1
# padding: 100
# VBoxWidget1:
# VBoxWidget1:
# VBoxWidget1:
# VBoxWidget1:
#Second Solution
BoxLayout:
#size_hint_y: 0 to 1 - it says how much you reduce height. Now its 1/3 of its parent, because there are 3 boxlayouts. if you set 0.5, it will have 1/3*0.5 and the other 2 boxlayouts takes the height which you took from this one
BoxLayout:
orientation:'vertical'
VBoxWidget1:
VBoxWidget1:
VBoxWidget1:
VBoxWidget1:
BoxLayout:
python
from kivy.app import App
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
class HBoxWidget(BoxLayout):
def __init__(self, **kwargs):
super(HBoxWidget, self).__init__(**kwargs)
class VBoxWidget1(BoxLayout):
def __init__(self, **kwargs):
super(VBoxWidget1, self).__init__(**kwargs)
class ContainerBox(BoxLayout):
def __init__(self, **kwargs):
super(ContainerBox, self).__init__(**kwargs)
class TestApp(App):
def build(self):
return ContainerBox()
if __name__ == '__main__':
TestApp().run()
Additional info:
The way I managed those 4 labels is not really correct way. I will give you hint how to solve it more correctly.
Check https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html#module-kivy.uix.floatlayout
On BoxLayout, widgets organize themself automaticly - horizontaly or verticaly and they scale based on how much space belongs to them.
With FloatLayout, there is no restriction so you can position labels as you wish.
In general, if you have changing resolution, its better to solve it with BoxLayouts. If you want more freedom, use FloatLayout, but you will have to manage widget scaling and positioning by yourself
I trying to create a one screen app with one root rule set. by pressing a button i should see a scrollable text in the grid next to the button. In all the example solutions I see that scrollview is working in similar KV files that I have seen in other questions. Could someone please identify what I have missed in KV file.
my .py file:
import kivy
import string
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.properties import ObjectProperty
from kivy.properties import StringProperty
from kivy.uix.scrollview import ScrollView
from kivy.core.window import Window
class RootContainer(BoxLayout):
instance = ObjectProperty(None)
def __init__(self, **kwargs):
super(RootContainer, self).__init__(**kwargs)
def clickAction1(self, instance):
#identify the button pressed
buttonText = instance.text
self.lbl1.text = instance.text + " some text goes here ... "
myresult = " this is scrolling text.\n " * 30
self.lbl5.text = myresult
class MBApp(App):
def build(self):
return RootContainer()
if __name__ == '__main__':
MBApp().run()
my KV file:
#:kivy 1.0.9
<RootContainer>:
id: theRoot
lbl1: my_labelC
lbl5: my_labelCS
BoxLayout:
orientation: 'vertical'
spacing: 20
padding: 20
canvas:
Color:
rgb: 0, .33, 0
Rectangle:
pos: self.pos
size: self.size
Button:
text: "This is 1st button"
text_size: self.size
size_hint: (.5,1)
on_press: theRoot.clickAction1(self)
Button:
text: "This is 2nd button"
text_size: self.size
size_hint: (.5,1)
on_press: root.clickAction1(self)
GridLayout:
rows: 2
cols: 1
spacing: 10
padding: 10
canvas:
Color:
rgb: .7, .63, 0
Rectangle:
pos: self.pos
size: self.size
Label:
id: my_labelC
canvas.before:
Color:
rgb: 0,0,0
Rectangle:
pos: self.pos
size: self.size
text: "Header text for button clicked ......."
text_size: self.size
ScrollView:
GridLayout:
cols:1
rows:1
height: self.minimum_height
Label:
id: my_labelCS
text: "Scrolling text goes here ....."
I hope this is not a duplicate. Any other suggestions to code are also welcome. Thank you.
You don't set the size of your Label, so the default applies, as any widget, the defaults are
size: 100, 100
size_hint: 1, 1
since size_hintis 1, 1, and the parent is a layout, size itself is overriden by the parent's available space
since you set size: minimum_size in the parent layout, it'll give the minimum size its children require, but the Label doesn't ask for any space, it's size_hint of 1, 1 means that it's happy to take all the available space. Kivy solve this situation by not giving it any space, so the Label size ends up being 0, 0, and the GridLayout's size as well.
So you want to disable size_hint (at least for the height, of the Label, and instead set it to the texture heights
size_hint_y: None
height: self.texture_size[1]
Which is usually sided with setting the texture width to the available width, by setting text_size.
text_size: self.width, None
size_hint_x: 1 # this is the default, so this line is not required, but you want to be sure not to disable this default
Do you really need the GridLayout inside your scrollview? This works for me:
ScrollView:
Label:
id: my_labelCS
size_hint: 1, None
text_size: self.width, None
height: self.texture_size[1]
text: "Scrolling text goes here ....."
I am trying to build a basic Kivy app. After adding the basic elements, and running the app, all of the elements are crammed into the bottom left corner. It shows up like this on android and Linux.
Main.py:
from kivy.app import App
from kivy.uix.widget import Widget
class SublimeLauncher(Widget):
pass
class SublimeLauncherApp(App):
def build(self):
return SublimeLauncher()
if __name__ == "__main__":
SublimeLauncherApp().run()
sublimelauncher.kv:
#:kivy 1.2.0
<SublimeLauncher>:
FloatLayout:
BoxLayout:
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
I first tried it with just the BoxLayout, but read somewhere the root widget is always as big as the app. How do I declare the size of the app? Or the layout? How would you go about doing something like a dialog box?
Maybe I am missing something very basic, but I can't seem to figure it out.
Edit: here is what I am seeing..
Your layout has a default size of 100x100 pixels. You can try to color it to see how much space does it take:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
kv = '''
<SublimeLauncher>:
BoxLayout:
canvas:
Color:
rgb: 1, 0, 0
Rectangle:
size: self.size
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
'''
Builder.load_string(kv)
class SublimeLauncher(Widget):
pass
class SublimeLauncherApp(App):
def build(self):
return SublimeLauncher()
if __name__ == "__main__":
SublimeLauncherApp().run()
Setting non-default size:
kv = '''
<SublimeLauncher>:
BoxLayout:
size: 250, 250
canvas:
Color:
rgb: 1, 0, 0
Rectangle:
size: self.size
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
'''
Builder.load_string(kv)
Taking full space:
kv = '''
<SublimeLauncher>:
BoxLayout:
size: root.size
canvas:
Color:
rgb: 1, 0, 0
Rectangle:
size: self.size
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open. \\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
'''
Builder.load_string(kv)
I recently wrote a post of a little trick I use when I am programming interfaces. The trick will let you see a border around all the widgets (layouts included) you add to the screen. This would be the result for your code:
It takes advantage of inheritance and the Kivy rules to overwrite the base class of all widgets. You just have to add:
<Widget>:
canvas.after:
Line:
rectangle: self.x+1,self.y+1,self.width-1,self.height-1
at the beginning of this file:
<SublimeLauncher>:
FloatLayout:
BoxLayout:
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
As your root widget is not a layout (you made SublimeLauncher inherit Widget), it doesn't set its children size/positions. So your FloatLayout have the defaults, since you don't override them manually either.
pos: 0, 0
size: 100, 100
And these defaults of course constraints the child, since FloatLayout by constraint their size based on their size_hint property.
You want to give them more space, as Nykakin pointed out.
Also, as your text is bigger than the Label (you didn't set halign and text_size either) its texture is centered on the center of the Label, and so some part of it is out of screen. You want to have a look at kivy/examples/widgets/textalign.py