0
# Layout Containers
1
2
Material Design layout containers that provide structure and organization for user interfaces. These layouts follow Material Design spacing and elevation guidelines while providing the flexibility needed for responsive design across different screen sizes and orientations.
3
4
## Capabilities
5
6
### Basic Layout Containers
7
8
Standard layout containers with Material Design styling and adaptive sizing capabilities.
9
10
```python { .api }
11
class MDBoxLayout:
12
"""
13
Material Design box layout container.
14
15
Arranges children in a vertical or horizontal line with Material Design
16
spacing and adaptive sizing options.
17
"""
18
orientation: str # "vertical" or "horizontal"
19
adaptive_height: bool # Adapt height to children's minimum height
20
adaptive_width: bool # Adapt width to children's minimum width
21
adaptive_size: bool # Adapt both width and height
22
spacing: str | int # Spacing between children (e.g., "10dp" or 10)
23
padding: str | list # Padding around container
24
25
class MDGridLayout:
26
"""
27
Material Design grid layout container.
28
29
Arranges children in a grid with specified columns and rows.
30
"""
31
cols: int # Number of columns
32
rows: int # Number of rows (optional, calculated if not set)
33
spacing: str | int # Spacing between grid items
34
padding: str | list # Padding around container
35
36
class MDFloatLayout:
37
"""
38
Material Design float layout container.
39
40
Allows absolute positioning of children with pos_hint for relative positioning.
41
"""
42
43
class MDRelativeLayout:
44
"""
45
Material Design relative layout container.
46
47
Positions children relative to the layout or other children.
48
"""
49
50
class MDStackLayout:
51
"""
52
Material Design stack layout container.
53
54
Arranges children in rows or columns, wrapping to new lines as needed.
55
"""
56
orientation: str # Layout orientation
57
spacing: str | int # Spacing between items
58
59
class MDAnchorLayout:
60
"""
61
Material Design anchor layout container.
62
63
Anchors children to edges or center of the layout.
64
"""
65
anchor_x: str # "left", "center", "right"
66
anchor_y: str # "bottom", "center", "top"
67
```
68
69
### Specialized Layout Containers
70
71
Advanced layout containers for specific Material Design patterns and responsive design.
72
73
```python { .api }
74
class MDCircularLayout:
75
"""
76
Circular layout that arranges children in a circle.
77
78
Useful for creating circular menus, radial layouts, and decorative arrangements.
79
"""
80
start_from: float # Starting angle in degrees
81
max_degree: float # Maximum degree span
82
83
class MDResponsiveLayout:
84
"""
85
Responsive layout that adapts to different screen sizes.
86
87
Automatically adjusts layout and sizing based on device type and orientation.
88
"""
89
mobile_view: object # Layout for mobile devices
90
tablet_view: object # Layout for tablet devices
91
desktop_view: object # Layout for desktop devices
92
```
93
94
### Screen Management
95
96
Screen and screen manager components for managing multiple views in applications.
97
98
```python { .api }
99
class MDScreen:
100
"""
101
Material Design screen container.
102
103
Represents a single screen in a multi-screen application with Material Design styling.
104
"""
105
name: str # Unique screen name
106
manager: object # Reference to screen manager
107
108
class MDScreenManager:
109
"""
110
Material Design screen manager.
111
112
Manages multiple screens with smooth transitions and Material Design animations.
113
"""
114
transition: object # Transition animation between screens
115
current: str # Name of currently displayed screen
116
117
def add_widget(self, screen: MDScreen):
118
"""
119
Add a screen to the manager.
120
121
Args:
122
screen (MDScreen): Screen to add
123
"""
124
125
def get_screen(self, name: str) -> MDScreen:
126
"""
127
Get screen by name.
128
129
Args:
130
name (str): Screen name
131
132
Returns:
133
MDScreen: Screen instance
134
"""
135
```
136
137
### Card Containers
138
139
Card-based containers that provide elevated surfaces for content grouping.
140
141
```python { .api }
142
class MDCard:
143
"""
144
Material Design card container.
145
146
Provides an elevated surface for grouping related content with consistent
147
Material Design styling including shadows, rounded corners, and theming.
148
"""
149
elevation: float # Card elevation (shadow depth)
150
radius: list # Corner radius [top-left, top-right, bottom-right, bottom-left]
151
md_bg_color: str | list # Background color
152
line_color: str | list # Border line color
153
style: str # Card style: "elevated" or "outlined"
154
155
# Ripple effect properties
156
ripple_behavior: bool # Enable ripple effect on touch
157
158
class MDCardSwipe:
159
"""
160
Swipeable card container with reveal actions.
161
162
Card that can be swiped to reveal action buttons or additional content.
163
"""
164
type_swipe: str # "auto" or "hand" - swipe type
165
open_progress: float # Swipe open progress (0-1)
166
167
def open_card(self):
168
"""Open the swipe card to reveal actions."""
169
170
def close_card(self):
171
"""Close the swipe card."""
172
173
class MDCardSwipeFrontBox:
174
"""Front content box for swipeable card."""
175
176
class MDCardSwipeLayerBox:
177
"""Layer content box (revealed on swipe) for swipeable card."""
178
```
179
180
### Separators and Dividers
181
182
Visual separator components for organizing content within layouts.
183
184
```python { .api }
185
class MDSeparator:
186
"""
187
Material Design separator line.
188
189
Provides visual separation between content sections with consistent
190
Material Design styling and theming.
191
"""
192
color: str | list # Separator color
193
height: str # Separator height (e.g., "1dp")
194
orientation: str # "horizontal" or "vertical"
195
```
196
197
### Scrollable Containers
198
199
Scrollable layout containers for content that exceeds screen bounds.
200
201
```python { .api }
202
class MDScrollView:
203
"""
204
Material Design scroll view container.
205
206
Provides scrollable viewport for content larger than the container with
207
Material Design scroll indicators and behavior.
208
"""
209
scroll_type: list # Scroll directions: ["bars", "content"]
210
bar_width: str # Scrollbar width
211
effect_cls: object # Scroll effect class
212
213
def scroll_to(self, widget):
214
"""
215
Scroll to make widget visible.
216
217
Args:
218
widget: Widget to scroll to
219
"""
220
```
221
222
### Adaptive Sizing Behavior
223
224
Base behavior that provides adaptive sizing capabilities to layout containers.
225
226
```python { .api }
227
class MDAdaptiveWidget:
228
"""
229
Base widget with adaptive sizing behaviors.
230
231
Provides automatic size adaptation based on content with Material Design
232
spacing and layout guidelines.
233
"""
234
adaptive_height: bool # Adapt height to minimum height
235
adaptive_width: bool # Adapt width to minimum width
236
adaptive_size: bool # Adapt both dimensions
237
238
def on_adaptive_height(self, instance, value: bool):
239
"""Handle adaptive height changes."""
240
241
def on_adaptive_width(self, instance, value: bool):
242
"""Handle adaptive width changes."""
243
244
def on_adaptive_size(self, instance, value: bool):
245
"""Handle adaptive size changes."""
246
```
247
248
## Usage Examples
249
250
### Basic Layout with Cards
251
252
```python
253
from kivymd.uix.boxlayout import MDBoxLayout
254
from kivymd.uix.card import MDCard
255
from kivymd.uix.label import MDLabel
256
257
# Create main layout
258
layout = MDBoxLayout(
259
orientation="vertical",
260
adaptive_height=True,
261
spacing="16dp",
262
padding="16dp"
263
)
264
265
# Create cards with content
266
for i in range(3):
267
card = MDCard(
268
elevation=4,
269
radius=[8, 8, 8, 8],
270
md_bg_color="white",
271
size_hint_y=None,
272
height="100dp",
273
padding="16dp"
274
)
275
276
label = MDLabel(
277
text=f"Card {i + 1}",
278
theme_text_color="Primary"
279
)
280
281
card.add_widget(label)
282
layout.add_widget(card)
283
```
284
285
### Responsive Grid Layout
286
287
```python
288
from kivymd.uix.gridlayout import MDGridLayout
289
from kivymd.uix.card import MDCard
290
291
# Create responsive grid
292
grid = MDGridLayout(
293
cols=2, # Will adapt based on screen size
294
spacing="16dp",
295
adaptive_height=True,
296
padding="16dp"
297
)
298
299
# Add cards to grid
300
for i in range(6):
301
card = MDCard(
302
elevation=2,
303
size_hint_y=None,
304
height="120dp"
305
)
306
grid.add_widget(card)
307
```