Kivy Framework All widget in Python

Install External Libraries use the pip package manager to install the desired libraries from the Python Package Index (PyPI). For example, to install numpy:

Import and Use Within your Kivy application code (typically a Python file), import the external libraries you need and use their functions as you would in a regular Python script:

Remember that Kivy focuses on building graphical user interfaces (GUIs), and external libraries provide the tools to extend its functionalities and create rich, interactive applications. Choose the libraries that align with your project's specific needs.

import kivy

from kivy.app import App
    
    class KivyApp(App):
        def build(self):
            pass
    
    KivyApp().run() 

1- Label

A Label is a fundamental widget in Kivy used for displaying text on your application's screen. Here's a breakdown of what you can do with Labels in Kivy:

Position Label:

• Use the pos property to set the Label's position in pixels relative to the window's top-left corner.

Aligning Text:

• Align the text within the Label using the halign and valign properties. These properties take values like 'left', 'center', and 'right' for horizontal alignment and 'top', 'center', and 'bottom' for vertical alignment. However, by default, these properties only work if text_size is set.

from kivy.app import App from kivy.uix.label import Label class LabelApp(App): def build(self): label = Label(text="my name is rahul") return label LabelApp().run()

2 - Button

In Kivy, a Button is widget that allows users to interact with your application by clicking or pressing it. Here's a closer look at how to work with Buttons in Kivy:

Create a Button:

• Buttons are created using the Button class from the kivy.uix.button module.

Customize Button Text:

• Set the text displayed on the button using the text property.

Functionality:

• Buttons become interactive by binding functions to events. The primary events for buttons are on_press and on_release.
• on_press: This event triggers a function when the button is pressed or clicked
• on_release: This event triggers a function when the button is released after a click or press.

from kivy.app import App from kivy.uix.button import Button class ButtonApp(App): def build(self): button = Button(text="Click Here") return button ButtonApp().run()

3 - BoxLayout

BoxLayout is a fundamental layout manager used to organize widgets in a horizontal or vertical direction. It's a simple yet powerful tool for structuring user interfaces.

• Function: Arrange child widgets sequentially, either one on top of another (vertically) or side-by-side (horizontally).
• Orientation: Controlled by the orientation property. By default (or if left blank), it's horizontal. Set it to "vertical" for a vertical layout.

Common Use Cases:

• Building rows or columns of widgets (buttons, labels, etc.)
• Creating basic app screens with a clear organization.
• Nesting Box layouts within other layouts for more complex structures.

Key Properties:

• orientation: Defines the layout direction (horizontal or vertical).
• spacing: Sets the space (in pixels) between child widgets.
• padding: Sets the padding (in pixels) around the outer edges of the BoxLayout.

from kivy.app import App from kivy.uix.button import Button from kivy.uix.boxlayout import BoxLayout from kivy.core.window import Window Window.clearcolor=(0,0,1,1) #Window.size=(300,500) class BoxlayoutApp(App): def build(self): layout = BoxLayout(orientation="vertical", padding=30, spacing=10) button = Button(text="bubtton ") button1 = Button(text="button1 ") button2 = Button(text=" button2") button3 = Button(text="button3") button4 = Button(text=" button4") button5 = Button(text=" button5") layout.add_widget(button) layout.add_widget(button1) layout.add_widget(button2) layout.add_widget(button3) layout.add_widget(button4) layout.add_widget(button5) return layout BoxlayoutApp().run()

4 - GridLayout

GridLayout is another important layout manager used for arranging widgets in a grid-like structure. It offers more flexibility compared to BoxLayout for creating matrices of elements.

Function:

• Divide the available space into rows and columns.
• Arrange child widgets within these cells, following the order they are added.

Key:

• Requires defining either cols or rows property, or both, to specify the number of columns and rows in the grid.
• Unlike BoxLayout, you cannot explicitly position widgets in specific cells. Their placement depends on the layout configuration and their order in the children list.
• Provides properties for fine-tuning the appearance of the grid:
• col_default_width: Sets the default width for columns (if not specified by widgets' size_hint).
• row_default_height: Sets the default height for rows (if not specified by widgets' size_hint).
• spacing: Sets the space (in pixels) between cells.
• padding: Sets the padding (in pixels) around the outer edges of the GridLayout.

from kivy.app import App from kivy.uix.button import Button from kivy.uix.gridlayout import GridLayout from kivy.core.window import Window Window.clearcolor=(1,1,1,1) Window.size=(450,550) class GridlayoutApp(App): def build(self): layout = GridLayout(rows=4, padding=8, spacing=5) button = Button(text="BLUE", color=(0,0,1,1)) button1 = Button(text="GREEN", color=(0,1,0,1)) button2 = Button(text="MAGENTA",color=(1,0,1,1)) button3 = Button(text="YELLOW",color=(1,1,0,1)) button4 = Button(text="WHITE", color=(1,1,1,1)) button5 = Button(text="SKYBLUE",color=(0,1,1,1)) button6 = Button(text="BLACK", color=(0,0,0,1)) button7 = Button(text="RED",color=(1,0,0,1)) layout.add_widget(button) layout.add_widget(button1) layout.add_widget(button2) layout.add_widget(button3) layout.add_widget(button4) layout.add_widget(button5) layout.add_widget(button6) layout.add_widget(button7) return layout GridlayoutApp().run()

5 - TextInput

extInput widget is a versatile tool for allowing users to input and edit plain text. It provides a user-friendly interface for collecting text data within your application.

Properties:

• text: Stores the current text content displayed within the TextInput.
• hint_text: Sets a placeholder text displayed when the TextInput is empty, guiding users on what kind of input is expected.
• multiline: Controls whether the TextInput allows entering multiple lines of text (True) or restricts it to a single line (False, default).
• readonly: Makes the TextInput non-editable, allowing users to only view the existing text.
• password: Hides the entered text with asterisk characters (*), useful for passwords

from kivy.app import App from kivy.uix.boxlayout import BoxLayout from kivy.uix.button import Button from kivy.uix.textinput import TextInput class InputTextApp(App): def build(self): layout = BoxLayout(orientation="vertical", padding=200, spacing=30) self.Email = TextInput(text="Enter the email") self.password = TextInput(text="enther the password") self.Submit = Button(text="Log in", on_press=self.submitbutton) layout.add_widget(self.Email) layout.add_widget(self.password) layout.add_widget(self.Submit) return layout def submitbutton(self,obj): print(f"your email is : {self.Email.text}") print(f"your password is :{self.password.text}") InputTextApp().run()

6 - Change Window Color

There are two main ways to change the window background color in Kivy:

Using Window.clearcolor:

This is the simpler approach and directly sets the clear color for the entire window.

Using canvas instructions:

This method offers more flexibility if you want to achieve specific effects or have a background element behind your widgets.

Use Window.clearcolor for a simple solid color background for the entire window.

from kivy.app import App from kivy.uix.label import Label from kivy.core.window import Window Window.clearcolor=(1,1,1,1) #white color (1,1,1,1) class ChangeWindowColorApp(App): def build(self): label = Label(text="Change window color",font_size="50sp", color=(1,0,1,1),bold=True) return label ChangeWindowColorApp().run()

7- Change Window Width

There are two primary methods to change the window width in Kivy:

Using Config before window creation:

This approach is ideal for setting the initial window size before your application launches. It involves modifying the configuration settings.

Using Window.size after window creation:

This method allows you to dynamically change the window width during runtime.

from kivy.app import App from kivy.uix.label import Label from kivy.core.window import Window Window.size=(500,600) class WindowWdth(App): def build(self): label = Label(text="Window Change Width", font_size="30sp", bold=True) return label WindowWdth().run()

8 - Image

You can display images using the Image widget from the kivy.uix module. Here's a breakdown of how to incorporate images into your Kivy application.

Specifying the Image Source:

The Image widget has a source property that determines the location of the image file.

Path: If the image is located elsewhere on your system, use an absolute path.

Adding the Image to Your Layout:

Once you have created the Image widget with the source specified, you need to add it to your application's layout using a layout manager like BoxLayout or GridLayout.

from kivy.app import App from kivy.uix.image import Image #use AsyncImage find image address source class ImageApp(App): def build(self): img = Image(source="image.png",size_hint=(None,None) ,width=100,height=100, pos_hint={"center_x":0.5,"center_y":0.5}) return img ImageApp().run()

9 - Anchor Layout

An AnchorLayout in Kivy is a versatile layout manager used to position widgets relative to the borders or center of the AnchorLayout itself. It provides a simple way to achieve specific alignments without needing complex calculations.

Function:

• Anchors child widgets to specific borders (top, bottom, left, right) or the center of the AnchorLayout.
• Offers precise control over the positioning of each child widget.

Properties:

• anchor_x: This OptionProperty defines the horizontal anchor point for the widget. It accepts values like:
  1. "left": Anchors the widget to the left border of the AnchorLayout.
  2. "center" (default): Positions the widget horizontally centered within the AnchorLayout.
  3. "right": Anchors the widget to the right border of the AnchorLayout.
• anchor_y: Similar to anchor_x, this OptionProperty controls the vertical anchor point. It accepts values like:

1. "top": Anchors the widget to the top border of the AnchorLayout.
2. "center" (default): Positions the widget vertically centered within the AnchorLayout.
3. "bottom": Anchors the widget to the bottom border of the AnchorLayout.

from kivy.app import App from kivy.uix.anchorlayout import AnchorLayout from kivy.uix.button import Button class AnchorLyoutApp(App): def build(self): anchor = AnchorLayout(anchor_x="left",anchor_y="top", ) button = Button(text="cleck here", size_hint=(None,None), width=200) anchor.add_widget(button) return anchor AnchorLyoutApp().run()

10 - PageLayout

PageLayout is a special layout manager designed for creating swipe-able interfaces that resemble flipping through pages in a book. It allows you to transition between multiple child widgets, each representing a distinct "page" within your application.

Function:

• Manages a stack of child widgets, treating each one as a separate page.
• Enables users to swipe left or right across the screen to navigate between pages.
• Provides visual cues (like borders) to indicate switchable pages.

Properties:

1. page: NumericProperty representing the index of the currently displayed page (0-based indexing).
2. border: NumericProperty defining the width of the border around the current page, used for swipe detection.
3. swipe_threshold: NumericProperty (default 0.5) specifying the proportion of the screen width required for a swipe gesture to register as a page change.

from kivy.app import App from kivy.uix.pagelayout import PageLayout from kivy.uix.button import Button from kivy.core.window import Window Window.clearcolor=(0,0,1,1) Window.size=(500,400) class PageLayoutApp(App): def build(self): layout = PageLayout() button = Button(text="My") button1 = Button(text="Name") button2 = Button(text="Rahul") button3 = Button(text="Bharadwaj") layout.add_widget(button) layout.add_widget(button1) layout.add_widget(button2) layout.add_widget(button3) return layout PageLayoutApp().run()

11 - FloatLyout

FloatLayout is a versatile layout manager that allows you to position child widgets freely within the available space, without a predefined grid or structure. It offers more flexibility compared to BoxLayout or GridLayout but requires manual positioning of elements.

Concepts:

• pos_hint: A dictionary property that defines the relative position of a widget within the FloatLayout. It takes values between 0.0 (left/bottom edge) and 1.0 (right/top edge) for the x (horizontal) and y (vertical) coordinates.
  1. Example: pos_hint={'x': 0.2, 'y': 0.3} positions the widget 20% from the left edge and 80% from the bottom edge.
• size_hint: Another dictionary property that specifies the relative size of a widget compared to the FloatLayout itself. It also uses values between 0.0 and 1.0 for width and height.
  1. Example: size_hint={'width': 0.5, 'height': 0.5} sets the widget to half the width and one-third the height of the FloatLayout.

from kivy.app import App from kivy.uix.button import Button from kivy.uix.floatlayout import FloatLayout class FloatlayoutApp(App): def build(self): layout = FloatLayout() button = Button(text="Rahul", size_hint=(None,None),width=200, pos_hint={"center_x":.05,"center_y":0.5}, font_size="20sp") layout.add_widget(button) return layout FloatlayoutApp().run()

This code showcases a FloatLayout with two buttons positioned using pos_hint and sized with size_hint. Button 1 is placed in the top left corner, and Button 2 is centered horizontally and positioned halfway down the layout.