I'm doing a Kivy App but I have an issue. I want to add an image to the screen but I don't know how to put it in the middle of the screen. The fact is that i want the image to work like a float layout (being adaptative to the screen, automatic resizing). I thought it was the same process that is done to center a label or a button, but I've realized it isn't. I insert here the Kivy language code I've been using.
<FloatLayout>
canvas.before:
Color:
rgba: 0.5, 0.5, 0.5, 0.1
BorderImage:
# BorderImage behaves like the CSS BorderImage
border: 10, 10, 10, 10
source: '../examples/widgets/sequenced_images/data/images/button_white.png'
pos: self.pos
size: self.size
Rectangle:
source: 'etseib.png'
size: 400, 400
pos: (400,400)
If someone knows how to fix the problem it would be very helpful.
To center a widget in the middle of a screen, use the anchor layout:
Screen:
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
Image:
source: 'logo.png'
size_hint: None, None
size: 400, 400
# size: self.texture_size[0] / 2, self.texture_size[1] / 2
# opacity: 0.1
Version without anchor layout:
Screen:
Image:
source: 'image.png'
keep_ratio: False
allow_stretch: True
opacity: 0.8
size_hint: 0.3, 0.4
pos_hint: {'center_x': 0.5, 'center_y': 0.75}
Add rows:1
<FloatLayout>
canvas.before:
Color:
rgba: 0.5, 0.5, 0.5, 0.1
BorderImage:
rows: 1
border: 10, 10, 10, 10
source: '../examples/widgets/sequenced_images/data/images/button_white.png'
pos: self.pos
size: self.size
Rectangle:
source: 'etseib.png'
size: 400, 400
pos: (400,400)
Related
I tried to create a white popup window with rounded edges as the first image by using a canvas, but when I write canvas.after or canvas.before it comes behind or above the popup window content, so how I can make it looks like the first image?
.py file:
from kivy.app import App
from kivy.core.window import Window
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.core.text import LabelBase
from kivy.uix.popup import Popup
Window.size = [300,600]
class MyLayout(Widget):
pass
class Exercise(App):
def build(self):
#Window color
Window.clearcolor = (249/255.0, 249/255.0, 249/255.0, 0)
Builder.load_file("myfile.kv")
#Loading .kv file
return MyLayout()
if __name__ == "__main__":
Exercise().run()
.kv file:
#: import Factory kivy.factory.Factory
<MyPopup#Popup>
auto_dismiss: False
title: ""
separator_height: 0
size_hint: 0.8, 0.4
background_color: (0,0,0,0)
background_normal: ''
canvas.before:
Color:
rgba:(255/255,255/255,255/255,1)
RoundedRectangle:
pos: self.pos
size: self.size
radius: [40]
BoxLayout:
orientation: "vertical"
size: root.width, root.height
padding: 0, 10, 10, 10
border: 50
border_color: (1,1,1,1)
Label:
text: "Good job"
color: 0,0,0,1
font_size: 16
CloseButton:
text: "Close"
color: 0,0,0,1
size_hint: (None , None)
width: 105
height: 40
pos_hint: {'center_x':0.5}
on_release: root.dismiss()
<MyLayout>:
BoxLayout:
orientation: "vertical"
size: root.width, root.height
padding: 20,40
#spacing: 20
Label:
font_size: 20
text: 'Click the button'
color: 0, 0, 0, 1
MyButton:
font_size: 20
text: "Button"
color: (0,0,0,1)
size_hint: (None , None)
width: 250
height: 50
pos_hint: {'center_x':0.5}
on_release: Factory.MyPopup().open()
<CloseButton#Button>:
background_color: (0,0,0,0)
background_normal: ''
canvas.before:
Color:
rgba:(252/255,131/255,87/255,1)
RoundedRectangle:
pos: self.pos
size: self.size
radius: [20]
<MyButton#Button>
background_color: (0,0,0,0)
background_normal: ''
canvas.before:
Color:
rgba:(252/255,131/255,87/255,1)
RoundedRectangle:
pos: self.pos
size: self.size
radius: [25]
Remove the canvas.before from the first part of the Popup and add it to the BoxLayout. Adjust the size and position of the canvas.before to make it cover the default background.
Here is the modified Popup definition that will work.
<MyPopup#Popup>
auto_dismiss: False
title: ""
separator_height: 0
size_hint: 0.8, 0.4
BoxLayout:
orientation: "vertical"
size: root.width, root.height
padding: 0, 10, 10, 10
border: 50
border_color: (1,1,1,1)
canvas.before:
Color:
rgba: 1, 1, 1, 1
RoundedRectangle:
pos: self.x - 20, self.y - 20
size: self.width + 40, self.height + 60
radius: [40]
Label:
text: "Good job"
color: 0,0,0,1
font_size: 16
CloseButton:
text: "Close"
color: 0,0,0,1
size_hint: (None , None)
width: 105
height: 40
pos_hint: {'center_x':0.5}
on_release: root.dismiss()
I was trying to designing a homes creen with canvas in kivyMD and I had succeeded to create ellipses up and down, but now I keep trying to display other contents on the screen but nothing is displayed no matter what position I put it in. My kv code is down below...
Template = '''
MDFloatLayout:
MDFloatLayout:
pos_hint: {'center_x':0,'center_y': 1.2}
canvas.before:
Color:
rgb: (132/255, 0, 117/255, 0)
Ellipse:
pos: self.pos
size: self.size[0]*2, self.size[0]/1.75
source: "test.jpg"
#This MDLabel is one of the contents not being displayed
MDLabel:
pos_hint: {'center_x': .23, 'center_y':2.9}
text: '568 followers'
bold: True
MDFloatLayout:
pos_hint: {'center_x':0, 'center_y':0}
canvas:
Color:
rgb: (223/255, 237/255, 240/255, 0)
Ellipse:
pos: self.pos
size: self.size[0]*2, self.size[0]* 1.95
#This FloatLayout below isnt being displayed too
MDFloatLayout:
size_hint: None, None
size: dp(200), dp(240)
pos_hint: {'center_x': .3, 'center_y':.3}
radius: [dp(20)]*4
md_bg_color: 250/255, 250/255, 250/255, 0
Most of your widgets in the kv you posted fill the entire screen, hiding anything behind them. Note that the default size_hint is (1,1). Also, the pos_hint for the MDLabel:
pos_hint: {'center_x': .23, 'center_y':2.9}
sets the center of the MDLabel well beyond the top of the display.
Try changing size_hint from the default and adjusting pos_hint. Not knowing what your goal is, I have modified your kv just to make everything visible:
MDFloatLayout:
MDFloatLayout:
pos_hint: {'center_x':0,'center_y': 1.2}
canvas.before:
Color:
rgb: (132/255, 0, 117/255, 0)
Ellipse:
pos: self.pos
size: self.size[0]*2, self.size[0]/1.75
source: "test.jpg"
#This MDLabel is one of the contents not being displayed
MDLabel:
pos_hint: {'right': 1, 'y':0}
size_hint: 0.2, 0.2
text: '568 followers'
bold: True
MDFloatLayout:
pos_hint: {'center_x':0, 'center_y':0}
size_hint: 0.5, 0.5
canvas:
Color:
rgb: (223/255, 237/255, 240/255, 0)
Ellipse:
pos: self.pos
size: self.size[0]*2, self.size[0]* 1.95
#This FloatLayout below isnt being displayed too
MDFloatLayout:
size_hint: None, None
size: dp(200), dp(240)
pos_hint: {'center_x': .3, 'center_y':.3}
radius: [dp(20)]*4
md_bg_color: 250/255, 250/255, 250/255, 0
App icon
I have designed a sample code in which I am using my app icon but it looks very tiny. Right now my icon size is 100 x 36. When I run the program, icon looks really very tiny. I am trying to increase the size of it so it should be visible to us.
Border Box around the Text
And also I need to border the text only with box but the border is created to whole label area.
Problems
Is it possible to increase the size of icon?
I need only to box the label text.
My sample code:
from kivy.uix.floatlayout import FloatLayout
from kivy.app import App
from kivy.lang import Builder
Builder.load_string('''
<MainScreen>:
GridLayout:
orientation: 'vertical'
cols: 1
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
GridLayout:
padding: [10, 10, 10, 10]
spacing: [10,10]
orientation: 'vertical'
cols: 1
size_hint: 1, .1
canvas:
Color:
rgba: .1, .1, 1, .9
Line:
width: 1.
rectangle: (self.x, self.y, self.width, self.height)
Label:
text: 'INPUTS'
color: 0,0,0,1
GridLayout:
padding: [10, 10, 10, 10]
spacing: [10,10]
orientation: 'vertical'
cols: 1
size_hint: 1, .1
canvas:
Color:
rgba: .1, .1, 1, .9
Line:
width: 1.
rectangle: (self.x, self.y, self.width, self.height)
Label:
text: 'OUTPUTS'
color: 0,0,0,1
''')
class MainScreen(FloatLayout):
def __init__(self, **kwargs):
super(MainScreen, self).__init__(**kwargs)
class TestApp(App):
def build(self):
self.icon = 'fif.png'
self.title = 'sample_v_1.1'
return MainScreen()
if __name__ == "__main__":
TestApp().run()
App Icon Size
I don't think that you can change the icon's size for your application.
Application » icon
icon
Icon of your application. The icon can be located in the same
directory as your main file.
Recommended 256x256 or 1024x1024? for GNU/Linux and Mac OSX 32x32 for
Windows7 or less. <= 256x256 for windows 8 256x256 does work (on
Windows 8 at least), but is scaled down and doesn’t look as good as a
32x32 icon.
Box Border around Text
To draw a box surrounding the text use the following:
Snippet - kv file
Label:
canvas:
Color:
rgba: .1, .1, 1, .9
Line:
width: 1.
rectangle: (int(self.center_x - self.texture_size[0] / 2.), int(self.center_y - self.texture_size[1] / 2.), self.texture_size[0], self.texture_size[1])
Example
main.py
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.lang import Builder
Builder.load_string('''
<MainScreen>:
inputs: inputs
outputs: outputs
GridLayout:
orientation: 'vertical'
cols: 1
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
GridLayout:
padding: [10, 10, 10, 10]
spacing: [10,10]
orientation: 'vertical'
cols: 1
size_hint: 1, .1
Label:
canvas:
Color:
rgba: .1, .1, 1, .9
Line:
width: 1.
rectangle: (int(self.center_x - self.texture_size[0] / 2.), int(self.center_y - self.texture_size[1] / 2.), self.texture_size[0], self.texture_size[1])
id: inputs
text: 'INPUTS'
color: 0,0,0,1
GridLayout:
padding: [10, 10, 10, 10]
spacing: [10,10]
orientation: 'vertical'
cols: 1
size_hint: 1, .1
Label:
canvas:
Color:
rgba: .1, .1, 1, .9
Line:
width: 1.
rectangle: (int(self.center_x - self.texture_size[0] / 2.), int(self.center_y - self.texture_size[1] / 2.), self.texture_size[0], self.texture_size[1])
id: outputs
text: 'OUTPUTS'
color: 0,0,0,1
''')
class MainScreen(FloatLayout):
pass
class TestApp(App):
icon = 'ac013.png'
title = 'sample_v_1.1'
def build(self):
return MainScreen()
if __name__ == "__main__":
TestApp().run()
Output
I would like to ask your help.
The scrollable structure under the link is what I want to generate.
As the Scrollview accept only one element, I used a GridLayout. Somehow I cannot put any Boxlayout in the GridLayout.
Could you help me? Did I made a mistake? Should I use maybe an other Layout? if yes, which one?
Thank you.
Here is the output of my .kv file: http://imgur.com/etilRPg
Here is the result, if I change cols:1 to cols:2 : http://imgur.com/ihWla4Y
Here is the code I tried in the .kv file:
#:kivy 1.8.0
RootWidget:
# import container
container: container
# fill container
BoxLayout:
id: container
orientation: 'vertical'
padding: 0
spacing: 3
ScrollView:
size_hint: 1, 1
pos_hint: {'center_x': .5, 'center_y': .5}
GridLayout:
cols: 1
padding: 0
spacing: 3
size_hint: 1, None
height: self.minimum_height
do_scroll_x: False
BoxLayout:
height: 260
orientation: 'horizontal'
canvas.before:
Color:
rgb: 0.7, 0.7, 0.9
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
height: 260
orientation: 'horizontal'
canvas.before:
Color:
rgb: 0.7, 0.7, 0.9
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
height: 260
orientation: 'horizontal'
canvas.before:
Color:
rgb: 0.7, 0.7, 0.9
Rectangle:
size: self.size
pos: self.pos
#type
Label:
height: 260
size_hint: 1, None
text: 'Typ'
BoxLayout:
height: 260
orientation: 'horizontal'
canvas.before:
Color:
rgb: 0.7, 0.7, 0.9
Rectangle:
size: self.size
pos: self.pos
If you want to set height or width or anything else with sizing you need to do something first in a widget you want to set it for:
size_hint: None, None
This will disable setting those properties according to parent's size and some other stuff i.e. number of widgets in parent (three widgets = parent's size / 3 for each) at least for layouts such as BoxLayout or GridLayout. Check docs for more.
Alternatively use size_hint_x: None or size_hint_y: None and let the other part be set automatically if you only want to set one of height or width.
Good Evening All
Just wondering if someone can share the info, started playing around with kivy, all I am trying to so is have a basic canvas widget and position a rectangle on the top of the screen, using co-ord 0,0 draws it as the bottom.
it also raised the question that I can set near the top by using, say 0, 400, but how to you make it on the top all the time and resolution independent. I am trying to make a small app as part of learning it and re-enforcing what I've learnt in python so far.
Thanks for any insight
canvas:
Rectangle:
pos: self.pos
size: self.width , self.height / 10
Label:
font_size: 25
top: root.top
text:"Score"
Label:
font_size: 25
top: root.top
text:"4000 points"
In kivy canvas point (0, 0) is actually bottom left one. You can calculate top position yourself easily:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.properties import ListProperty
kv_string = '''
<MyWidget>:
r_size: [root.size[0]/2, root.size[1]/2]
canvas:
Color:
rgb: 0.1, 0.6, 0.3
Rectangle:
size: root.r_size
pos: 0, root.size[1]-root.r_size[1]
'''
Builder.load_string(kv_string)
class MyWidget(Widget):
r_size = ListProperty([0, 0])
class TestApp(App):
def build(self):
return MyWidget()
if __name__ == '__main__':
TestApp().run()
You can also use FloatLayout, set resolution independent subwidget sizes and positions using pos_hint and size_hint attributes, then draw something within borders of each such widget:
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.lang import Builder
kv_string = '''
<MyWidget>:
Widget:
pos_hint: {'center_y': 0.5, 'center_x': 0.5}
size_hint: 0.2, 0.2
canvas:
Color:
rgb: 0.1, 0.6, 0.3
Rectangle:
size: self.size
pos: self.pos
Widget:
pos_hint: {'center_y': 0.5, 'center_x': 0.2}
size_hint: 0.2, 0.2
canvas:
Color:
rgb: 0.1, 0.6, 0.3
Rectangle:
size: self.size
pos: self.pos
Widget:
pos_hint: {'center_y': 0.5, 'center_x': 0.8}
size_hint: 0.2, 0.2
canvas:
Color:
rgb: 0.1, 0.6, 0.3
Rectangle:
size: self.size
pos: self.pos
Widget:
pos_hint: {'center_y': 0.2, 'center_x': 0.5}
size_hint: 0.2, 0.2
canvas:
Color:
rgb: 0.1, 0.6, 0.3
Rectangle:
size: self.size
pos: self.pos
Widget:
pos_hint: {'center_y': 0.8, 'center_x': 0.5}
size_hint: 0.2, 0.2
canvas:
Color:
rgb: 0.1, 0.6, 0.3
Rectangle:
size: self.size
pos: self.pos
'''
Builder.load_string(kv_string)
class MyWidget(FloatLayout):
pass
class TestApp(App):
def build(self):
return MyWidget()
if __name__ == '__main__':
TestApp().run()