Background colour for custom dropdown

[Shoumik Das]

Hi! I have built a custom drop down using a combination of an image and a label, which is further integrated with the button behaviour class to get the desired effect of custom drop down buttons.Here is the code:

Python:

class ImageLabel(BoxLayout):

source = StringProperty('images/expand-arrow-48.png')

text = StringProperty('User')

class ImageLabelButton(ButtonBehavior, ImageLabel):

pass

class ImageLabelButtonTop(ButtonBehavior, ImageLabel):

pass

Kivy:

<ImageLabel>:

orientation: 'horizontal'

size_hint_y: None

height: '40dp'

spacing: 1

Image:

size_hint_x: 0.3

keep_ratio: True

source: root.source  # root - ImageLabel

Label:

size_hint_x: 0.7

markup: True

text: root.text  # root - ImageLabel

color: 0, 0, 0, 1

<ImageLabelButton>:

on_release:

# Tuple returned in dropdown.select() method to pass two values bundled as one.

app.root.get_screen('status_screen').ids.dropdown.select((self.text, self.source))

# Invoked inside ImageLabelButton rule

# app.root - Screen, root - ImageLabelButton object, self - ImageLabelButton object

The drop down is invoked as follows:

ImageLabelButtonTop:

# conflict in the on_release defined for ImageLabelButton and this instance.

id: parent_button

source: 'images/expand-arrow-48.png'

text: 'Value'

on_release:

                                                dropdown.open(self)

on_parent: dropdown.dismiss()

size_hint_y: None

height: '40dp'

DropDown:

id: dropdown

on_select:

# args is a reserved keyword which returns only two values: object alias (0) and data (1).

parent_button.text = args[1][0]

parent_button.source = args[1][1]

# Invoked inside dropdown

# root - Screen, self - DropDown object

ImageLabelButton:

source: 'images/t-circled-48.png'

text: 'Test Value'

ImageLabelButton:

source: 'images/l-circled-48.png'

text: 'Link Value'

Right now, the drop down buttons appear against a transparent background and I can see other widgets when the drop down expands. I would like to set a (translucent) background colour for the drop down buttons (ImageLabelButton) so that the under-lying widgets are not visible. How can I achieve this?

Thanks

[Elliot Garbus]

Use the canvas to create a rectangle in the ImageLabel, set the desired opacity of the color.  You may want to set the canvas.after  depending on the desired effect.

 

class ImageLabel(BoxLayout):

   source = StringProperty('images/expand-arrow-48.png')

   text = StringProperty('User')

      canvas.before:

        Color:

            rgba:   # set the color you want with the last value (opacity) less than 1.

        Rectangle:

            size: self.size

            pos: self.pos

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/8109be10-f793-45f5-91c4-44fdec598973o%40googlegroups.com.

 

[Shoumik Das]

That worked perfect. Thanks!!

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.