Search code examples
pythonuser-interfacekivykivy-language

Kivy - UI Issues

Trying to create a simple Kivy GUI with two screens: a title screen and a control screen with a number of buttons. The main problem is navigating the GUI and letting the builder function properly. I just get a black screen at the moment on run.

import kivy

kivy.require('1.10.0')

from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.stacklayout import StackLayout


class IntroScreen(Screen):
    pass


class ContScreen(Screen):
    pass


class ScreenManagement(ScreenManager):
    pass


backbone = Builder.load_file("main.kv")


class MasterApp(App):
    def build (self):
        return backbone


boApp = MasterApp()

if __name__ == "__main__":
    boApp.run()

with the main .kv

ScreenManagement:
    transition: FadeTransition

<IntroScreen>:
    name: "main"
    intro.kv

<ContScreen>:
    name: "cont"
    stacklayout.kv

and the example screen (intro.kv)

<IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            text: 'WELCOME'
            font_size: 50
            pos_hint={'x':0, 'y':0}

        Image:
            source=('mylogo.png')
            pos_hint: {'x':0,'y':0}

        Button:
            text: 'Initialize'
            font_size: 35
            on_release: app.root.current = "cont"

Still learning Kivy so I know I'm doing something wrong. Would appreciate help figuring this out. EDIT: NAVIGATION SOLVED

FOLLOW UP:

<IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            text: 'WELCOME'
            font_size: 50
            pos_hint: {'x':0, 'y':0}

        Image:
            source: 'mylogo.png'
            pos_hint: {'x':0,'y':0}

        Button:
            text: 'Initialize'
            font_size: 35
            on_release: root.manager.current = "cont"

Image not showing at all on the screen, just full button.

Solution

  • Solution - Control Widget Size & Position

    Use size_hint and pos_hint to control the widget's size and position.

    intro.kv

    <IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            size_hint: 1, 0.2
            text: 'WELCOME'
            font_size: 50
            pos_hint: {'top': 1}

        Image:
            source: 'kivy-logo.png'
            pos_hint: {'center_x': 0.5, 'center_y': 0.5}

        Button:
            size_hint: 1, 0.1
            text: 'Initialize'
            font_size: 35
            on_release: app.root.current = "cont"

    stacklayout.kv

    <ContScreen>:
    BoxLayout:
        orientation: 'vertical'

        Label:
            text: 'Cont Screen'

        Button:
            size_hint: 1, 0.1
            text: 'Main Screen'
            on_release: root.manager.current = 'main'

    Output - size_hint & pos_hint

    Img01 Img02

    Solution - Black Screen

    main.kv

    • Use include <file> to add the kv files into main.kv

    Kivy Land Directives » incude <file>

    include <file>

    Syntax:

    #:include [force] <file>

    Includes an external kivy file. This allows you to split complex widgets into their own files. If the include is forced, the file will first be unloaded and then reloaded again.

    intro.kv

    • Replace pos_hint={'x':0, 'y':0} with pos_hint: {'x':0, 'y':0}
    • Replace source=('mylogo.png') with source: 'mylogo.png'
    • Replace app.root.current with root.manager.current because each screen has by default a property manager that gives you the instance of the ScreenManager used.

    Snippets

    main.kv

    #:kivy 1.11.0
#:include intro.kv
#:include stacklayout.kv
#:import FadeTransition kivy.uix.screenmanager.FadeTransition

ScreenManagement:
    transition: FadeTransition()
    IntroScreen:
        name: 'main'
    ContScreen:
        name: 'cont'

    intro.kv

    <IntroScreen>:
    FloatLayout
        orientation: 'vertical'
        padding: [10,50,10,50]
        spacing: 50

        Label:
            text: 'WELCOME'
            font_size: 50
            pos_hint: {'x':0, 'y':0}

        Image:
            source: 'mylogo.png'
            pos_hint: {'x':0,'y':0}

        Button:
            text: 'Initialize'
            font_size: 35
            on_release: root.manager.current = "cont"

    Output

    Img01