The problem of choosing a Kivy layout

Question

I am going to create a Kivy user interface for my robot project, my only problem is working with layouts, I am confused.

I will Kivy GUI image that I want to create for him in Kivy to find out which is the best choice (BOX, Grid, Relative, ..) I know that I have to mix them and use 2 or more layouts together but I cannot correctly select, I read the Kivy documentation and I tried to use the Kivy constructor, but still I couldn’t select the best layouts. The maximum window size is 800x600.

Answer 1

I would prefer SimpleTableLayout, this is a widget available in Kivy Garden: Simple Laout table - Kivy Garden

If you do not know how to use Kivy-Garden, here are the installation instructions: How to install kivy garden

SimpleTableLayout supports separation of rows and columns, as well as obtaining a widget for a specific cell: SimpleTableLayout.cell(row, col)

A small example for your application:

 <SimpleTableLayout>: rows:10 cols:14 <Gauge1>: rowspan:2 colspan:2 <SpaceHolderWidget>: rowspan:12 <SpaceHolderWidget>: colspan: 2 <SmallGauge1>: <SpaceHolderWidget>: <SmallGauge2>: <SpaceHolderWidget>: colspan:2 <SpaceHolderWidget>: rowspan:12 <Gauge2>: rowspan:2 colspan:2 <Canvas>: rowspan:5 colspan:7 

Answer 2

If you don’t know which layout to use, use a grid layout because it is the most versatile.

In general, if you want to put n widgets in a row, set rows: 1 . If you want to put n widgets in a column, set cols: 1 .

Then, manipulate size_hint to set the widget to the correct size.

You can use blank shortcuts to create spaces between widgets.

About Kivy Designer - First, familiarize yourself with customizing the user interface before using this tool.

 #:kivy 1.9.0 < RoundGauge@Button >: text: 'gauge' < SidePanel@GridLayout >: cols: 1 size_hint_x: .2 RoundGauge: size_hint_y: .5 RoundGauge: size_hint_y: .5 GridLayout: rows: 1 Slider: orientation: 'vertical' Slider: orientation: 'vertical' # main layout divided into bottom gauges and screen part GridLayout: cols: 1 canvas: Color: rgba: 1,1,1,.5 Rectangle: size: self.size # both side panels and screen part GridLayout: rows: 1 # left panel SidePanel: # middle panel GridLayout: cols: 1 # upper gauges GridLayout: rows: 1 size_hint_y: .3 Label: RoundGauge: size_hint_x: .5 Label: size_hint_x: .1 RoundGauge: size_hint_x: .5 Label: Label: text: 'screen' canvas: Color: rgba: 1,1,1,.5 Rectangle: size: self.size pos: self.pos # bottom gauges GridLayout: rows: 1 size_hint_y: .3 RoundGauge: RoundGauge: RoundGauge: RoundGauge: RoundGauge: RoundGauge: # right panel SidePanel: GridLayout: rows: 1 size_hint_y: .2 RoundGauge: RoundGauge: RoundGauge: RoundGauge: RoundGauge: RoundGauge: RoundGauge: