Implementation
The first step to getting started with ScrollView Widget is that you need to first import it.
from kivy.uix.scrollview import ScrollView
You can also try this code with Online Python Compiler
Basic Method
After importing the module you have to follow the basic algorithm given below:
1. import kivy grid Layout
2. import Button Widget
3. Import the scrollable view
4. import window
5. import touch
6. create the object of GridLayout
7. Now bind the Button Widget with the Object of GridLayout
8. Run an app
Python Code
# import the necessary module such as GridLayout for laying our
# widget within it
from kivy.uix.gridlayout import GridLayout
# import Kivy button from the Button module for clickable items
from kivy.uix.button import Button
# since we are building a scrollable view we need to import scrollview # from kivy uix package
from kivy.uix.scrollview import ScrollView
# used to set the size of the window
from kivy.core.window import Window
# Perform the touch action over the clickable button widget
from kivy.app import runTouchApp
layout = GridLayout(cols=1, spacing=10, size_hint_y=None)
layout.bind(minimum_height=layout.setter('height'))
# Iterating over the range of 100 to create a button of similar property 100 times
for i in range(100):
btn = Button(text='Coding Ninjas ' + str(i), size_hint_y=None, height=40)
# add the button widget to layout
layout.add_widget(btn)
# creating the scrollable view for our application with given size as per specified in the window module
root = ScrollView(size_hint=(1, None), size=(Window.width, Window.height))
root.add_widget(layout)
# Run our scrollable touch application
runTouchApp(root)
You can also try this code with Online Python Compiler
Terminal Output
App Output
You can also change the color of scroll bar as shown in the code given below, for that you have to modify the property listed below:
1. bar_color: requires a list in RGB format for specifying bar color.
2. bar_width: requires number for specifying bar size
Python Code
# import App from kivy app
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 ScrollUIApp(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("#FFA500")
Rectangle:
pos: self.pos
size: self.size
Label:
size_hint: (1, None)
height: 300
markup: True
text: "[size=78]Coding Ninjas[/size]"
Label:
size_hint: (1, None)
height: 300
markup: True
text: "[size=78]Coding Ninjas[/size]"
Label:
size_hint: (1, None)
height: 300
markup: True
text: "[size=78]Coding Ninjas[/size]"
Label:
size_hint: (1, None)
height: 300
markup: True
text: "[size=78]Coding Ninjas[/size]"
)
# running the application
if __name__ == '__main__':
ScrollUIApp().run()
You can also try this code with Online Python Compiler
Frequently Asked Questions
What are Kivy widgets?
A Widget is the base building block of GUI interfaces in Kivy. It provides a Canvas that can be used to draw on the screen. It receives events and reacts to them.
What is Kivy Uix, exactly?
kivy.uix is a module. Widgets are graphical user interface components that are part of the User Experience. Classes for building and maintaining Widgets may be found in the kivy. uix module.
Is Kivy good for Android?
Kivy is a great tool for developing Android Apps. The best advantage of using kivy is that it is cross-platform and the same project can be used to publish apps on iOS, Android, Windows , OS x... However, it has some performance-related disadvantages(as do most cross-platform tools like unity, cocos etc).
What is Kivy's relative layout?
Relative Layout: This layout allows you to assign children relative coordinates. Use the FloatLayout if you want absolute placement. The RelativeLayout class is similar to the FloatLayout class, with the exception that its child widgets are positioned relative to the layout.
Conclusion
If you have reached here that means, you really enjoyed this article. This article covers the implementation of Scroll View widget in kivy with code snippets and their use cases. You might be interested in articles such as Floating Layout in Kivy, Carousel Layout in Kivy, Button Action in Kivy, Button Color in Kivy and Slider widget in Kivy.
Do upvote our blog to help other ninjas grow, and head over to our practice platform Coding Ninjas Studio to practise top problems, attempt mock tests, read interview experiences, and much more.
Happy Learning!
518+ registered 
