Creating A Login Screen With KivyMD – Python Kivy GUI Tutorial #44

In this video we’ll create a basic login screen for KivyMD and Python.

We’ll use MDTextFieldRound, MDLabel, and MDRoundFlatButton…as well as son icons for the username and password field.

Creating design elements with KivyMD is pretty easy as you’ll see in this video.

Python Code: login.py
GitHub Code: login.py

from kivy.lang import Builder
from kivymd.app import MDApp


class MainApp(MDApp):
	def build(self):
		self.theme_cls.theme_style = "Dark"
		self.theme_cls.primary_palette = "BlueGray"
		return Builder.load_file('login.kv')
	def logger(self):
		self.root.ids.welcome_label.text = f'Sup {self.root.ids.user.text}!'

	def clear(self):
		self.root.ids.welcome_label.text = "WELCOME"		
		self.root.ids.user.text = ""		
		self.root.ids.password.text = ""		
	
MainApp().run()

Kivy Design Code: login.kv
GitHub Code: login.kv

Screen:
    
    MDCard:
        size_hint: None, None
        size: 300, 400
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 25
        spacing: 25
        orientation: 'vertical'

        MDLabel:
            id: welcome_label
            text: "WELCOME"
            font_size: 40
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 15

        MDTextFieldRound:
            id: user
            hint_text: "username"
            icon_right: "account"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}

        MDTextFieldRound:
            id: password
            hint_text: "password"
            icon_right: "eye-off"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}
            password: True

        MDRoundFlatButton:
            text: "LOG IN"
            font_size: 12
            pos_hint: {"center_x": 0.5}
            on_press: app.logger()

        MDRoundFlatButton:
            text: "CLEAR"
            font_size: 12
            pos_hint: {"center_x": 0.5} 
            on_press: app.clear()           

        Widget:
            size_hint_y: None
            height: 10