Developing a simple Kivy application

At Qxf2 Services we do hackathon yearly once. We believe that this gives good learning and we can believe in ourselves do our work faster. This year, I took Kivy and developed a desktop application. You usually think is it possible for us to develop an application without having basic knowledge of the framework? Yes, you can do it. I have picked up Kivy and developed a desktop application within ~6hrs and finished it. I am sure this is useful for beginners who want to develop a desktop application with Kivy.

I am sure you are not new to technology and you will be having some basic knowledge of any programming language. Here I don’t tell you what is variables, desktop applications, and Kivy. Instead, I show you what did I do as part of our hackathon.

Overview

  • Kivy program structure
  • What did I design
  • Code
  •  

    1. Kivy program structure

    Usually, we use two files in Kivy. One is a Python file ie .py file and another one Kivy file with .kv extension. We have to run the Python file to start the application.
     

    2. What did I design

    My application is designed to contain the training material of Python and Selenium. We can add important links to refer and learn the concepts.
     

    3. Code

    I have added the Python file and a sample Kivy file here. By using this you can develop an application as per your requirements.

    from kivy.app import App
    from random import random
    from kivy.uix.screenmanager import ScreenManager, Screen
    from kivy.lang.builder import Builder
    from kivy.uix.floatlayout import FloatLayout
    from kivy.uix.gridlayout import GridLayout
    from kivy.uix.widget import Widget
    from kivy.core.window import Window
    from kivy.graphics import Color, Ellipse, Line    
    class LoginPage(Screen):
        pass
    class UserPage(Screen):
        pass 
     
    class Grid(Screen,GridLayout):
        pass
     
    class ThankYouScreen(Screen):
        pass
     
    class PythonResources(Screen):
        pass
     
    class SeleniumResources(Screen):
        pass
     
    class ScreenManagement(ScreenManager):
        pass
    kv_file = Builder.load_file('login.kv')
    class LoginApp(App):
        def builder(self):
            return kv_file
    LoginApp().run()

    You can see that I am importing all the libraries which I need it for my program I am adding it in the Python file. For example, you can see I am importing all the Grid layout, Screen, Screen Manager to my Python file. Creating a class for each page and I am not writing anything here. Since this is the small project we can start by building a small application. App.run() helps you to start the application.

    Once you have created the Python file you can create a Kivy file. My Kivy file has three pages which are the Home page, the next one is you have to enter the basic information and the third page is Grid layout format which has the buttons once you click it you can see the material for the languages and important links. I haven’t completed this project, I have added the buttons and when it clicks it moves to the page. But you don’t see the material and links over there. But this is the idea of my hackathon project.

    I am adding my sample code here.

    #: import FadeTransition kivy.uix.screenmanager.FadeTransition
     
    ScreenManagement:      
        LoginPage:
        UserPage:
    	Grid:
    	PythonResources:
    	SeleniumResources:	
    	ThankYouScreen:
    <LoginPage>:
        name: "loginpage"
        FloatLayout:
    		Label:
    			halign: 'center'
    			text: "Hackathon-Click the below button to go to next page" 
    			font_size: self.height / 20
    			background_color: 0,0,1,1
    		Button:
    			text:"Click" 
    			size_hint: 0.15,0.07	
    			pos_hint: {"x": 0.5 - self.width/2000, 'y':0.05}
    			font_size: self.height / 2
    			on_release: app.root.current = "user"

    From the above code, you can see that the Kivy file is starting with Screen management and then you have to create a script for each page and you have to specify after the click to which page it has to navigate. Here I have specified on release it should go to ‘user’ page. In the same way, you can keep adding the pages and you can design your application.
     

    Conclusion

    I hope this blog helped you on how to develop a simple desktop application in a day. It not only helps you to develop an application it helps you to improve your planning and learning skills. This is the very basic desktop application you can further build a web application also.

    Leave a Reply

    Your email address will not be published. Required fields are marked *