Bubble

New in version 1.1.0.

_images/bubble.jpg

The Bubble widget is a form of menu or a small popup where the options are stacked either vertically or horizontally.

The Bubble contains one 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__ in ('__main__', '__android__'):
    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 horizintally like 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 itself for background_image. Can be used when using custom background.

It must be a list of 4 value: (top, right, bottom, left). Read the BorderImage instruction for more information about how to play with 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’.

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 intented to be used as a widget for Bubble widget. You can use “normal” button class, but it will not look good, and you’ll need to change yourself the background to be ok.

Instead, you can use this BubbleButton widget that already defined the good background for you.