SegmentedButton#
New in version 1.2.0. Segmented buttons help people select options, switch views,
or sort elements. By default, segmented buttons support single marking of elements: For multiple marking of elements, use the
The width of the panel of segmented buttons will be equal to the width
of the texture of the widest button multiplied by the number of buttons: But you can use the size_hint_x parameter to specify the relative width: You can see below in the documentation from which classes the
The method is called when a segment is marked. The method is called when a segment is unmarked.
Usage#
MDScreen:
MDSegmentedButton:
MDSegmentedButtonItem:
icon: ...
text: ...
MDSegmentedButtonItem:
icon: ...
text: ...
MDSegmentedButtonItem:
icon: ...
text: ...
Example#
from kivy.lang import Builder
from kivymd.app import MDApp
KV = '''
MDScreen:
MDSegmentedButton:
pos_hint: {"center_x": .5, "center_y": .5}
MDSegmentedButtonItem:
text: "Walking"
MDSegmentedButtonItem:
text: "Transit"
MDSegmentedButtonItem:
text: "Driving"
'''
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
return Builder.load_string(KV)
Example().run()
kivymd.uix.segmentedbutton.segmentedbutton.MDSegmentedButton.multiselect
parameter:MDSegmentedButton:
multiselect: True
Control width#
MDSegmentedButton:
size_hint_x: .9
Customization#
MDSegmentedButton and
MDSegmentedButtonItem
classes are inherited and use all their attributes such as
md_bg_color, md_bg_color etc. for additional customization of segments.Events#
MDSegmentedButton:
on_marked: app.on_marked(*args)
def on_marked(
self,
segment_button: MDSegmentedButton,
segment_item: MDSegmentedButtonItem,
marked: bool,
) -> None:
print(segment_button)
print(segment_item)
print(marked)
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
from kivymd.uix.segmentedbutton import MDSegmentedButton, MDSegmentedButtonItem
from kivymd.utils import asynckivy
KV = '''
<UserCard>
adaptive_height: True
md_bg_color: "#343930"
radius: 16
TwoLineAvatarListItem:
id: item
divider: None
_no_ripple_effect: True
text: root.name
secondary_text: root.path_to_file
theme_text_color: "Custom"
text_color: "#8A8D79"
secondary_theme_text_color: self.theme_text_color
secondary_text_color: self.text_color
on_size:
self.ids._left_container.size = (item.height, item.height)
self.ids._left_container.x = dp(6)
self._txt_right_pad = item.height + dp(12)
ImageLeftWidget:
source: root.album
radius: root.radius
MDScreen:
md_bg_color: "#151514"
MDBoxLayout:
orientation: "vertical"
padding: "12dp"
spacing: "12dp"
MDLabel:
adaptive_height: True
text: "Your downloads"
font_style: "H5"
theme_text_color: "Custom"
text_color: "#8A8D79"
MDSegmentedButton:
size_hint_x: 1
selected_color: "#303A29"
line_color: "#343930"
on_marked: app.on_marked(*args)
MDSegmentedButtonItem:
text: "Songs"
active: True
MDSegmentedButtonItem:
text: "Albums"
MDSegmentedButtonItem:
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"
return Builder.load_string(KV)
def on_marked(
self,
segment_button: MDSegmentedButton,
segment_item: MDSegmentedButtonItem,
marked: bool,
) -> None:
self.generate_card()
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()
