KivyMD, MDFloatingActionButton: correct placement - kivy

I've been trying to use floating action buttons alongside FileChooser:
import kivy
kivy.require("2.1.0")
from kivy.utils import platform
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
from kivymd.icon_definitions import md_icons
import os
USERPATH = os.path.expanduser("~")
if platform == "android":
from android.storage import primary_external_storage_path
from android.storage import secondary_external_storage_path
from android.permissions import request_permissions, Permission
USERPATH = primary_external_storage_path()
request_permissions(
[Permission.WRITE_EXTERNAL_STORAGE, Permission.READ_EXTERNAL_STORAGE]
)
KV = '''
#:kivy 2.1.0
#:set dark_gray (.5, .5, .5, 1)
MDBoxLayout:
orientation: "vertical"
MDTabs:
id: ps_tabs
TabList:
id: ps_tab_list
icon: "folder"
FileChooserListView:
id: ps_filechooser
canvas.before:
Color:
rgba: dark_gray
Rectangle:
size: self.size
pos: self.pos
MDFloatingActionButton:
id: fc_playdir
icon: "folder"
pos_hint: {"center_x": .4, "center_y": .5}
MDFloatingActionButton:
id: fc_playfile
icon: "file"
pos_hint: {"center_x": .6, "center_y": .5}
TabDetails:
id: ps_tab_details
icon: "book"
MDScrollView:
'''
class TabList(FloatLayout, MDTabsBase):
"""The engaged power supplies tab."""
class TabDetails(FloatLayout, MDTabsBase):
"""The engaged power supply details tab."""
class Ron(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
self.theme_cls.primary_palette = "Gray"
self.theme_cls.material_style = "M3"
if platform != "android":
self.root.ids.ps_tabs.lock_swiping = True
self.root.ids.ps_filechooser.rootpath = USERPATH
if __name__ == "__main__":
Ron().run()
Mouse clicks, as well as taps, shoot right through the buttons and into the FileChooser, no matter what I do. I tried placing the buttons into their own box layout, tried moving them up and down the widget tree. Nothing helps, while the buttons remain visible. Besides, on visiting the second tab, one can see two thick black button footprints. Something's very wrong and I can't think of anything else to try.

Related

When creating a widget with a button, how to specify an ID?

So I already make an expanding list when pressing a button, the problem is that I can´t find I way to add an icon in the right part(as the sample one) of the ListItem
Code:
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.core.window import Window
from kivymd.uix.screen import MDScreen
from kivymd.uix.list import OneLineRightIconListItem
from kivymd.uix.list.list import IconRightWidget
Window.size = (300, 500)
navigation_helper = """
<DietScreen>:
Screen:
MDBoxLayout:
orientation: 'vertical'
padding: ("5dp", "65dp" , "5dp", "5dp")
pos_hint: {"top": 1}
MDScrollView:
MDList:
id: box
OneLineRightIconListItem:
id: hola
text: 'testitem'
on_press:
IconRightWidget:
icon: "dots-vertical"
MDRaisedButton:
text: "Nueva Dieta"
md_bg_color: "white"
text_color: "black"
font_size: 16.2
pos_hint: {"right": 1, "bottom": 1}
on_press: root.buttonClicked()
Screen:
MDNavigationLayout:
ScreenManager:
id: scr
DietScreen:
"""
class DietScreen(MDScreen):
def buttonClicked(self):
newButt = OneLineRightIconListItem(text='Button')
self.ids.box.add_widget(newButt)
class DemoApp(MDApp):
def build(self):
screen = Builder.load_string(navigation_helper)
return screen
DemoApp().run()
I tried to specify an id to the ListItem created, and in the same method after addind the ListItem, add an IconRightWidget with an icon determined, but it results in an error.
Replace your:
newButt = OneLineRightIconListItem(text='Button')
With:
newButt = OneLineRightIconListItem(IconRightWidget(icon='dots-vertical'), text="Button")

How do I keep KivyMD bottom app toolbar on multiple screens

I am trying to keep the KivyMD toolbar on multiple screens, I have searched on stackoverflow before, and found out I may need to create a class and inherit it. Question: Is this right, if yes I would be very grateful is you could make a sample of the class, and if no I would equally be grateful for your opinion.. Thanks.
Here's my .py file
from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager, NoTransition
from kivy.core.window import Window
Window.size = (300, 500)
class Screen1(Screen):
pass
class Screen2(Screen):
pass
class TwoScreenApp(MDApp):
def build(self):
self.theme_cls.primary_palette = 'Gray'
self.sm = ScreenManager(transition=NoTransition())
self.sm.add_widget(Screen1(name='screen1'))
self.sm.add_widget(Screen2(name='screen2'))
return self.sm
def change_screen(self, screen):
self.sm.current = screen
"""I am using this self.sm method to link
icon to screen2 until I find a better way"""
TwoScreenApp().run()
and Here's my .kv file
ScreenManager:
Screen1:
Screen2:
<Screen1>
name: 'screen1'
MDBoxLayout:
md_bg_color: (240/255, 240/255, 240/255, 1)
orientation: 'vertical'
MDLabel:
halign: 'center'
text:
"""With the production of the Model T automobile,
Henry Ford had an unforeseen and tremendous
impact on American life. He became regarded
as an apt symbol of the transition from an
agricultural to an industrial America."""
MDBottomAppBar:
MDToolbar:
icon: "account-circle"
type: "bottom"
left_action_items: [["arrow-right", lambda x: app.change_screen("screen2")], ["alpha-x-circle", lambda x: x]]
right_action_items: [["alpha-y-circle", lambda x: x], ["arrow-left", lambda x: app.change_screen("screen1")]]
elevation: 10
<Screen2>
name: 'screen2'
md_bg_color: (240/255, 240/255, 240/255, 1)
MDBoxLayout:
md_bg_color: (255/255, 255/255, 255/255, 1)
orientation: 'vertical'
MDLabel:
halign: 'center'
text:
"""The development of mass-production techniques, which
enabled the company eventually to turn out a Model T
every 24 seconds; the frequent reductions in the price
of the car made possible by economies of scale; and
the payment of a living wage that raised workers
above subsistence and made them potential customers
for, among other things, automobiles—these innovations
changed the very structure of society."""
MDBottomAppBar:
MDToolbar:
title: "Title"
icon: "account-circle"
type: "bottom"
left_action_items: [["menu", lambda x: app.change_screen("screen1")]]

Recreating kivy app with scrollview to be used as screen with screenmanager

I've been trying to use scrollview in a screen, that will be used as part of an app and I managed to find the following code that creates an app with scrollview. But I'm not able to change it into screen class.
Here is the python code:
from kivy.app import App
from kivy.uix.button import Button
class ScrollButton(Button):
pass
class TestApp(App):
def build(self):
super(TestApp, self).build()
container = self.root.ids.container
for i in range(30):
container.add_widget(ScrollButton(text=str(i)))
return self.root
if __name__ == '__main__':
TestApp().run()
.kv file
ScreenManager:
Screen:
ScrollView:
size_hint: None, None
size: 600, 320
pos_hint: {'center_x': .5, 'center_y': .5}
GridLayout:
cols: 1
padding: 10
spacing: 10
height: self.minimum_height
size_hint: None, None
do_scroll_x: False
id: container
<ScrollButton>
size_hint: None, None
size: 600, 40
I would appreciate if anybody could show how to do it/give me some directions on how to change this to fit my purpose. Any alternative way of doing this is also welcome.
Many people recommend making the ScreenManager in the build method in the python file instead, here's how to do that:
Python
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.lang.builder import Builder
Builder.load_file("styling.kv")
class ScrollButton(Button):
pass
class MainScreen(Screen):
def on_kv_post(self, instance):
container = self.ids['container']
for i in range(30):
container.add_widget(ScrollButton(text=str(i)))
class TestApp(App):
def build(self):
sm = ScreenManager()
sm.add_widget(MainScreen())
return sm
if __name__ == '__main__':
TestApp().run()
Kivy
<ScrollButton>:
size_hint: None, None
size: 600, 40
<MainScreen>:
name: 'MainScreen'
ScrollView:
size_hint: None, None
size: 600, 320
pos_hint: {'center_x': .5, 'center_y': .5}
GridLayout:
cols: 1
padding: 10
spacing: 10
height: self.minimum_height
size_hint: None, None
do_scroll_x: False
id: container
Changes made
ScreenManager made in .py instead of .kv
Created Screen class in .py, so we can use python methods from the Screen
Widget adding moved to the Screen's class, using on_kv_post (this method is fired only one time when the Screen is ready)
Made the screen a template class instead of an object in .kv which the Screen in the python file uses to make the final Screen
PS: This is how it's usually done

Kivy >> On Press method triggered twice

For some reason the On Press event for the instance of Word_button is being triggered twice. The code below demonstrates this.
To repeat the problem.
run the code below
click on the "CREATE LIST OF WORD" button. This create a list of buttons. Each button has Boolean property if the word is correct or not.
then click on the word buttons. When clicking the button, the print statements print the correct boolean variable and the text of the button.
Problem:
The print commands are run twice.
from kivy.lang.builder import Builder
from kivy.uix.screenmanager import Screen
from kivy.properties import (NumericProperty, BooleanProperty)
from kivymd.app import MDApp
from kivymd.uix.button import MDRaisedButton
from kivymd.uix.boxlayout import MDBoxLayout
kv = '''
<Word_button#MDRaisedButton>:
pos_hint: {'center_x': .5}
size_hint: 1, 1
font_size: "16sp"
on_press: self.check_word()
<Words_Box#MDBoxLayout>:
pos_hint: {'center_x': .5}
size_hint: 1, 1
Screen:
id: spelling_screen
name: "spelling_screen"
MDBoxLayout:
orientation: 'vertical'
padding: dp(15)
spacing: dp(10)
MDLabel:
text: 'Words'
Words_Box:
id: words_box
orientation: 'vertical'
padding: dp(15)
spacing: dp(10)
MDRaisedButton:
text: 'CREATE LIST OF WORDS'
on_release: root.ids.words_box.add_word_buttons()
'''
class Word_button(MDRaisedButton):
correct = BooleanProperty()
def check_word(self):
print('Answer is ', self.correct)
print('Button Text is ', self.text)
class Words_Box(MDBoxLayout):
def add_word_buttons(self):
app = MDApp.get_running_app()
words = ['$WORD 1', 'WORD 2', 'WORD 3']
for word in words:
correct = False
if '$' in word:
correct = True
word = word[1:]
btn = Word_button(text=word, correct=correct)
self.add_widget(btn)
class RootScreen(Screen):
def __init__(self, **kwargs):
super(RootScreen, self).__init__(**kwargs)
class Main(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.screen = Builder.load_string(kv)
def build(self):
return self.screen
Main().run()
This was resolved by not naming the kv file main.kv.

Using builder in Kivy

I want to create a simple app that has GUI with a button that allows me to vibrate an android phone. Im using a .kv file for the layout and the Builder in my .yp file
.py file:
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
from kivy.lang import Builder
from plyer import vibrator
class AndroidApp(GridLayout):
def vibrate(self):
vibrator.vibrate()
kv = Builder.load_file("android_app.kv")
class MainApp(App):
def build(self):
return kv
if __name__ == "__main__":
MainApp().run()
.kv file:
#:import utils kivy.utils
<AndroidApp>:
FloatLayout:
canvas.before:
Color:
rgb: utils.get_color_from_hex("#ffffff")
Rectangle:
size: self.size
pos: self.pos
GridLayout:
rows: 1
cols: 2
Label:
text:"Android Vibrate"
Button:
text:"Android Vibrate"
on_press:
root.vibrate()
When I try to run the app, I get the following error:
enter image description here
This should be straightforward app but somehow I find a way to make it crash. The android_app.py & .kv files are in the same folder. Any ideas why the window wont be created? I aprreciate any help.
Thanks,
Alex
You have to return the main class, not the result from building. Here I'm using Builder.load_string() for convenience, and not importing player, but otherwise the only substantive change is that I changed return kv to return AndroidApp()
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
from kivy.lang import Builder
KV = '''
#:import utils kivy.utils
<AndroidApp>:
FloatLayout:
canvas.before:
Color:
rgb: utils.get_color_from_hex("#ffffff")
Rectangle:
size: self.size
pos: self.pos
GridLayout:
rows: 1
cols: 2
Label:
text:"Android Vibrate"
Button:
text:"Android Vibrate"
on_press:
root.vibrate()
'''
class AndroidApp(GridLayout):
def vibrate(self):
vibrator.vibrate()
Builder.load_string(KV)
class MainApp(App):
def build(self):
return AndroidApp()
if __name__ == "__main__":
MainApp().run()

Resources