Table Of Contents
Bubble¶
New in version 1.1.0.

The Bubble widget is a form of menu or a small popup where the menu options are stacked either vertically or horizontally.
The Bubble contains an arrow pointing towards the direction you choose.
Simple example¶
'''
Bubble
======
Test of the widget Bubble.
'''
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.lang import Builder
from kivy.uix.bubble import Bubble
Builder.load_string('''
<cut_copy_paste>
size_hint: (None, None)
size: (150, 50)
pos_hint: {'center_x': .5, 'y': .6}
arrow_pos: 'bottom_mid'
orientation: 'horizontal'
BubbleButton:
text: 'Cut'
BubbleButton:
text: 'Copy'
BubbleButton:
text: 'Paste'
''')
class cut_copy_paste(Bubble):
pass
class BubbleShowcase(FloatLayout):
def __init__(self, **kwargs):
super(BubbleShowcase, self).__init__(**kwargs)
self.but_bubble = Button(text='Press to show bubble')
self.but_bubble.bind(on_release=self.show_bubble)
self.add_widget(self.but_bubble)
def show_bubble(self, *l):
if not hasattr(self, 'bubb'):
self.bubb = bubb = cut_copy_paste()
self.add_widget(bubb)
else:
values = ('left_top', 'left_mid', 'left_bottom', 'top_left',
'top_mid', 'top_right', 'right_top', 'right_mid',
'right_bottom', 'bottom_left', 'bottom_mid', 'bottom_right')
index = values.index(self.bubb.arrow_pos)
self.bubb.arrow_pos = values[(index + 1) % len(values)]
class TestBubbleApp(App):
def build(self):
return BubbleShowcase()
if __name__ == '__main__':
TestBubbleApp().run()
Customize the Bubble¶
You can choose the direction the arrow points towards:
Bubble(arrow_pos='top_mid')
The widgets added to Bubble are orderd by default horizontally as in a Boxlayout. You can change that by:
orientation = 'vertical'
Add Items to the bubble:
bubble = Bubble(orientation = 'vertical')
bubble.add_widget(your_widget_instance)
Remove Items:
bubble.remove_widget(Widget)
or
bubble.clear_widgets()
Access children list, Warning This is important! Use content.children to access the children list:
bubble.content.children
Change Appearance of the bubble:
bubble.background_color = (1, 0, 0, .5) #50% translucent red
bubble.border = [0, 0, 0, 0]
background_image = 'path/to/background/image'
arrow_image = 'path/to/arrow/image'
- class kivy.uix.bubble.Bubble(**kwargs)¶
Bases: kivy.uix.gridlayout.GridLayout
Bubble class. See module documentation for more information.
- arrow_image¶
Image of the arrow pointing to the bubble.
arrow_image is a StringProperty, default to ‘atlas://data/images/defaulttheme/bubble_arrow’.
- arrow_pos¶
Specifies the position of the arrow relative to the bubble. Can be one of: left_top, left_mid, left_bottom top_left, top_mid, top_right right_top, right_mid, right_bottom bottom_left, bottom_mid, bottom_right.
arrow_pos is a OptionProperty, default to ‘bottom_mid’.
- background_color¶
Background color, in the format (r, g, b, a).
background_color is a ListProperty, default to [1, 1, 1, 1].
- background_image¶
Background image of the bubble.
background_image is a StringProperty, default to ‘atlas://data/images/defaulttheme/bubble’.
- border¶
Border used for BorderImage graphics instruction. Used for background_image. Can be used when using custom background.
It must be a list of 4 values: (top, right, bottom, left). Read the BorderImage instructions for more information about how to use it.
border is a ListProperty, default to (16, 16, 16, 16)
- content¶
This is the object where the main content of the bubble is held.
content is a ObjectProperty, default to ‘None’.
- limit_to¶
Specifies the widget to which the bubbles position is limited.
New in version 1.6.0.
limit_to is a ObjectProperty, default to ‘None’.
- orientation¶
This specifies the manner in which the children inside bubble are arranged. Can be one of ‘vertical’, ‘horizontal’
orientation is a OptionProperty, default to ‘horizontal’.
- class kivy.uix.bubble.BubbleButton(**kwargs)¶
Bases: kivy.uix.button.Button
A button intended for use as in a Bubble widget. You can use a “normal” button class, but it will not look good, unless the background is changed.
Instead, you can use this BubbleButton widget that already defined the good background for you.