Python | Scrollview widget in kivy

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 Desktop applications.

Kivy Tutorial – Learn Kivy with Examples.

Scroll view:

The ScrollView widget provides a scrollable/pannable viewport that is clipped at the scrollview’s bounding box. Scroll view accepts only one child and applies a window to it according to 2 properties: 

1. scroll_x
2. scroll_y

To determine if the interaction is a scrolling gesture, these properties are used:

• scroll_distance: the minimum distance to travel, defaults to 20 pixels.
• scroll_timeout: the maximum time period, defaults to 55 milliseconds.

Note:
To use the scrollview you must have to import it:
from kivy.uix.scrollview import ScrollView

Basic Approach:
1) import kivy
2) import kivyApp
3) import scroll view
4) import string property
5) Set minimum version(optional)
6) create the scroll view class
7) Build the .kv file within the .py file
8) Run an app

Implementation of the code:

Python3

# Program to explain how to use scroll view in kivy

# 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 Label widget is for rendering text
from kivy.uix.label import Label

# The ScrollView widget provides a scrollable view
from kivy.uix.scrollview import ScrollView

# Property that represents a string value
from kivy.properties import StringProperty

# Static main function that starts the application loop.
from kivy.base import runTouchApp

# Builder is a global Kivy instance used in
# widgets that you can use to load other
# kv files in addition to the default ones.
from kivy.lang import Builder


# Build the .kv file
Builder.load_string('''

# Define the scroll view
<ScrollableLabel>:
    text: 'You are learning Kivy' * 500
    Label:
        text: root.text
        font_size: 50
        text_size: self.width, None
        size_hint_y: None
        height: self.texture_size[1]
''')


# Define scrollview class
class ScrollableLabel(ScrollView):
    text = StringProperty('')

# run the App
runTouchApp(ScrollableLabel())

Output:

You can also change color of ScrollBar and its width as shown below code but for that, you have to use properties of ScrollView  like 

1. bar_color: It requires a list in RGB format for specifying bar color
2. bar_width: It requires a number for specifying the bar size

Code For Changing Bar Color and Bar width:

Python3

from kivy.app import App

# importing builder from kivy
from kivy.lang import Builder


# this is the main class which will
# render the whole application
class uiApp(App):

    # method which will render our application
    def build(self):
        return Builder.load_string(

            BoxLayout:
            size_hint: (1, 1)
            ScrollView:

            # here we can set bar color
            bar_color: [0, 0, 255, 1]

            # here we can set bar width
            bar_width: 12

            BoxLayout:



            size: (self.parent.width, self.parent.height-1)
            id: container
            orientation: "vertical"
            size_hint_y: None

            height: self.minimum_height

            canvas.before:
            Color:

            rgba:  rgba("#50C878")
            Rectangle:

            pos: self.pos
            size: self.size

            Label:
            size_hint: (1, None)
            height: 300
            markup: True
            text: "[size=78]GeeksForGeeks[/size]"
            Label:
            size_hint: (1, None)
            height: 300
            markup: True
            text: "[size=78]GeeksForGeeks[/size]"
            Label:
            size_hint: (1, None)
            height: 300
            markup: True
            text: "[size=78]GeeksForGeeks[/size]"
            Label:
            size_hint: (1, None)
            height: 300
            markup: True
            text: "[size=78]GeeksForGeeks[/size]"

        )


# running the application
uiApp().run()

Output: