Main screen:
Could you please help me to fix my button problem.
Here is my Home screen.
MY Goal:
I want my buttons like this:
%50 smaller and have blanks between each other.
KV codes
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
Button:
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
Button:
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
What i tried and not worked
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
Button:
size-hint: 0.50, 1 # I ADDED THIS LINE **********************
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
Button:
size-hint: 0.50, 1 # I ADDED THIS LINE ******************************
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
I addded size-hint: 0.50, 1 to buttons but not worked.
How can i fix this.
I did't use any window config on my code. I used allow_stretch: True and keep_ratio: False codes for my project.
Thanks very much
The BoxLayout tries to give all its space to its children, so it portions out its space in proportion to the size_hint. As long as you just use size_hint, the Boxlayout will make sure that its children fill its entire width.
An easy way to get what you want is to just put each Button in an AnchorLayout. The AnchorLayout centers its child by default, and the size_hint that you added now refers to the AnchorLayout size. Here is a modified version of your kv that does this:
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
AnchorLayout:
Button:
size_hint: 0.50, 1 # I ADDED THIS LINE **********************
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
AnchorLayout:
Button:
size_hint: 0.50, 1 # I ADDED THIS LINE ******************************
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
Related
Here is the relevant portion of my Animal Picker in KIVY file shown below:
AniPic#ANIMALPICKER
id: aroot
labelText: ''
imageSource: ''
animalCode: 'AB'
animalName: 'GOGGA'
BoxLayout:
orientation: 'horizontal'
width: root.width
pos: 0,0
canvas.before:
RoundedRectangle:
pos: 5, 5
# the next two lines determine the position of the rectangle for the image
size: root.width-10, root.height-10
source: root.imageSource
radius:[10]
PinButton:
id: _pin
on_release:
root.pin_action(root.labelText)
Label:
id: _label
text: root.labelText
width: root.width
color: (1, 1, 1, 1)
MapButton:
id: _map
on_release:
root.map_show(root.labelText)
#==========================================================================
AnimalWindow:
:
id: animalid
name: 'animal'
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
BoxLayout:
orientation: 'vertical'
Label:
id: choice
text: "Sightings"
color: 0, 0, 0, 1
size_hint_y: 0.05
canvas.before:
Color:
rgba: 0.5, 1, 0.5, 1
Rectangle:
pos: self.pos
size: self.size
ScrollView:
do_scroll_x: False
do_scroll_y: True
GridLayout:
size: (root.width, root.height)
cols: 1
rows: 9
padding: 10
spacing: 10
size_hint_x: None
size_hint_y: 9
height: self.minimum_height
row_default_height: 120
row_force_default: True
AniPic:
labelText: 'LION'
imageSource: 'images/lion_pic.jpg'
animalCode: 'LI'
AniPic:
labelText: 'CHEETAH'
imageSource: 'images/cheetah_pic.png'
animalCode: 'CH'
Now when I click on a 'PinButton' of a particular animal (CHEETA) I get the app executing
def pin_it(_animal):
print('aaaa', _animal )
and shows.
'aaaa CHEETAH'
BUT the POPUP code below, where I want 'confirmation' for pin action, does not show the popup but crashes:
class ANIMALPICKER(RelativeLayout):
def pin_action(self, _animal):
# Prepare to confirm that you want to Pin the sighting
title_text = _animal + ' ' + 'SIGHTING'
content_text = 'Confirm Sighting?'
content_box = BoxLayout(orientation='vertical')
btn_box = BoxLayout(orientation='horizontal')
btn_box.height = 24
content_label = Label()
content_label.text = content_text
yes_btn = Button(text='Yes')
yes_btn.background_color = 0, 1, 0, 1
no_btn = Button(text='No')
no_btn.background_color = 1, 0, 0, 1
btn_box.add_widget(yes_btn)
btn_box.add_widget(no_btn)
content_box.add_widget(content_label)
content_box.add_widget(btn_box)
# Now confirm that you want to Pin the sighting
popup = Popup(title=title_text,
separator_height=4,
title_size='20sp',
content=content_box,
size_hint=(None, None),
size=(200, 240),
auto_dismiss=False)
# dismiss popup and proceed to pin the sighting, on release of yes button
yes_btn.bind(on_press=pin_it(_animal))
# dismiss popup on release of the NO button
yes_btn.bind(on_release=popup.dismiss)
popup.open()
with the following message:
File "/home/sib/PycharmProjects/SpotMap/animalWindow.py", line 66, in pin_action
yes_btn.bind(on_press=pin_it(_animal))
File "kivy/_event.pyx", line 444, in kivy._event.EventDispatcher.bind
AssertionError: None is not callable
However when I bind a simple 'yes_btn.bind(on_press=dismiss)' instead of 'yes_btn.bind(on_press=pin_it(_animal))' the popup does display and the the popup dismisses when the button to which it is attached is pressed.
Please at 82 years of age and a limited knowledge of Python, Kivy and OO I desperately need help in completing this app.
A work around will also satisfy me
Many Thanks
I think the problem is that pin_it(_animal) completes the function instead of referencing the function object.
from functools import partial
myfun = partial(pin_it, animal=_animal)
# this should be a function, not function()
yes_btn.bind(on_press=myfun)
My goal is to set the checkbox on top of the image in below class. I'm struggling to find a layout in which I can position one layout above another. The only way I could think of at the moment is to show the image as the background image of RelativeLayout not as AsyncImage but I believe there is a clean way to achieve this.
Class
<FriendTile>
orientation: 'vertical'
size_hint: None, None
height: pic.height + username.height
width: pic.width
background_color: app.alert_color
active_color: app.main_bcolor
unactive_color: app.main_bcolor
canvas.before:
Color:
rgba: (0, 0, 1, 1) if self.background_color is None else self.background_color
Rectangle:
pos: self.pos
size: self.size
RelativeLayout:
id: pic
size_hint: None, None
size: 100, 100
CheckBox:
size_hint: .1, .1
pos_hint: {'top': 1, 'right': 1}
canvas.after:
Color:
rgba: (0, 1, 0, 1)
Rectangle:
pos: self.pos
size: self.size
AsyncImage:
id: image
size_hint: .9, .9
pos_hint: {'center_x': .5, 'center_y': .5}
source: root.avatar
canvas.before:
Color:
rgba: (0, 1, 1, 1) # if root.background_color is None else root.background_color
Rectangle:
pos: self.pos
size: self.size
Expectations
Reality
I have the following code snippet displaying a popup Window.
class SearchBar(TextInput):
articles = ListProperty()
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.bind(text=self.on_text)
self.bind(articles=self.on_articles)
def on_text(self, *args):
WikiSearcher().get_search_results(self.text, self)
def on_articles(self, *args):
self.parent.parent.children[0].update_recommendations(self.articles)
class SearchItem(ButtonBehavior, Label):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.url = ''
def on_release(self):
print (self.url)
class Recommendations(BoxLayout):
def update_recommendations(self, recommendations: list):
for (search_item, recommendation) in zip(reversed(self.children), recommendations):
search_item.text = recommendation
try:
search_item.url = wikipedia.page(recommendation).url
except:
search_item.url = 'https://en.wikipedia.org/wiki/' + recommendation.replace(" ", "_")
Builder.load_string('''
<SearchItem>:
font_size: self.height * 0.4
canvas.before:
Color:
rgba: [0.8, 0.8, 0.8, 1] if self.state == 'normal' else [30/255, 139/255, 195/255, 1]
Rectangle:
#pos: self.pos
#size: self.size[0], self.size[1]
size: root.size[0], root.size[1]
pos: self.pos[0], self.pos[1]
Color:
rgba: 0, 0, 0, 1
Line:
rectangle: self.x, self.y, self.width, self.height
color: 0, 0, 0, 1
<Urlpup>:
size_hint: 1, 1
auto_dismiss: False
title: 'Enter URL or keywords'
BoxLayout:
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
size: self.size
pos: self.pos
orientation: 'vertical'
padding: self.width * 0.1
spacing: self.height * 0.1
BoxLayout:
orientation: 'horizontal'
Spinner:
id: spinner
size_hint: 0.5, 0.4
pos_hint: { 'top' : 1 }
text: 'en'
values: 'en', 'fr', 'de', 'it'
SearchBar:
id: url_input
size_hint: 1, 0.4
pos_hint: { 'center_x' : 0.5, 'top' : 1 }
multiline: False
font_size: self.height*0.8
Button:
text: 'OK'
size_hint: 0.5, 0.4
pos_hint: { 'top' : 1 }
on_press: root.dismiss()
on_release: app.create_new_article(url_input.text)
Recommendations:
id: recommendations
orientation: 'vertical'
SearchItem
SearchItem
SearchItem
SearchItem
''')
class Urlpup(Popup):
pass
Here is a picture of the popup Window
You can see that the SearchItems are not tightly below the SearchBar, where I'm struggling to position it. Can you fix it? On the picture there are 4 SearchItems but I plan to have 10 Searchitems so it should work for 10 SearchItems or be flexible when I decide to change the number of SearchItems
The BoxLayout tries to distribute its available space equally among its children, unless you tell it otherwise. So, your top level BoxLayout in the Urlpup class evenly divides its space between the BoxLayout containing the TextInput and the Recommendations widget. You can reduce the space between those two widgets by limiting the space given to the horizontal BoxLayout. You can do that by specifying a height for that BoxLayout, like this:
BoxLayout:
size_hint_y: None
height: 50
orientation: 'horizontal'
Spinner:
id: spinner
size_hint: 0.5, 1
pos_hint: { 'top' : 1 }
text: 'en'
values: 'en', 'fr', 'de', 'it'
SearchBar:
id: url_input
size_hint: 1, 1
pos_hint: { 'center_x' : 0.5, 'top' : 1 }
multiline: False
font_size: self.height*0.8
Button:
text: 'OK'
size_hint: 0.5, 1
pos_hint: { 'top' : 1 }
on_press: root.dismiss()
on_release: app.create_new_article(url_input.text)
Note that the children of this BoxLayout all have a size_hint_y of 1.0, so they will all be the height that is specified for their container.
The Recommendations widget gets the remaining vertical space (minus the spacing). You can move the Recommendations even closer by reducing the spacing.
I give up. I think I have tried everything I possibly could. I need some explatanion how to position nested layouts classes. In below code I need these labels to be positioned in the center of the screen. Anything I've tried leaves the Labels on the left side.
from kivy.app import App
from kivy.lang import Builder
kv = """
<StorageLabel#Label>
background_normal: ''
size_hint: None, None
size: 65, 50
canvas.before:
Color:
rgba: (1, 0, 0.5, 1)
Rectangle:
pos: self.pos
size: self.size
halign: "left"
valign: "middle"
<Storage#BoxLayout>
ScrollView:
size_hint_x: 1
bar_width: 10
scroll_type: ['bars', 'content']
bar_color: [0, 0, 0, 1]
bar_inactive_color: [0, 0, 0, 1]
pos_hint: {'center_x': 0.5}
GridLayout:
cols: 3
size_hint_y: None
size: self.minimum_size
height: self.minimum_height
StorageLabel:
text: '1m'
StorageLabel:
text: '2m'
StorageLabel:
text: '3m'
Storage:
"""
sm = Builder.load_string(kv)
class Main(App):
def build(self):
return sm
if __name__ == '__main__':
Main().run()
The easiest way to center the Labels is to let the GridLayout size and position them. This results in a larger width for each Label, but they are centered:
from kivy.app import App
from kivy.lang import Builder
kv = """
<StorageLabel#Label>
background_normal: ''
# leave size_hint_x at default of 1
size_hint_y: None
height: 50
canvas.before:
Color:
rgba: (1, 0, 0.5, 1)
Rectangle:
pos: self.pos
size: self.size
<Storage#BoxLayout>
ScrollView:
size_hint_x: 1
bar_width: 10
scroll_type: ['bars', 'content']
bar_color: [0, 0, 0, 1]
bar_inactive_color: [0, 0, 0, 1]
pos_hint: {'center_x': 0.5}
GridLayout:
cols: 3
# add some padding and spacing
padding: 5
spacing: 5
size_hint_y: None
height: self.minimum_height
StorageLabel:
text: '1m'
StorageLabel:
text: '2m'
StorageLabel:
text: '3m'
Storage:
"""
sm = Builder.load_string(kv)
class Main(App):
def build(self):
return sm
if __name__ == '__main__':
Main().run()
If you want the labels to be your original size, then you can place each in its own Layout (perhaps a FloatLayout), and let the GridLayout size and position those Layouts:
from kivy.app import App
from kivy.lang import Builder
kv = """
<StorageLabel#Label>
background_normal: ''
size_hint: None, None
size: 65, 50
# position the label in the center of its FloatLayout
pos_hint: {'center_x':0.5}
canvas.before:
Color:
rgba: (1, 0, 0.5, 1)
Rectangle:
pos: self.pos
size: self.size
<Storage#BoxLayout>
ScrollView:
size_hint_x: 1
bar_width: 10
scroll_type: ['bars', 'content']
bar_color: [0, 0, 0, 1]
bar_inactive_color: [0, 0, 0, 1]
pos_hint: {'center_x': 0.5}
GridLayout:
cols: 3
size_hint_y: None
height: self.minimum_height
# set the default row height to the height of the Labels
row_default_height: 50
FloatLayout:
StorageLabel:
text: '1m'
FloatLayout:
StorageLabel:
text: '2m'
FloatLayout:
StorageLabel:
text: '3m'
Storage:
"""
sm = Builder.load_string(kv)
class Main(App):
def build(self):
return sm
if __name__ == '__main__':
Main().run()
The last letter is overflowing
I'm using Kivy 1.10.1. I've added a text input (multiline = False). The sentence entered above is "This is a long sentence being typed into Kivy". All the letters have been entered. But the last letter - the "y" is outside the text input.
I've tried changing the padding size, the border size and changing the size of the textinput itself. I don't know if I'm doing something wrong or it is a bug with the library.
Edit:( I should have added the widget code here )
text_input: input_text_field
canvas:
Color:
rgba: self.background_color_intensity_red, self.background_color_intensity_green, self.background_color_intensity_blue, 1
Rectangle:
size: 396, 768
pos: self.pos
source: "sprites/phone.png"
BoxLayout:
size: 354, 598
pos: 21, 96
orientation: 'vertical'
BoxLayout:
size_hint: 1, 0.1
pos: root.pos
orientation: 'horizontal'
Image:
size_hint: 0.15, 1
source: "sprites/profile_pic.png"
TextInput:
id: input_text_field
size_hint: 0.85, 0.5
pos_hint: {'top': 0.75}
background_color: 1,1,1,1
border: (20, 20, 20, 20)
multiline: False
halign: 'center'
focus: True
on_text_validate: self.parent.parent.parent.on_text_input()
BoxLayout:
size_hint: 1, 0.9
pos: root.pos
orientation: 'vertical'
Thank you.