Text Input Box with a verification button

Introduction

Kivy is a Python GUI(Graphical User Interface) tool that works on any platform. It can run on Android, iOS, Linux, and Windows, among other platforms. It is mainly used to create Android applications, but it may also create desktop applications.

In this blog, we'll learn how to use the a .kv file in Python to create a button with a Text input in Kivy, similar to the input and submit buttons. To make this, we must first understand the Textinput widget and the Button in Kivy.

Implementation

Below is the step-by-step guide on implementing Text Input Box with a verification button in Kivy.

Approach

The following steps explain the basic approach to implementing a Text Input Box with a verification button.

1. Import kivy
2. Import kivyApp
3. Import widget
4. Import Boxlayout
5. Import textinput and Button
6. Set minimum version(optional)
7. Create Widget class
8. Create App class
9. Create .kv file:
10. Create textinput
11. Create Button
12. Return Layout/widget/Class(according to requirement)
13. Run an instance of the class

Code

The code below will show how to create textinput with the button in kivy using .kv file

# Import kivy module    
import kivy  

# App's base class is derived from the App class.     
# App: always refers to the kivy.app import App instance of your application   
from kivy.app import App 

# This restricts the kivy version i.e  below this kivy version, we cannot  use the app or software  
kivy.require('1.9.1')

# Widgets are graphical user interface elements included in the User Experience.
from kivy.uix.widget import Widget

# The TextInput widget from kivy.uix.textinput import TextInput provides a box for editable plain text.
from kivy.uix.textinput import TextInput

# BoxLayout organises widgets vertically, one on top of the other or horizontally, one after the other.
from kivy.uix.boxlayout import BoxLayout

# We utilise this module configuration to adjust the kivy default settings.
from kivy.config import Config
Config.set('graphics', 'resizable', True)

# Making the root widget for the.kv file
class BtnTextInput(BoxLayout):
    pass

# Textinput and btn classes are created in this class.
# in .kv file to be named main.kv
class MainApp(App):
    def build(self):

        # Returning the instance of root class
        return BtnTextInput()

# The run function executes the whole programme.
# i.e run() function that invokes the target function passed to the constructor.

if __name__ == '__main__':
    MainApp().run()

You can also try this code with Online Python Compiler

Run Code

.kv file implementation 

The code below is the .kv implementation of the App class.

# Creating the root widget

<BtnTextInput>:
    # To position widgets in the proper orientation, use vertical orientation to set all widgets
	# orientation: "vertical"
    # Using the Box layout
    BoxLayout:
        height: "50dp"
        size_hint_y: None

        # Creating Test input
        TextInput:
            size_hint_x: 20
            
        # Creating Button        
        Button:
            text: "Apply"
            size_hint_x: 25
            background_color: 1, 0, 0, 1
            font_size: 35

Output