Kivy Design Language Overview

Introduction

• Instructor: John Elder from codingme.com
• Topic: Introduction to the Kivy Design Language
• Reminder to like, subscribe, and check out codingme.com for courses
  • Special offer: Use coupon code youtube1 for $49 membership

Kivy Design Language

• Purpose: Abstract design elements away from Python code
  • Example: Instead of directly setting properties like font size in code, separate them into a design file.
• Analogy: Similar to separating CSS and HTML in web development.

Setting Up Kivy Files

1. Create main Python file (design.py)
   • Use Sublime Text and Git Bash Terminal
   • Start with base layout: change my app class to inherit from Widget
2. Create Kivy Design File (my.kv)
   • Must follow naming convention: remove app from class name to name the kv file (e.g., my.kv).
   • Keep file naming in lower case.

Writing Kivy Design File (my.kv)

Structure

• Use indentation for defining hierarchy
  • Indentation is crucial; use TAB key, do not use spaces.
• Define Layout:
  • Start with main GridLayout
    • Set number of columns, e.g., 1 column for main layout.
    • Include nested GridLayout for additional input.

Example Components

• Labels and Text Inputs:
  • Define labels (e.g., Name, Favorite Pizza, Favorite Color).
  • Set properties such as multiline for text inputs.
• Button:
  • Place outside of inner layouts to span across them (e.g., submit button).

Running and Adjusting App

• Testing Layout:
  • Save and run the application; addresses layout issues and unknown class errors.
• Adjust Size:
  • To resize, set width and height to that of root app: root.width and root.height.
• Change Font Size:
  • Modify button's font_size (e.g., set to 32).

Functionality of Button

• Setting IDs for Text Inputs:
  • Define IDs in Python and kv files (e.g., name, pizza, color).
• Import Object Property:
  • Usage of from kivy.properties import ObjectProperty to interact with inputs.

Button Action

• Modify method to use the variables and define button action in kv file:
  • On button press, reference on_press method.

Conclusion

• Reinforce the concept of separating design from code for clarity.
• Outlined structure of kv file and its components.
• Acknowledge the complexity of indentation and layout.
• Encourage further exploration in future videos.

Call to Action

• Like and subscribe to the channel for further learning
• Special offers and resources available at codingme.com

---