Kivy

Question 1

Install Kivy
Make sure you’re using the right version

Answer 1

python –version
pip install kivy
pip list (confirm kivy is installed)
where python (get path for python)

Question 2

Import Kivy and create a class for it.

Answer 2

from kivy.app import App

class TheLabApp(App):
pass

TheLabApp().run()

Always end your class with the suffix ‘App’

We will be Making this a child class of App

Question 3

Create your main widget

Answer 3

from kivy import App
from kivy.uix.widget import Widget

class MainWidget(Widget):
pass

class TheLabApp(App):
pass

TheLabApp().run()

So now we’re inheriting from the App and Widget classes

Create a new file (regular, not python) and name it the same as your App ‘TheLab’

touch TheLab.kv

The kv file will contain all of our content

Question 4

What should you put in your app.kv file?

Answer 4

MainWidget:

Question 5

Download resources for kivy for the class you are taking

Answer 5

https://codwithjonathan.net/resourceskivy

This should now be in your downloads folder

Question 6

On your main screen create a button that has Hello on it
Give it 400 pixels of width and 200 pixels of height

Give it a position of 100, 200

Answer 6

MainWidget:

<MainWidget>:
Button:
text: "Hello"
size: 400, 200
pos: 100, 200

kv files only use : not =
</MainWidget>

Question 7

Why do we not want to use size and position on our buttons?

What can we use instead?

Answer 7

If we set a fixed size the application will look different via different formats like IOS and Windows.

You will use density independent pixels
size: “40dp”, “20dp”
pos: “100dp”, “200dp”

Question 8

Create two touch sized buttons

Answer 8

MainWidget:

<MainWidget>:
Button:
text: "Hello"
size: '40dp', '20dp'
pos: '100dp', '200dp'

Button:
text: "Hello"
size: '40dp', '20dp'
pos: '200dp', '300dp'
</MainWidget>

Question 9

Display text on the screen
Make the text 100% red and 100% visible (alpha)

Answer 9

Label:
text: “Hello2”
size: ‘100dp’, ‘80dp’
pos: ‘200dp’, 200dp’
color: 1, 0, 0, 1

color = red, green, blue, alpha (transparency)

Question 10

The KV file simplifies the structure of your code but you can input it directly.

Create two buttons that are Side By side taking up the whole screen

Stack your buttons/elements

Make these buttons/elements stacked vertically

Answer 10

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.widget import Widget

class BoxLayOutExample(BoxLayout):
def __init__(self, kwargs):
super().__init__(kwargs)
self.orientation = ‘vertical’
b1 = Button(text=’A’)
b2 = Button(text=’B’)
b3 = Button(text=’C’
self.add_widget(b1)
self.add_widget(b2)
self.add_widget(b3)

class MainWidget(Widget):
pass

class TheLabApp(App):
pass

TheLabApp().run()

BoxLayout stacks your buttons horizontally
self.add_widget() - These have to be in the order you want.

Replace In Your KV File
MainWidget:
with
BoxLayoutExample:

Question 11

Going back to the kv file, create your buttons and make them vertical
Make a label below them
We want to change the proportions:
Make the first button 80% width and 50% for height of it’s original size
The next button should be twice the original height
The next button should be a fixed size of 40 width and a height that moves along with the window
This last Button should be moved to the middle of the screen

Answer 11

In your main.py
from kivy.uix.boxlayout import BoxLayout

class BoxLayoutExample(BoxLayout):
pass

In your .kv file

MainWidget:

BoxLayoutExample:

<BoxLayoutExample>:
orientation: 'vertical'
Button:
text: 'A'
size_hint: .8, .5
Button:
text: 'B'
size_hint: 1, 2
Button:
text: 'C'
size: '40dp' '40dp'
or
width: '40dp'
height: '40dp'
size_hint: None, 1
#x, center_x, right <- horizontal
#y, center_y, top <- veritcal
pos_hint: {'center_x': .5}

Label:
text: 'D'
</BoxLayoutExample>

Question 12

What code would you use to change the position of a button horizontally and vertically

Answer 12

Horizontal:
x, center_x,right

Vertical:
y, center_y, top