Im creating a very simple aplication for pratice, and I´m having some trouble with Kivy GUI.
I would like to get all the images on the same size,and if it´s possible creat aline that separetes all the vertical box layouts.
:
name:'Prices'
BoxLayout:
orientation:'vertical'
canvas.before:
Rectangle:
source:'back_azul.png'
pos: self.pos
size: self.size
BoxLayout:
orientation:'horizontal'
height:'30dp'
size_hint_y:None
Button:
size_hint_x:0.25
text:"Back to Menu"
opacity: 1 if self.state == 'normal' else .5
background_color:0,0,0,0
on_release:app.root.current="main"
font_size:20
BoxLayout:
background_color:0,10,10,1
padding:5
Image:
source:"camisa.jpg"
Label:
text:"01 Camisa social"
bold:True
font_size:11
Label:
text:"R$: 8,00"
font_size:15
BoxLayout:
padding:5
Image:
source:"peca.jpg"
Label:
text:"01 Camisa Polo"
font_size:11
bold:True
Label:
text:"R$:6,00"
font_size:10
BoxLayout:
padding:5
Image:
source:"terno.jpg"
Label:
text:"01 Terno c/Calca"
font_size:11
bold:True
Label:
text:"R$: 28,00"
font_size:10
BoxLayout:
padding:5
Image:
source:"vestido.jpg"
Label:
text:"01 Vestido"
font_size:11
bold:True
Label:
text:"R$: 70,00"
font_size:10
Same width of the images:
Option 1: you can set the width, but must set the corresponding size hint to None.
Image:
size_hint_y: None
source:"Astronaut3.jpg"
width: 100
allow_stretch: True
Option2: use the size_hint
Image:
source:"Astronaut2.jpg"
size_hint_x: 0.4
allow_stretch: True
Creating a line
Again there are different options. You could use the Line from kivy Graphics. An easy and straightforward solution is to use a Label and make it your color of choice and then make it really small.
Label:
canvas.before:
Color:
rgba: (1,1,1,1)
Rectangle:
size: self.size
pos: self.pos
size_hint_y: None
height: 1
Sample App
Here are all the things mentioned in one sample App. It is not good practice to repeat yourself when coding, but I am doing it here to mirror your question as close as possible.
sample app example:
from kivy.app import App
from kivy.base import Builder
from kivy.properties import StringProperty
from kivy.uix.boxlayout import BoxLayout
Builder.load_string("""
<rootwi>:
orientation:'vertical'
BoxLayout:
padding:5
Image:
source:"Astronaut2.jpg"
size_hint_x: 0.4
allow_stretch: True
Label:
text:"01 Camisa Polo"
font_size:11
bold:True
Label:
text:"R$:6,00"
font_size:10
Label:
canvas.before:
Color:
rgba: (1,1,1,1)
Rectangle:
size: self.size
pos: self.pos
size_hint_y: None
height: 1
BoxLayout:
padding:5
Image:
source:"Astronaut3.jpg"
size_hint_x: 0.4
allow_stretch: True
Label:
text:"01 Camisa Polo"
font_size:11
bold:True
Label:
text:"R$:6,00"
font_size:10
Label:
canvas.before:
Color:
rgba: (1,1,1,1)
Rectangle:
size: self.size
pos: self.pos
size_hint_y: None
height: 1
BoxLayout:
padding:5
Image:
size_hint_y: None
source:"Astronaut2.jpg"
width: 100
allow_stretch: True
Label:
text:"01 Camisa Polo"
font_size:11
bold:True
Label:
text:"R$:6,00"
font_size:10
Label:
canvas.before:
Color:
rgba: (1,1,1,1)
Rectangle:
size: self.size
pos: self.pos
size_hint_y: None
height: 1
BoxLayout:
padding:5
Image:
size_hint_y: None
source:"Astronaut3.jpg"
width: 100
allow_stretch: True
Label:
text:"01 Camisa Polo"
font_size:11
bold:True
Label:
text:"R$:6,00"
font_size:10
""")
class rootwi(BoxLayout):
pass
class MyApp(App):
def build(self):
return rootwi()
if __name__ == '__main__':
MyApp().run()
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've created an app with a main page that is going to have multiple sections with recycleView data. I have added the first but when I try to add a second (eventually adding 4 to replace the APPS, OTHER, etc sections) the second recycleView shows up on top of the first one (see top left of image) instead of next to it like I would expect. I tried putting both of the recycleView widgets inside a boxlayout but the second RV still overlays the top.
The information should be filling the second box on the right here instead of overlaying on the far top left
Screen:
MDNavigationLayout:
ScreenManager:
id: screenManager
Screen:
name: "monitor"
CoverImage:
source: 'images/monitor.png'
# Darken the photo
canvas:
Color:
rgba: 0, 0, 0, .6
Rectangle:
pos: self.pos
size: self.size
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: 'Administration'
left_action_items: [["menu", lambda x: nav_drawer.set_state('toggle')]]
elevation:5
BoxLayout:
ServerListWidget:
MountListWidget:
Please let me know if you need to see any additional code. I've also tried using a GridLayout with 2 cols
<MountListWidget>:
id: mountListWidget
recycleView: recycleView_mounts
BoxLayout:
padding: dp(20)
spacing: dp(10)
BoxLayout:
spacing: dp(10)
BoxLayout:
canvas.before:
Color:
rgba: 1,1,1,.1
# Use a float layout to round the corners
RoundedRectangle:
pos: self.pos
size: self.size
RecycleView:
id: recycleView_mounts
viewclass: 'MountWidget'
RecycleGridLayout:
cols: 1
default_size: self.parent.width, dp(60)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
spacing: dp(155), dp(0)
<ServerListWidget>:
id: serverListWidget
recycleView: recycleView
BoxLayout:
padding: dp(20)
spacing: dp(10)
BoxLayout:
orientation: "horizontal"
BoxLayout:
canvas.before:
Color:
rgba: 1,1,1,.1
# Use a float layout to round the corners
RoundedRectangle:
pos: self.pos
size: self.size
RecycleView:
id: recycleView
viewclass: 'ServerWidget'
RecycleGridLayout:
cols: 1
default_size: self.parent.width / 5, dp(60)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
spacing: dp(155), dp(0)
<CoverImage#CoverBehavior+Image>:
reference_size: self.texture_size
<MountWidget>:
BoxLayout:
#size_hint_max_x: dp(360)
size_hint_min_x: dp(150)
orientation: "horizontal"
BoxLayout:
orientation: "horizontal"
Button:
# Use the on_press to print troubleshooting info, otherwise comment out
on_press: print(self.background_color)
padding: dp(10), dp(10)
text_size: self.size
font_size: dp(18)
background_color: .5,1,1,.6
halign: "left"
valign: "top"
size: 1,1
text: str(root.name)
bold: True
color: (1,1,1)
<ServerWidget>:
BoxLayout:
#size_hint_max_x: dp(360)
size_hint_min_x: dp(150)
orientation: "horizontal"
BoxLayout:
orientation: "horizontal"
Button:
# Use the on_press to print troubleshooting info, otherwise comment out
on_press: print(self.background_color)
padding: dp(10), dp(10)
text_size: self.size
font_size: dp(22) if root.has_issue else dp(18)
background_color: .5,1,1,.6 #utils.get_random_color(alpha=.6)
halign: "left"
valign: "top"
size: 1,1
# Show last 4 of server name
text: str(root.name).upper()[-4:]
bold: True
color: utils.get_color_from_hex(warn) if root.has_issue else (1,1,1)
Button:
background_color: .5,1,1,.6
text_size: self.size
font_size: dp(22) if root.work >= 85 and root.work < 90 else dp(26) if root.work >= 90 else dp(18)
valign: "center"
halign: "center"
text: str(root.work)
padding: dp(8), dp(8)
bold: True if root.work > 90 else False
# yellow red white
color: (1,1,0) if root.work >= 85 and root.work < 90 else utils.get_color_from_hex(warn) if root.work >= 90 else (1,1,1)
I want to create an app in Python Kivy but I have stuck in some part. I want some additional show-ups in my app. Briefly, that is a selection app. So after make some sellections and and press "calculate" button, I want to show some hidden results. And when you confirm those results you should press "confirm" button that shows new selections which were hidden as well.
I can make it with BooleanProperty but in that case when height: "0dp" and opacity: 0, it still keeps unwanted empty space in widget. How can I get rid of the empty space ?
little comment: when you make opticity 1 while height:"0dp" remain, you will see they are still there. height 0 is not working properly.
here my main.py
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.checkbox import CheckBox
from kivy.uix.stacklayout import StackLayout
from kivy.uix.label import Label
from kivy.uix.popup import Popup
from kivy.lang import Builder
from kivy.properties import BooleanProperty
from kivy.uix.screenmanager import ScreenManager, Screen
class MainWindow(Screen):
pass
def btn(self):
popup = Popup(content=Label(text='Wrong Password'),
size_hint=(None, None), size=(200, 200))
popup.bind(on_touch_down=popup.dismiss)
popup.open()
class SecondWindow(Screen):
isShownMenu = BooleanProperty(True)
bisShownMenu = BooleanProperty(True)
class WindowManager(ScreenManager):
pass
kv = Builder.load_file("my.kv")
class MyMainApp(App):
def build(self):
return kv
if __name__== "__main__":
MyMainApp().run()
and here is my.kv:
WindowManager:
MainWindow:
SecondWindow:
<ScrollViewExample#ScrollView>:
SecondWindow:
size_hint: 1, None
height: self.minimum_height
<Button>:
size_hint: .35 , 1
height: "20dp"
width: "20dp"
pos_hint: {"center_x": .5}
<MainWindow>:
name:"main"
BoxLayout:
canvas.before:
Rectangle:
pos: self.pos
size: self.size
orientation: "vertical"
Image:
source:"vgs.png"
size_hint: 1, None
height: "110dp"
allow_stretch: True
keep_ratio: False
AnchorLayout:
anchor_x:"center"
anchor_y:"center"
BoxLayout:
orientation: "vertical"
spacing: "10dp"
size_hint: .8,.3
BoxLayout:
orientation: "horizontal"
Label:
text: "Username:"
color: 0,0,0,1
TextInput:
id: username
text: "***"
multiline: False
BoxLayout:
orientation: "horizontal"
Label:
text: "Password:"
color: 0,0,0,1
TextInput:
id: password
text: "***"
multiline: False
BoxLayout:
#orientation:"horizontal"
CheckBox:
color: 0,0,0,1
Label:
text: "Remember me"
color: 0,0,0,1
Button:
size_hint: .35 , 1
text: "Login"
pos_hint: {"center_x": .5}
on_release:
#root.btn() if username.text!="batu" or password.text!="1010" else None
app.root.current= "second" #if username.text=="batu" and password.text=="1010" else "main"
root.manager.transition.direction="left"
<SecondWindow>:
name:"second"
ScrollView:
GridLayout:
cols:1
height: self.minimum_height
row_default_height: "60dp"
size_hint_y: None
spacing:"10dp"
canvas.before:
Rectangle:
pos: self.pos
size: self.size
Image:
source:"vgs.png"
size_hint: 1, None
height: "110dp"
allow_stretch: True
keep_ratio: False
BoxLayout:
pading:"10dp"
spacing:"10dp"
orientation: "vertical"
BoxLayout:
orientation: "horizontal"
Label:
text:"Solid Content:"
color: 0,0,0,1
TextInput:
text:"enter %"
color: 0,0,0,1
BoxLayout:
orientation: "horizontal"
Label:
text:"Pressure:"
color: 0,0,0,1
TextInput:
text:"enter BAR"
color: 0,0,0,1
Button:
text:" Model Selection"
height: "20dp"
width: "20dp"
Button:
text:" Screen Selection"
Button:
text:"Rotor Selection"
Button:
text:"Motor & Reduction Selection"
Button:
text:"Calculate Selections"
on_press: root.isShownMenu = not root.isShownMenu
BoxLayout:
pading:"10dp"
spacing:"10dp"
size_hint: 1, None
height: "0dp" if root.isShownMenu else "80dp"
opacity: 0 if root.isShownMenu else 1
orientation: "vertical"
BoxLayout:
orientation:"horizontal"
Label:
text:"Calculated Flow:"
color: 0,0,0,1
Label:
text:"enter %"
color: 0,0,0,1
BoxLayout:
orientation:"horizontal"
Label:
text:"Calculated Pressure:"
color: 0,0,0,1
Label:
text:"00000"
color: 0,0,0,1
BoxLayout:
orientation:"horizontal"
Label:
text:"Fibre Lenght:"
color: 0,0,0,1
Label:
text:"000000"
color: 0,0,0,1
Button:
on_press: root.bisShownMenu = not root.bisShownMenu
text:"Confirm"
BoxLayout:
size_hint: 1, None
height: "0dp" if root.bisShownMenu else "80dp"
opacity: 0 if root.bisShownMenu else 1
orientation:"horizontal"
Label:
text:"cutter head material"
color: 0,0,0,1
Button:
text:"1.secim"
Button:
text:"2.secim"
Button:
text:"3.secim"
Button:
text:"4.secim"
BoxLayout:
size_hint: 1, None
height: "0dp" if root.bisShownMenu else "80dp"
opacity: 0 if root.bisShownMenu else 1
orientation:"horizontal"
Label:
text:"screen material"
color: 0,0,0,1
Button:
text:"1.secim"
Button:
text:"2.secim"
Button:
text:"3.secim"
Button:
text:"4.secim"
BoxLayout:
size_hint: 1, None
height: "0dp" if root.bisShownMenu else "80dp"
opacity: 0 if root.bisShownMenu else 1
orientation:"horizontal"
Label:
text:"blade material"
color: 0,0,0,1
Button:
text:"1.secim"
Button:
text:"2.secim"
Button:
text:"3.secim"
Button:
text:"4.secim"
BoxLayout:
size_hint: 1, None
height: "0dp" if root.bisShownMenu else "80dp"
opacity: 0 if root.bisShownMenu else 1
orientation:"horizontal"
Label:
text:"pot material"
color: 0,0,0,1
Button:
text:"1.secim"
Button:
text:"2.secim"
Button:
text:"3.secim"
Button:
text:"4.secim"
Button:
size_hint: .35 , 1
text: "Login"
pos_hint: {"center_x": .5}
on_release:
app.root.current= "main"
root.manager.transition.direction="right"
sorry for long codes. maybe it helps you in some parts.
I have solved my problem.
Well, if you want to add a different class to main your main class with a button or something, you should use "add_widget". But while you doing it, you need to convert your class to objectproperty first and than, use ids for id of your main widget;
cal2= ObjectProperty()
def btn4(self):
self.cal2 = MaterialS() #MaterialS is my class with different widget
self.ids.scd.add_widget(self.cal2, index=0) #scd is the id of my main widget, index =0 help me to insert to the bottom
If you look under the first GridLayout there is an Image widget. I'm trying to get it to move to the right side of the screen. Any help is appropriated. Here's the code. The id of the widget I need on the right hand side is id=image. I can't seem to move it at all.
I'm giving more details because stackoverflow want's it. I think the above is pretty detailed really stackoverflow, but your in charge so here is more text.
Thank you everyone.
from kivy.lang import Builder
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen, NoTransition
Builder.load_string("""
<ClientScreen>:
GridLayout:
id: main_grid_layout
orientation: 'vertical'
cols: 1
Label:
id: name_label
text: '<NO MENU NAME>'
size_hint_y: None
size: self.texture_size
halign: 'left'
valign: 'center'
text_size: self.size
padding_x: 35
canvas.before:
Color:
rgb: .6, .6, .6
Rectangle:
pos: self.pos
size: self.size
Image:
id: image
pos_hint: {'right': 0.5}
ScrollView:
id: text_scroll_view
bar_width: 10
size: self.size
GridLayout:
id: text_grid_layout
orientation: 'vertical'
cols: 1
size_hint_y: None
height: self.minimum_height
ScrollView:
size: self.size
bar_width: 10
size_hint_y: 0.40
GridLayout:
id: action_grid_layout
# padding: [10, 10, 10, 10]
orientation: 'vertical'
cols: 1
size_hint_y: None
# row_default_height: 30
height: self.minimum_height
""")
class LoginScreen(Screen):
pass
class ClientScreen(Screen):
pass
class MyApp(App):
def build(self):
from kivy.core.window import Window
sm = ScreenManager()
sm.transition = NoTransition()
global CLIENT_SCREEN
LOGIN_SCREEN = LoginScreen(name='login')
CLIENT_SCREEN = ClientScreen(name='client')
sm.add_widget(LOGIN_SCREEN)
sm.add_widget(CLIENT_SCREEN)
sm.current = 'client'
Window.size = (300, 120)
self.title = 'xNemesis Client V0'
return sm
MyApp().run()
In the kv file, do the following. Please refer to the example below for details.
Replace GridLayout: with BoxLayout: because GridLayout with cols: 1 has the similar presentation as BoxLayout with orientation: 'vertical'.
Remove cols: 1
At Image:, add size_hint_x: 0.4
Replace pos_hint: {'right': 0.5} with pos_hint: {'right': 1}
Note
GridLayout does not has an attribute called orientation.
Example
main.py
from kivy.lang import Builder
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen, NoTransition
Builder.load_string("""
<ClientScreen>:
BoxLayout:
id: main_grid_layout
orientation: 'vertical'
Label:
id: name_label
text: '<NO MENU NAME>'
size_hint_y: None
size: self.texture_size
halign: 'left'
valign: 'center'
text_size: self.size
padding_x: 35
canvas.before:
Color:
rgb: .6, .6, .6
Rectangle:
pos: self.pos
size: self.size
Image:
id: image
source: 'raspberrypi.png'
size_hint_x: 0.4
pos_hint: {'right': 1}
ScrollView:
id: text_scroll_view
bar_width: 10
size: self.size
GridLayout:
id: text_grid_layout
orientation: 'vertical'
cols: 1
size_hint_y: None
height: self.minimum_height
ScrollView:
size: self.size
bar_width: 10
size_hint_y: 0.40
GridLayout:
id: action_grid_layout
# padding: [10, 10, 10, 10]
orientation: 'vertical'
cols: 1
size_hint_y: None
# row_default_height: 30
height: self.minimum_height
""")
class LoginScreen(Screen):
pass
class ClientScreen(Screen):
pass
class MyApp(App):
def build(self):
from kivy.core.window import Window
sm = ScreenManager()
sm.transition = NoTransition()
global CLIENT_SCREEN
LOGIN_SCREEN = LoginScreen(name='login')
CLIENT_SCREEN = ClientScreen(name='client')
sm.add_widget(LOGIN_SCREEN)
sm.add_widget(CLIENT_SCREEN)
sm.current = 'client'
Window.size = (300, 120)
self.title = 'xNemesis Client V0'
return sm
MyApp().run()
Output
I'm usng kivy and the kv languge to make a GUI, I'm still only new to kivy.
In the image below the the buttons were in the black bit on the right side of the GUI but the scrollview buttons on fitted half of the height of the screen to I put an extra floatlayout in the rule and indented everything but now all the buttons are on the wrong side of the screen.
#:kivy 1.9.0
GridLayout:
rows: 1
LeftArea:
RightArea:
<LeftArea#FloatLayout>:
canvas:
Color:
rgb: 0, 1, 0
Rectangle:
size: self.size
pos: self.pos
Image:
source: 'moneyswags.gif'
size: self.size
pos: self.pos
<RightArea#GridLayout>:
cols: 1
size_hint_x: 0.3
spacing: '10dp'
FloatLayout:
ScrollView:
LinksGrid:
id: links_grid
BoxLayout:
cols: 1
rows: 2
GetLinksButton:
links_grid: links_grid
Clearlinkbuttons:
links_grid: links_grid
<LinksGrid#GridLayout>:
cols: 1
spacing: '5dp'
size_hint_y: None
height: self.minimum_height
<GetLinksButton>:
size_hint_y: 0.1
text: 'get links'
on_press: self.get_links()
<Clearlinkbuttons>:
size_hint_y: 0.1
text: 'clear links'
on_press: self.clear_links()
<LinkButton>:
size_hint_y: None
height: '80dp'