Python Kivy Tutorial - Sign in window

Kivy is a free, open source Python library that allows for quick and easy development of highly interactive multiplatform applications.

Kivy’s execution speed is comparable to the native mobile alternative, Java for Android or Objective C for iOS. Moreover, Kivy has the huge advantage of being able to run on multiple platforms, just as HTML5 does; in which case, Kivy performs better because it doesn’t rely on a heavy browser, and many of its components are implemented in C using the Cython library in such a way that most of the graphics processing runs directly in the GPU.

In this tutorial we will create a sign in window screen using python and the kivy language. If you are new here then I will recommend you to first see my tutorial on creating a Clock application with python kivy.

This way you can make a sign in screen with Python Kivy:

# File name – signin.py

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class Signinwindow(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
    def validate_user(self):
        user = self.ids.username_field
        pwd = self.ids.pwd_field
        info = self.ids.info

        uname = user.text
        passw = pwd.text

        if uname == "" or passw == "":
            info.text = '[color=#FF0000]username and/ or password required[/color]'
        else:
            if uname == "admin" and passw == "admin":
                info.text= '[color=#00FF00]Logged in successfully![/color]'
            else:
                info.text = '[color=#FF0000]Invalid username and/or password[/color]'


class SigninApp(App):
    def build(self):
        return Signinwindow()

if __name__ == '__main__':
    sa = SigninApp()
    sa.run()

# File name – signin.kv

<Signinwindow>:
     id: main_win
     orientation: 'vertical'
     spacing: 10
     space_x: self.size[0]/3
     canvas.before:
          Color:
               rgba: (1,1,1,1)
          Rectangle:
               size: self.size
               pos:  self.pos

     BoxLayout:
          size_hint_y: None
          height:50
          canvas.before:
               Color:
                    rgba: (.90,.20,.20,.90)
               Rectangle:
                    size: self.size
                    pos:  self.pos
          Label:
               text: "Access Control"
               bold: True
               size_hint_x: .9
     BoxLayout:
          orientation: 'vertical'
          padding: main_win.space_x, 10
          spacing: 20
          BoxLayout:
               orientation: 'vertical'
               spacing: 10
               size_hint_y: .30
               size_hint_x: 1
               height: 100
               Label:
                    id: info
                    text: " "
                    markup: True
                    size_hint_y: None
                    height: 10
               TextInput:
                    id: username_field
                    hint_text: "User Name"
                    multiline: False
                    focus: True
                    on_text_validate: pwd_field.focus= True
               TextInput:
                    id: pwd_field
                    hint_text: "Password"
                    multiline: False
                    password: True
                    on_text_validate: root.validate_user()
          Label:
               id: sp
               size_hint_y: None
               height: 10
          Button:
               text: "Sign In"
               size_hint_y: .2
               size_hint_x: .90
               height: 20
               background_color: (.90, .20, .20,.90)
               background_normal: ''
               on_release: root.validate_user()
          Label:
               id: sp2

#Output-