Table of contents
1.
Introduction
2.
Creating a PageLayout
2.1.
Example
2.1.1.
pagelayout.py
2.1.2.
PageLayout.kv
2.1.3.
Output
2.1.4.
PageLayout.kv
2.1.5.
Output
3.
Frequently Asked Questions
3.1.
What is bind()?
3.2.
What is kivy.uix?
3.3.
What is .kv file?
3.4.
What does root mean in Kivy?
4.
Conclusion
Last Updated: Mar 27, 2024
Easy

Page Layout using .kv File

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Kivy is an independent GUI tool in Python that can be used to create Android, IOS, Linux, and Windows applications. Kivy provides the functionality to write the code for once and run it on different platforms. Though, most applications built on kivy are Android applications we can use it for desktop applications as well.


Unlike any other layout rather than setting the widgets as a portion of the window, Page Layout makes the widgets pages that are overlapping each other which allows us to flip through the pages using the borders. The whole concept is of the components being stacked one over another and we can only see the top page at any moment.


Page Layout class is used to create this simple multi-page layout which enables a flipping functionality that allows easy flipping from one page to another.

In this blog, we will learn how we can implement this PageLayout in a .kv file.

Creating a PageLayout

In order to use PageLayout we first need to import it using:

from kivy.uix.pagelayout import Pagelayout

However, Pagelayout does not require a size_hintsize_hint_min, or any other property and thus can not be used in a page layout.

All the transitions occurring here are made by swiping in from the border on the right or left side. Also taking the page as a parent element we can have a different layout inside it using any other layout as well.

PageLayout contains some of the things that make it easier to be used: 

  • border: This contains the width of the border around the current page that shows the next or previous page and is used to swipe to move. It has a default value of 50dp.
  • page: It is the number of the current page displayed and defaults to 0.
  • swipe_threshold: It defines how much area a swipe must cover to trigger a swipe in terms of percentage. It defaults to 0.5.

Example

In this example, we will take 3 widgets and show how we can set the page layout.

pagelayout.py

#first we import all the required dependencies
import kivy
  
from kivy.app import App
 
kivy.require('1.9.0')
#we only require the page layout import in this case
from kivy.uix.pagelayout import PageLayout

#create a base element to contain all the other elements as pages.
#no need to insert any widget here as we will do it in the .kv file
 class PgLayout(PageLayout):
    pass
 
#create the function that we run 
class PageLayoutApp(App):

    def build(self):

        return PgLayout()
 
#run the app
root = PageLayoutApp()
root.run()

PageLayout.kv

After creating the py file we need to create the .kv file which is comparatively easier in this case as we just need to mention the buttons as pages.

<PageLayout>:
    
    # creating Page 1
    Button:
        text: "Page 1"
 
    # creating Page 2
    Button:
        text: "Page 2"
 
    # creating Page 3
    Button:
        text: "Page 3"
 
    # creating Page 3
    Button:
        text: "Page 4"

Output

We can create multiple such layouts by using any other layout as well. We will do an example below

PageLayout.kv

Here we use the different layouts in the page layout so as to use know how we can create any layout we require using these.

<Button>:
        font_size: 15
        size_hint: 0.25, 0.25
<PageLayout>:
    
    # creating Page 1
        Button:
                text: "Page 1"
    
        # creating Page 2
        BoxLayout:
                orientation: 'vertical'
                Button:
                        text: "Page 2"
        
                Button:
                        text: "Page 3"
    
        # creating Page 3
        RelativeLayout:
                Button:
                        text: "Page 4"
                        pos_hint: {"right": 1, "y": 0}

                Button:
                        text: "Page 5"
                        pos_hint: {"x": 0, "top": 1}

        #creating page 4
        GridLayout:
                rows: 3
                AnchorLayout: 
                        anchor_x: 'left'
                        anchor_y: 'top'
                        Button: 
                                text: 'page 6'
                AnchorLayout: 
                        anchor_x: 'right'
                        anchor_y: 'bottom'
                        Button: 
                                text: 'page 6'

Output

Frequently Asked Questions

What is bind()?

It is a function that binds a callback to a particular event on an element. It takes two parameters, the callback and the event as input.

What is kivy.uix?

kivy.uix is a module that contains classes for creating and managing Widgets for creation in any Application.

What is .kv file?

Ans: A .kv file helps create a widget tree and the explicit declaration of bindings.

What does root mean in Kivy?

In a kv file, the root always refers to a parent with angle brackets and thus there can be multiple roots. 

Conclusion

In this blog, we discussed how we can create a Page Layout using Kivy.

 

You may want to learn more about Kivy here, float layout in kivy here and Button Action in Kivy here We hope that this blog has helped you enhance your knowledge regarding verifying using Selenium. Do upvote our blog to help other ninjas grow.

 

Learning never stops, and to feed your quest to learn and become more skilled, head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, take on guided paths, read interview experiences, try our interview bundle and much more.!
 

Happy Learning!

Live masterclass