Python | PageLayout in Kivy using .kv file

Kivy is a platform independent GUI tool in Python. As it can be run on Android, IOS, linux and Windows etc. It is basically used to develop the Android application, but it does not mean that it can not be used on Desktops applications.

PageLayout:

The PageLayout works in a different manner from other layouts. It is a dynamic layout, in the sense that it allows flipping through pages using its borders. The idea is that its components are stacked in front of each other, and we can just see the one that is on top.
PageLayout is similar to pages of a copy like that we can move/change the pages right or left.

The PageLayout class is used to create a simple multi-page layout, in a way that allows easy flipping from one page to another using border.



To use PageLayout you have to import it by the below command:

from kivy.uix.pagelayout import PageLayout

Note:
PageLayout does not currently honor the size_hint, size_hint_min, size_hint_max, or pos_hint properties. That means we can not use all these in a page layout.

Example:

PageLayout:
    Button:
        text: 'page1'
    Button:
        text: 'page2'
    Button:
        text: 'page3'

Transitions from one page to the next are made by swiping in from the border areas on the right or left-hand side. If you want to use multiple widgets on a page, use layouts to do that. Ideally, each page should consist of a single layout widget that contains the remaining widgets on that page.

Page Layout contains many things which can be used to make it more effective easily in .kv file.

  1. border: The width of the border around the current page used to display the previous/next page swipe areas when needed. border is a NumericProperty and defaults to 50dp.
  2. page: The currently displayed page. Page is a NumericProperty and defaults to 0.
  3. swipe_threshold: The threshold used to trigger swipes as percentage of the widget size. swipe_threshold is a NumericProperty and defaults to .5.
Basic Approach to create page layout using .kv file

1) import kivy
2) import kivyApp
3) import Pagelayout
4) Set minimum version(optional)
5) create Layout class
6) create App class
      - create build() function
7) Set up .kv file(name same as the App class)
8) return Layout/widget/Class(according to requirement)
9) Run an instance of the class

 

Below is the Implementation for .kv files in this code :

1). kv file is just Simply how to create pages in .kv file
2). kv file is how can yo add features like : color, text, image, canvas, swipe_threshold, button in the pages.

Implementation of the Approach –


main.py file

filter_none

edit
close

play_arrow

link
brightness_4
code

## Sample Python application demonstrating the 
## working of PageLayout in Kivy using .kv file 
  
##################################################
# import kivy module   
import kivy 
    
# base Class of your App inherits from the App class.   
# app:always refers to the instance of your application  
from kivy.app import App
  
# this restrict the kivy version i.e 
# below this kivy version you cannot 
# use the app or software 
kivy.require('1.9.0')
   
# The PageLayout class is used to create
# a simple multi-page layout,
# in a way that allows easy flipping from
# one page to another using borders.
from kivy.uix.pagelayout import PageLayout
   
# creating the root widget used in .kv file 
class PageLayout(PageLayout):
    pass
  
# creating the App class in which name 
#.kv file is to be named PageLayout.kv 
class PageLayoutApp(App): 
    # defining build() 
    def build(self): 
        # returning the instance of root class 
        return PageLayout() 
  
# creating object of PageLayoutApp() class
plApp = PageLayoutApp()
  
# run the class
plApp.run()

chevron_right


1) .kv file of Simple pages

filter_none

edit
close

play_arrow

link
brightness_4
code

# creating simple Pagelayout using.kv
  
<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"
  
    # create Page as may as you want

chevron_right


Output:

Page 1 image

Page 2 image

Similar is Page 3 and 4.

2) .kv file with some features on pages

filter_none

edit
close

play_arrow

link
brightness_4
code

# creating simple Pagelayout using.kv
  
# creating page Layout
<PageLayout>:
  
    # Creating Page 1
      
    # Using BoxLayout inside PageLayout
    BoxLayout:
  
        # creating Canvas
        canvas:
            Color:
                rgb: 0, .5, .95, 1
            Rectangle:
                pos: self.pos
                size: self.size
  
        # Providing orentation to the BoxLayout
        orientation: "vertical"
  
        # creating Button
        Button:
            text: "Page 1"
            size_hint_y: .4
  
        # Adding Lable to Page 1
              
        Label:
            markup: True
            text: "GFG[b]:):):):)[/b]" 
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30
  
  
    # Creating Page 2
    BoxLayout:
        orientation: "vertical"
          
        canvas:
            Color:
                rgba: 109 / 255., 8 / 255., 57 / 255., 1
            Rectangle:
                pos: self.pos
                size: self.size
        Label:
            markup: True
            text: " Kivy[b]PageLayout[/b]!!!!! "
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30
  
              
        Button:
            text: "Page 2"
            size_hint_y: .2
  
  
    # Creating Page 3
    BoxLayout:
          
        orientation: 'vertical'
  
        canvas:
            Color:
                rgba: 100 / 555., 9 / 155., 37 / 455., 1
            Rectangle:
                pos: self.pos
                size: self.size
  
        Label:
            text: 'page 3'
  
        # This Image is directly from the websource
        # By using AsyncImage you can use that
        AsyncImage:
            source: 'http://kivy.org / logos / kivy-logo-black-64.png'
          
  
  
    # Creating Page 4
    Button:
        # Adding image
        # image must be .png
        # and present at the same folder where
        # .kv and main file is saved 
        Image:
            source: "download.png"
            center_x: self.parent.center_x
            center_y: self.parent.center_y

chevron_right


Output:

Page 1

Page 2

Page 3

Page 4

Video Output:



My Personal Notes arrow_drop_up

Competative Programmer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.