Page layout - resetting the page in Kivy / Python

Question

I'm just getting started with Kivy programming for Python. I'm having trouble in using the PageLayout. This is my Python Code so far (Python 3.6.2):

import kivy

from kivy.app import App
from kivy.uix.pagelayout import PageLayout


class PageApp(App):

    def build(self):
        return PageLayout()

paApp = PageApp()
paApp.run()

The Kivy-file (PageApp.kv) has the following content:

<PageLayout>:
    canvas:
        Color:
            rgb: 0, .5, .95
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        orientation: "vertical"
        Button:
            text: "This is a test button"
            size_hint_y: .4
        Label:
            markup: True
            text: "This is a [b]looooong[/b] text... "*100
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30

    BoxLayout:
        orientation: "vertical"
        Label:
            markup: True
            text: "This is an even [b]looooonger[/b] text... "*100
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30
        Button:
            text: "This is a second test button"
            size_hint_y: .2

    Button:
        text: "Page 3"

    Button:
        text: "Page 4"

The result looks like this: Page 1, Page 2 (after swiping)

As is visible from the screenshots, the following problems appear:

The Labels don't show.
The background is only partially in the color that I specified in the canvas-settings.
Most importantly: the page doesn't seem to reset after swiping, leading to the problem that elements from the first page remain on the page when swiping to page 2. Page 3 and 4 seem to work fine, because the buttons take the whole space...

Does anyone know how to fix these issues?

score 0 · Answer 1 · answered Oct 25 '17 at 15:36

Okay

you don't set the text_size property of the label and the text that you want to show is very long
Sorry but the background color is exactly the color that you specified in the canvas, see the image below
You can set the border property of the PageLayout if you want to reduce the size of the next/previews page in the current
If you just want a widget to swipe arround sub widgets I suggest you to use the Caroussel widget

Try the code below:

-main.py

import kivy
from kivy.app import App
from kivy.uix.pagelayout import PageLayout

class PageApp(App):

   def build(self):
      return PageLayout()

paApp = PageApp()
paApp.run()

-page.kv

<PageLayout>:
   border: 5
   BoxLayout:
      canvas:
         Color:
            rgb: 0, .5, .95
         Rectangle:
            pos: self.pos
            size: self.size
      orientation: "vertical"
      Button:
         text: "This is a test button"
         size_hint_y: .4
      Label:
         markup: True
         text: "This is a [b]looooong[/b] text... " * 100
         text_size: self.size
         color: 0, 0, 0, 1
         outline_color: 0, 0.5, 0.5, 1
         font_size: 30
   BoxLayout:
      canvas:
         Color:
            rgb: 0, .5, .95
         Rectangle:
            pos: self.pos
            size: self.size
      orientation: "vertical"
      Label:
         markup: True
         text: "This is an even [b]looooonger[/b] text... " * 100
         color: 0, 0, 0, 1
         outline_color: 0, 0.5, 0.5, 1
         font_size: 30
         text_size: self.size
      Button:
         text: "This is a second test button"
         size_hint_y: .2
   Button:
      canvas.before:
         Color:
            rgb: 0, .5, .95
         Rectangle:
            pos: self.pos
            size: self.size
      text: "Page 3"
   Button:
      canvas.before:
         Color:
            rgb: 0, .5, .95
         Rectangle:
            pos: self.pos
            size: self.size
      text: "Page 4"

-some outputs:

proof for the background color:

I hope this helps !

Thanks for the hints, this actually helps a lot! It works perfectly fine now - both in terms of text and background formatting. Just for my understanding: what are the advantages of the Carousel-class compared to a PageLayout? I have implemented solutions for both now and as far as I can see, the only difference is that the Carousel allows me to infinitely loop through the slides, whereas the PageLayout (at least by default) doesn't. Moreover, is it possible to format the background color for the PageLayout in general to avoid having to repeat the color formatting step for every Widget? — J Müsli, Oct 26 '17 at 09:50
I have tried defining the canvas directly after the border-property of the PageLayout, but when I alter the background in one of the following pages, the page after that will have the "transparency issue" discussed above, i.e., show Widgets of the previous page, when I don't define the canvas property again on that specific page... — J Müsli, Oct 26 '17 at 10:02
Carousel allows you a better swiping between the pages, but I suggested that because of your third issue — Simon Mengong, Oct 26 '17 at 16:24

ikolim · Accepted Answer · 2017-10-25T16:23:13.210

Please refer to the example below for details.

Question The Labels don't show.
Answer The two Labels did show up but as black labels because you have exceeded the text size. In page 1, I have changed the multiplication value from 100 to 49. Anything 50 and above, you will see a black label.
In page 2, I have removed 100. Anything between 2 and 36, the text overflowed into page 1. Anything 37 and above, you will see a black label.

Question The background is only partially in the color that I specified in the canvas-settings. Answer The color of the canvas was not set for page 2. Therefore, it is using the color from page 1.

Question Most importantly: the page doesn't seem to reset after swiping, leading to the problem that elements from the first page remain on the page when swiping to page 2. Page 3 and 4 seem to work fine, because the buttons take the whole space...
Answer You will see border areas on the right or left hand side which is use for swiping from one page to the next.

Example

main.py

from kivy.app import App
from kivy.uix.pagelayout import PageLayout


class PageLayoutDemo(PageLayout):
    pass


class TestApp(App):
    title = "Kivy PageLayout Demo"

    def build(self):
        return PageLayoutDemo()


if __name__ == "__main__":
    TestApp().run()

test.kv

#:kivy 1.10.0

<PageLayoutDemo>:
    BoxLayout:
        canvas:
            Color:
                rgb: 0, .5, .95, 1
            Rectangle:
                pos: self.pos
                size: self.size

        orientation: "vertical"
        Button:
            text: "This is a test button"
            size_hint_y: .4
        Label:
            markup: True
            text: "This is a [b]looooong[/b] text... " * 49
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30

    BoxLayout:
        orientation: "vertical"
        canvas:
            Color:
                rgba: 109/255., 8/255., 57/255., 1
            Rectangle:
                pos: self.pos
                size: self.size
        Label:
            markup: True
            text: "This is an even [b]looooonger[/b] text... "
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30
        Button:
            text: "This is a second test button"
            size_hint_y: .2

    Button:
        text: "Page 3"

    Button:
        text: "Page 4"

Output

Thanks for the input! I wasn't aware of the content limitation regarding text length! This was very helpful, I get the result I was looking for now! — J Müsli, Oct 26 '17 at 10:04

Page layout - resetting the page in Kivy / Python

2 Answers2

Example

main.py

test.kv

Output