SegmentedButton#
#
New in version 1.2.0.
Segmented buttons help people select options, switch views, or sort elements.
Segmented buttons can contain icons, label text, or both
Two types: single-select and multi-select
Use for simple choices between two to five items (for more items or complex choices, use chips)
Single-select segmented button
Multi-select segmented button
Anatomy#
Icons#
Icons may be used as labels by themselves or alongside text. If an icon is used without label text, it must clearly communicate the option it represents.
Use with text and icon#
MDSegmentedButton:
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-python"
MDSegmentButtonLabel:
text: "Python"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-javascript"
MDSegmentButtonLabel:
text: "Java-Script"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-swift"
MDSegmentButtonLabel:
text: "Swift"
Use without text with an icon#
MDSegmentedButton:
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-python"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-javascript"
MDSegmentedButtonItem:
MDSegmentButtonIcon:
icon: "language-swift"
Use only text#
MDSegmentedButton:
MDSegmentedButtonItem:
MDSegmentButtonLabel:
text: "Python"
MDSegmentedButtonItem:
MDSegmentButtonLabel:
text: "Java-Script"
MDSegmentedButtonItem:
MDSegmentButtonLabel:
text: "Swift"
Multiselect#
For multiple marking of elements, use the
kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButton.multiselect
parameter:
MDSegmentedButton:
multiselect: True
Type#
Density can be used in denser UIs where space is limited. Density is only applied to the height. Each step down in density removes 4dp from the height.
from kivy.lang import Builder
from kivymd.uix.label import MDLabel
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.segmentedbutton import (
MDSegmentedButton,
MDSegmentedButtonItem,
MDSegmentButtonLabel,
)
from kivymd.app import MDApp
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
id: box
orientation: "vertical"
size_hint_x: .7
adaptive_height: True
spacing: "24dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Example(MDApp):
def on_start(self):
for segment_type in ["large", "normal", "medium", "small"]:
self.root.ids.box.add_widget(
MDBoxLayout(
MDLabel(
text=f"Type '{segment_type}'",
adaptive_height=True,
bold=True,
pos_hint={"center_y": 0.5},
halign="center",
),
MDSegmentedButton(
MDSegmentedButtonItem(
MDSegmentButtonLabel(
text="Songs",
),
),
MDSegmentedButtonItem(
MDSegmentButtonLabel(
text="Albums",
),
),
MDSegmentedButtonItem(
MDSegmentButtonLabel(
text="Podcasts",
),
),
type=segment_type,
),
orientation="vertical",
spacing="12dp",
adaptive_height=True,
)
)
def build(self):
return Builder.load_string(KV)
Example().run()
A practical example#
import os
from faker import Faker
from kivy.clock import Clock
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
import asynckivy
KV = '''
<UserCard>
adaptive_height: True
radius: 16
MDListItem:
radius: 16
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.secondaryContainerColor
MDListItemLeadingAvatar:
source: root.album
MDListItemHeadlineText:
text: root.name
MDListItemSupportingText:
text: root.path_to_file
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
orientation: "vertical"
padding: "12dp"
spacing: "12dp"
MDLabel:
adaptive_height: True
text: "Your downloads"
theme_font_style: "Custom"
font_style: "Display"
role: "small"
MDSegmentedButton:
size_hint_x: 1
MDSegmentedButtonItem:
on_active: app.generate_card()
MDSegmentButtonLabel:
text: "Songs"
active: True
MDSegmentedButtonItem:
on_active: app.generate_card()
MDSegmentButtonLabel:
text: "Albums"
MDSegmentedButtonItem:
on_active: app.generate_card()
MDSegmentButtonLabel:
text: "Podcasts"
RecycleView:
id: card_list
viewclass: "UserCard"
bar_width: 0
RecycleBoxLayout:
orientation: 'vertical'
spacing: "16dp"
padding: "16dp"
default_size: None, dp(72)
default_size_hint: 1, None
size_hint_y: None
height: self.minimum_height
'''
class UserCard(MDBoxLayout):
name = StringProperty()
path_to_file = StringProperty()
album = StringProperty()
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
def generate_card(self):
async def generate_card():
for i in range(10):
await asynckivy.sleep(0)
self.root.ids.card_list.data.append(
{
"name": fake.name(),
"path_to_file": f"{os.path.splitext(fake.file_path())[0]}.mp3",
"album": fake.image_url(),
}
)
fake = Faker()
self.root.ids.card_list.data = []
Clock.schedule_once(lambda x: asynckivy.start(generate_card()))
Example().run()
API break#
1.2.0 version#
MDSegmentedButton:
on_marked: func(*args)
MDSegmentedButtonItem:
icon: ...
text: ...
2.0.0 version#
MDSegmentedButton:
MDSegmentedButtonItem:
on_active: func(*args)
MDSegmentButtonIcon:
icon: ...
MDSegmentButtonLabel:
text: ...