I am building a simple Kivy app with a couple of screens. The first screen has a couple of buttons which, when clicked, move to the second screen. The second screen has a text input widget and a button inside a Float Layout. The layout is loaded as a root widget by an explicit call to the kv file through Builder.
Everything was working fine and I added a 'focus: True' tag in the text input attributes. The app worked fine and I could type in the text input field with focus set as True. However, the text input field suddenly stopped working without any change in code or layout. I was not sure and searched Google for a couple of probable solutions, none of which worked:
Removed the 'focus: True' attribute and reloaded the app but the text input field still did not respond. I was unable to type anything from my keyboard.
Another post pointed out that the kv file was being loaded twice resulting in erratic behaviour. I tried to remove the explicit Builder file call and returned the root widget (Screen Manager) in the main code. However, it messed up my entire app and only showed a black empty screen.
Can you please advise as to what I may be doing wrong? The code is provided below:
Python Code:
from kivy.config import Config
Config.set('kivy','window_icon','sivaicon.png')
Config.set('graphics', 'resizable', True)
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.lang.builder import Builder
class SivaLoginScreen(Screen):
def twitter_authentication(self):
App.get_running_app().root.current='verify_screen'
def linkedin_authentication(self):
App.get_running_app().root.current='verify_screen'
class SivaVerifyScreen(Screen):
pass
class SivaTabbedScreen(Screen):
pass
class SivaScreenManager(ScreenManager):
pass
class ImageButton(ButtonBehavior, Image):
pass
# Tell Kivy to directly load a file. If this file defines a root widget, it will be returned by the method.
root_widget = Builder.load_file('siva.kv')
class SivaApp(App):
def build(self):
# Initialize root widget
return root_widget
if __name__ == '__main__':
# Run application
SivaApp().run()
kv file:
SivaScreenManager:
SivaLoginScreen:
SivaVerifyScreen:
SivaTabbedScreen:
<ImageButton>:
keep_ratio: True
<SivaLoginScreen>:
name: 'login_screen'
canvas.before:
Color:
rgba: 195/255, 60/255, 35/255, 1
Rectangle:
pos: self.pos
size: self.size
FloatLayout:
size: root.width, root.height
Image:
id: login_logo_siva
source: 'images/sivalogo1.png'
keep_ratio: True
size_hint: 0.3, 0.3
pos_hint: {'center_x':0.5, 'center_y':0.75}
Label:
id: login_label_siva
pos: self.x*0.5-4, self.y*0.5+15
markup: True
font_name: 'roboto/Roboto-Medium.ttf'
text: '[color=#FDFD98]S.[/color][color=#B29DD9]I[/color][color=#FDFD98].[/color][color=#77DD77]V[/color][color=#FDFD98].[/color][color=#779ECB]A[/color]'
font_size: '40sp'
Label:
id: login_label_slogan1
pos: self.x*0.5-3, self.y*0.5-6
markup: True
font_name: 'roboto/Roboto-Regular.ttf'
text: '[color=#FDFD98]SLOGAN TEXT[/color]'
font_size: '13sp'
Label:
id: login_label_slogan2
pos: self.x*0.5-3, self.y*0.5-20
markup: True
font_name: 'roboto/Roboto-Regular.ttf'
text: '[color=#FDFD98]HEADLINE TEXT[/color]'
font_size: '13sp'
BoxLayout:
id:login_button_layout
orientation: 'horizontal'
size_hint: 0.2, 0.2
pos_hint: {'center_x':0.5, 'center_y':0.25}
ImageButton:
id: twitter_button
source: {'normal': 'images/twitter-96.png', 'down': 'images/twitter-96.png'} [self.state]
on_release: root.twitter_authentication()
ImageButton:
id: linkedin_button
source: {'normal': 'images/linkedin-96.png', 'down': 'images/linkedin-96.png'} [self.state]
on_release: root.linkedin_authentication()
<SivaVerifyScreen>:
name: 'verify_screen'
canvas.before:
Color:
rgba: 195/255, 60/255, 35/255, 1
Rectangle:
pos: self.pos
size: self.size
FloatLayout:
size: root.width, root.height
Label:
id: verify_label
markup: True
font_name: 'roboto/Roboto-Regular.ttf'
text: 'Paste the verification code'
font_size: '16sp'
pos_hint: {'center_x':0.5, 'center_y':0.7}
size_hint: 1, 0.4
TextInput:
id: verify_input
multiline: False
font_size: '30sp'
pos_hint: {'center_x':0.5, 'center_y':0.55}
size_hint: 0.5, 0.1
ImageButton:
id: verify_button
source: {'normal': 'images/lock-96.png', 'down': 'images/lock-96.png'} [self.state]
pos_hint: {'center_x':0.5, 'center_y':0.35}
size_hint: 0.5, 0.5
<SivaTabbedScreen>:
name: 'tabbed_screen'
FloatLayout:
size: root.width, root.height
Label:
pos: self.x*0.5, self.y*0.5
text: 'SECOND SCREEN'
font_size: '50sp'
Please advise. I am helplessly stuck. :(
Thanks in advance
Okay so this was the problem: Some of my widgets were overlapping each other thereby rendering the widgets underneath as unresponsive. In my case, a button widget was overlapping my textinput widget due to which I was unable to enter text in the textinput widget.
I used the Kivy inspector tool to identify the extent of the widgets' dimensions:
python3 main.py -m inspector
Use Ctrl+e to launch the inspector while the app is running and click on each widget to check its size, position and parent. I reduced the button widget's size and converted the float layout into a stacked box layout and this resolved the issue.