Python | Layouts in layouts (Multiple Layouts) in Kivy

22 Sep, 2021
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.In this article, we are going to discuss how we can use layouts in layouts basically multiple Layouts the most basic example of it. Most of the time we are able to use one layout but having difficulty to use multiple layouts.
Kivy Tutorial – Learn Kivy with Examples.
In kivy there are many Types of Layouts:  
AnchorLayout: Widgets can be anchored to the ‘top’, ‘bottom’, ‘left’, ‘right’ or ‘center’.BoxLayout: Widgets are arranged sequentially, in either a ‘vertical’ or a ‘horizontal’ orientation.FloatLayout: Widgets are essentially unrestricted.RelativeLayout: Child widgets are positioned relative to the layout.GridLayout: Widgets are arranged in a grid defined by the rows and cols properties.PageLayout: Used to create simple multi-page layouts, in a way that allows easy flipping from one page to another using borders.ScatterLayout: Widgets are positioned similarly to a RelativeLayout, but they can be translated, rotate and scaled.StackLayout: Widgets are stacked in a lr-tb (left to right then top to bottom) or tb-lr order.
AnchorLayout: Widgets can be anchored to the ‘top’, ‘bottom’, ‘left’, ‘right’ or ‘center’.
BoxLayout: Widgets are arranged sequentially, in either a ‘vertical’ or a ‘horizontal’ orientation.
FloatLayout: Widgets are essentially unrestricted.
RelativeLayout: Child widgets are positioned relative to the layout.
GridLayout: Widgets are arranged in a grid defined by the rows and cols properties.
PageLayout: Used to create simple multi-page layouts, in a way that allows easy flipping from one page to another using borders.
ScatterLayout: Widgets are positioned similarly to a RelativeLayout, but they can be translated, rotate and scaled.
StackLayout: Widgets are stacked in a lr-tb (left to right then top to bottom) or tb-lr order.
Note:You can use as many as you can in a single file.
Basic Approach to create multiple layouts in one file:  
1) import kivy
2) import kivyApp
3) import BoxLayout
4) import 
4) set minimum version(optional)
5) Extend the container class
6) set up .kv file :
7) create App class
8) return container class or layout
9) Run an instance of the class
Implementation of the Approach –main.py file
Note: If you were using .kv file to make multiple layouts There is no need to import Gridlayout, Boxlayout, AnchorLayout, FloatLayout, StackLayout, PageLayout, Button, etc. As .kv file supports all this as It has all this imported already. But if doing this without .kv file you must have to import these. 
Python3
## Sample Python application demonstrating the## Program of How to use Multiple Layouts in Single 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 softwarekivy.require('1.9.0') # creates the button in kivy # if not imported shows the errorfrom kivy.uix.button import Button   # BoxLayout arranges children in a vertical or horizontal box.# or help to put the childrens at the desired location.from kivy.uix.boxlayout import BoxLayout # The GridLayout arranges children in a matrix.# It takes the available space and# divides it into columns and rows,# then adds widgets to the resulting “cells”.from kivy.uix.gridlayout import GridLayout # 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 fileclass MultipleLayout(PageLayout):    pass ######################################################################## # creating the App class in which name#.kv file is to be named PageLayout.kvclass Multiple_LayoutApp(App):    # defining build()    def build(self):        # returning the instance of root class        return MultipleLayout() ########################################################################     # creating object of Multiple_LayoutApp() classMlApp = Multiple_LayoutApp() # run the classMlApp.run()
In this file we are creating/using all the layout as it is Simpler to built/ use all these in .kv file .kv file of the code
Python3
# Program of How to use Multiple Layouts in Single .kv file ######################################################################## # creating page Layout<PageLayout>: #########################################################################         # Creating Page 1         # Using BoxLayout inside PageLayout    BoxLayout:         # creating Canvas        canvas:            Color:                rgba: 216 / 255., 195 / 255., 88 / 255., 1            Rectangle:                pos: self.pos                size: self.size         # Providing orientation to the BoxLayout        orientation: 'vertical'         # Adding Label to Page 1        Label:            size_hint_y: None            height: 1.5 * self.texture_size[1]            text: 'page 1'         # Creating Button        Button:            text: 'GFG :)'                         # Adding On_press function            # i.e binding function to press / touch            on_press: print("This Is The First Page") #########################################################################     # Creating Page 2     BoxLayout:        orientation: 'vertical'        canvas:            Color:                rgba: 109 / 255., 8 / 255., 57 / 255., 1            Rectangle:                pos: self.pos                size: self.size        Label:            text: 'page 2'         # 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 3     # Using The Second Layout    # Creating GridLayout    GridLayout:          canvas:            Color:                rgba: 37 / 255., 39 / 255., 30 / 255., 1            Rectangle:                pos: self.pos                size: self.size          # Adding grids to Page 3        # It may be row or column        cols: 2          # In first Grid        # Adding Label + Image        Label:            text: 'page 3'         AsyncImage:            source: 'http://kivy.org/slides/kivyandroid-thumb.jpg'          # In Second Grid        # Adding Button + Image        Button:            text: 'Its User:):)'            on_press: print("Heloo User This is the Last Page")         AsyncImage:            source: 'http://kivy.org/slides/kivypictures-thumb.jpg'          # In third grid        # Adding Widget + Image                 Widget         AsyncImage:            source: 'http://kivy.org/slides/particlepanda-thumb.jpg'
Output:Image 1: 
Image 2: 
Image 3: 
Video Output: 
  Reference: https://kivy.org/doc/stable/gettingstarted/layouts.html 
sweetyty
kk9826225
simranarora5sos
sagartomar9927
Python-gui
Python-kivy
Python
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Different ways to create Pandas Dataframe
Enumerate() in Python
Python String | replace()
How to Install PIP on Windows ?
*args and **kwargs in Python
Python Classes and Objects
Introduction To PYTHON
Python OOPs Concepts
Convert integer to string in Python
Python | os.path.join() method