Table of contents
1.
Introduction
2.
Shaping Button in Kivy
2.1.
Implementation
2.1.1.
Algorithm
2.1.2.
Python Code
2.1.3.
.kv Code
2.2.
App Output
3.
Frequently Asked Questions
3.1.
What are Kivy widgets?
3.2.
What is Kivy Uix, exactly?
3.3.
Is Kivy a good choice for Android?
3.4.
What is Kivy's relative layout?
4.
Conclusion 
Last Updated: Mar 27, 2024
Easy

Shaping the button using .kv file

Author Aman Thakur
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

One must be thinking that I am  python developer but I also want to develop apps for Android and I don’t want to learn any other framework or library such as flutter, Android Native or swift fro developing IOS applications. No worries, pal; we'll be studying the Kivy framework supplied by Python, which will take you on a tour of constructing applications in Python quickly and effortlessly.

In this article we will be covering Shaping Button in  Python using GUI tool that works on any platform provided by the Kivy module python. We will also see how to use the .kv file in Kivy for developing the layout of the application. This article assumes that you have been somewhat familiar with Basics of Python otherwise it will be bit difficult to understand it in first glance however you can still go through this article.

Shaping Button in Kivy

Widgets are always rectangles, but utilising the background normal and background down parameters of buttons, we can modify the background of widgets and add a pair of pictures for the normal and down states of the button. You must also be familiar with another property of the button, the border property, in order to round the corners of the button.

Implementation

The section will be covering the implementation of algorithm and actual code of the Shaping Button given below:

Algorithm

1. import kivy
2. import kivyApp
3. import button and floatlayout
4. Create the Layout class
5. Create App class
6. Create .kv file:

          6.1. Add Base class
          6.2. Add Button properties
          6.3. Add Image as button
          6.4. Round the corners of the button using border property

7. return instance of the layout class
8. Run an instance of the class

Python Code

from kivy.app import App

from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button 
from kivy.config import Config
from kivy.uix.widget import Widget

from kivy.lang import Builder

Config.set('graphics', 'resizable', True)

Builder.load_file('shape.kv')

class Widgets(Widget):
   def btn(self):
       show()

class Base(FloatLayout):
   pass

class BtnApp(App):
   def build(self):
       return Base()

def show():
   show = Base()

   window = Config(title="Config Window", content=show,
                       size_hint=(None, None), size=(200, 200))
   window.open()

if __name__ == "__main__":
   BtnApp().run()
You can also try this code with Online Python Compiler
Run Code

.kv Code

<Base>:
   Button:
       text: 'Click Me !!'
       background_normal: '1.png'
       background_down: '2.png'

       border: 30, 30, 30, 30
       background_color: 1.0, 1.0, 1.0, 1
      
       size_hint: .3, .3
       pos_hint: {"x":0.35, "y":0.3}
You can also try this code with Online Python Compiler
Run Code

App Output

Frequently Asked Questions

What are Kivy widgets?

In Kivy, a Widget is the fundamental component of a graphical user interface. It comes with a canvas on which you may draw on the screen. It takes in information and responds to it.

What is Kivy Uix, exactly?

A module is kivy.uix. Widgets are part of the User Experience and are graphical user interface components. The kivy. uix module contains classes for creating and managing Widgets.

Is Kivy a good choice for Android?

Kivy is a great choice for developing Android Applications. Kivy is an excellent tool for creating Android applications. The nicest thing about kivy is that it is cross-platform, which means that the same project can be used for creating apps for iOS, Android, Windows, and OS X.It does, however, have certain performance drawbacks (as do most cross-platform tools like unity , cocos etc).

What is Kivy's relative layout?

Relative Layout: This layout allows you to assign children relative coordinates. Use the FloatLayout if you want absolute placement. The RelativeLayout class is similar to the FloatLayout class, with the exception that its child widgets are positioned relative to the layout.

Conclusion 

If you have reached till here that means, you really enjoyed this article. This article covers the implementation of Carousel Widget in kivy with code snippets and their use cases. You might be interested in articles such as Floating Layout in KivyCrousel Widget in KivyPopUp widget in KivyScreenManager in Kivy and many more.

Do upvote our blog to help other ninjas grow, and head over to our practice platform Coding Ninjas Studio to practise top problems, attempt mock tests, read interview experiences, and much more.

Happy Learning!

Live masterclass