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.
Related
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 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
I created a custom button as follows
#: import icon kivy.garden.iconfonts.icon
<custom_Button#Button>:
background_normal: 'icons/backg.png'
RelativeLayout:
size: self.parent.width, self.parent.height
top: self.parent.top
right: self.parent.right
Label:
canvas.before:
Color:
rgba: 1,1,1,1
Rectangle:
pos: self.pos
size: self.size
source: 'icons/restaurant.png'
color: 0,0,0,1
id: icon_name
markup: True
font_size: '20dp'
text: '{}'.format(icon('ion-settings', 38))
pos_hint: {'center_y': .5, 'right': .25}
size_hint: .18, .9
Label:
text:'Change Settings'
id: label
color: 0,0,0,1
text_size: self.size
halign: 'left'
valign: 'middle'
font_size: '20dp'
pos_hint: {'center_y': .5, 'right': 1}
size_hint: .7, .9
i want to be able to pass this (Custom_Button) as a child to different layouts, and change some of the attributes to what i want. Heres what i mean.
for example,
GridLayout:
custom_Button
custom_Button
custom_Button
But i would like to be able to explicitly change the label icon for the first label in the custom_Button, also the text in the second Label, so that for the three instances of the cutom_Button a different icon and text would be displayed. I really dont know how to achieve this. So please i need some help.
An example code will be very helpful. Thanks in advance...
First of all, do change the class name to something standard, like CustomButton. Then, define a new property containing the icon_source:
<CustomButton#Button>:
icon_source: 'icons/restaurant.png'
...
and refer to it later:
Rectangle:
pos: self.pos
size: self.size
source: root.icon_source
Then it's simple to change this for every instance, either in kv or in python:
GridLayout:
CustomButton:
icon_source: 'something/else.png'
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'
I want to create a Widget changing only the text of a label inside it, but all the ways I find how to change this are by changing it in the python code instead of reusing only Kivy objects.
So I have a widget like the following:
<AmiLabel#Label>
color: .1, .5, .8, 1
font_size: 16
<AmiTextInput#TextInput>
font_size: 16
<PropertyInputForm>:
BoxLayout:
size: root.size
pos: root.pos
orientation: 'horizontal'
AmiLabel:
text: 'Folder Location'
size_hint_x: .5
AmiTextInput:
text: 'None'
size_hint_x: .5
<MainFormWidget>:
BoxLayout:
size: root.size
pos: root.pos
id: foo_bar
padding: 5
spacing: 5
canvas:
Color:
rgb: (1, 1, 1)
Rectangle:
pos: self.pos
size: self.size
orientation: 'vertical'
AmiLabel:
height: 36
size_hint_x: 1
size_hint_y: None
text: 'Project Name'
PropertyInputForm:
height: 36
size_hint_x: 1
size_hint_y: None
# I WANT TO CHANGE THE TEXT OF THE LABEL IN HERE
PropertyInputForm:
height: 36
size_hint_x: 1
size_hint_y: None
# I WANT TO CHANGE THE TEXT OF THE LABEL IN HERE
All I want to is change the text of the label from another widget in another level without touching the python code.
¿Is that possible?
One simple way would be to add a new property to your PropertyInputForm and reference or set that.
<PropertyInputForm>:
new_text_property: ''
BoxLayout:
size: root.size
pos: root.pos
orientation: 'horizontal'
AmiLabel:
text: root.new_text_property
size_hint_x: .5
AmiTextInput:
text: 'None'
size_hint_x: .5
and later
PropertyInputForm:
height: 36
size_hint_x: 1
size_hint_y: None
new_text_property: 'whatever'
You may also need to declare new_text_property in the python class to have it be a StringProperty rather than an ObjectProperty, though even that is I think not necessary in kivy 1.8.