CODEWITHSUNDEEP
pythonpython-3.xkivy
Yawn
Yawn

Reputation: 91

Changing the size and position of widgets according to window size in Kivy

I've been recently trying to use the library Kivy to make applications that will go onto different devices. Each app is known to resize their elements on-screen according to window size and elements having the same definitions. Since I'm pretty new to the world of Kivy, I was wondering how such a thing can be done.

For example:

This is a resolution of 1000x750 enter image description here

and this is the resolution of 500x350

enter image description here

Notice how the text resizes with the image.

Anything would be greatly appreciated, thanks!

Upvotes: 3

Views: 2255

Answers (2)

Daniel
Daniel

Reputation: 1

It is very simple,
when inserting the size of your widget in the .kv file,
you will need to divide it by 2 or any number depending on the size you want your widget to be.

Example

 Button:
      text: "example"
      size_hint: self.width/2, self.height/2
      pos_hint: self.width/2, self.height/2

With the pos_hint divided by 2, it set the widget to the center
and with size_hint equals to the size of the window divided by 2 or any number,
the size of the widget can be changed due to the change in the window.

It also works for font_size.

Upvotes: 0

Ankit Sangwan
Ankit Sangwan

Reputation: 1247

In kivy most of widgets have an argument called size_hint which as the name suggests sets size of widget according to screen size. It takes value from 0 to 1. A value of 0.5 basically means half of screen. You can use size_hint_x and size_hint_y to define size along x and y axis or together you can use size_hint = (0.5,0.5). Also, if in some cases when you couldn't use size_hint then you can you Window.size to get the screen size of the device as a tuple. Assume you want to make something with size 50% of both x and y. Then you can set size = (Window.size[0]*0.5, Windows.size[1]*0.5) Window.size[0] is basically length along x-axis and Window.size[1] along y axis

Upvotes: 5

Related Questions