Need help with DropDown implementation

[Shoumik Das]

Hi. I am trying to implement a drop-down widget in my app where each value/option would consist of an image and a label (plain text) placed side by side. For testing purpose, this is how I implemented the DropDown widget with three dummy labels as place-holders:

main.py

from kivy.uix.dropdown import DropDown

class CustomDropDown(DropDown):
    pass

class SivaStatusScreen(Screen):
    pass

kv

<CustomDropDown>:
    size_hint_y: None

<SivaStatusScreen>:
    name: 'status_screen'
    canvas.before:
        Color:
            rgba: 255/255, 255/255, 255/255, 1
        Rectangle:
            pos: self.pos
            size: self.size
    AnchorLayout:
        id: status_add
        anchor_x: 'right'
        anchor_y: 'bottom'
        ImageButton:
            id: status_addbtn
            source: {'normal': 'images/plus-96.png', 'down': 'images/plusblue-96.png'} [self.state]
            size_hint: 0.2, 0.2
            on_release: root.new_status_entry()
    BoxLayout:
        id: status_layout
        orientation: 'vertical'
        BoxLayout:
            id: actionbar_layout
            size_hint_y: None
            height: 48
            ActionBar:
                id: status_actionbar
                pos_hint: {'top': 1}
                background_image: ''
                background_color: 195/255, 60/255, 35/255, 1
                ActionView:
                    use_separator: True
                    ActionPrevious:
                        title: 'SIVA'
                        with_previous: False
                    ActionOverflow:
                    CustomActionButton:
                        id: status-button
                        important: True
                        source: {'normal': 'images/communicationgreen-48.png', 'down': 'images/communication-48.png'} [self.state]
                        on_release: root.to_statusscreen()
                    CustomActionButton:
                        id: accounts-button
                        important: True
                        source: {'normal': 'images/key-48.png', 'down': 'images/keygreen-48.png'} [self.state]
                        on_release: root.to_accountsscreen()
                    CustomActionButton:
                        id: bot-button
                        important: True
                        source: {'normal': 'images/bot-48.png', 'down': 'images/botgreen-48.png'} [self.state]
                        on_release: root.to_botscreen()
                    CustomActionButton:
                        id: logout-button
                        important: True
                        source: {'normal': 'images/shutdown-48.png', 'down': 'images/shutdowngreen-48.png'} [self.state]
                        on_release: root.to_logout()
        BoxLayout:
            id: status_display
            orientation: 'vertical'
            BoxLayout:
                id: status_label
                size_hint_y: None
                height: 44
                BoxLayout:
                    orientation: 'horizontal'
                    Image:
                        keep_ratio: True
                        source: 'images/communication-48.png'
                    Label:
                        text: 'Status'
                        markup: True
                        color: 0, 0, 0, 1
                    CustomDropDown:
                        Label:
                            text: 'Label 1'
                            height: 44
                            markup: True
                            color: 0, 0, 0, 1
                        Label:
                            text: 'Label 2'
                            height: 44
                            markup: True
                            color: 0, 0, 0, 1
                        Label:
                            text: 'Label 3'
                            height: 44
                            markup: True
                            color: 0, 0, 0, 1
            BoxLayout:
                id: status_content

The DropDown widget is not visible anywhere on my screen although it is inside a horizontal box layout. I must have done something wrong. Can you please advise?

Thanks

[Elliot Garbus]

Here is an example DropDown.   You will need to modify it.

 

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty


kv = """
<ThreeButtons>:
    size_hint_y: None
    height: '48dp'
    Button:
        text: root.texts[0]
        on_release: app.root.ids.dropdown.select(self.text)
    Button:
        text: root.texts[1]
        on_release: app.root.ids.dropdown.select(self.text)
    Button:
        text: root.texts[2]
        on_release: app.root.ids.dropdown.select(self.text)


BoxLayout:
    orientation: 'vertical'
    Button:
        id: btn
        text: 'Press'
        on_release: dropdown.open(self)
        on_parent: dropdown.dismiss()
        size_hint_y: None
        height: '48dp'

    DropDown:
        id: dropdown
        on_select: btn.text = str(args[1])
        Button:
            text: 'First Item'
            size_hint_y: None
            height: '48dp'
            on_release: dropdown.select('First Item')
        ThreeButtons:
            texts: '1', '2', '3'
        ThreeButtons:
            texts: '4', '5', '6'
        ThreeButtons:
            texts: '7', '8', '8'
            
    Label:
        text: 'This is a DropDown Test'
"""

class ThreeButtons(BoxLayout):
    texts = ListProperty(['0','0','0'])


class DDApp(App):
    def build(self):
        return Builder.load_string(kv)


DDApp().run()

--
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/f4336cca-f7cf-416e-8f63-bb7a35099f3e%40googlegroups.com.

 

[Shoumik Das]

Thanks for sharing the example code. Can you please help me a understand a couple of lines of code and what they are doing?

Question 1

on_release: app.root.ids.dropdown.select(self.text)

root always refers to the base widget / template in the current rule. Is root pointing to ThreeButtons here? Or, is it pointing to DropDown since ThreeButtons is a child of DropDown in the box layout?

Question 2

What is the purpose of on_parent here?

on_parent: dropdown.dismiss()

Question 3

What is args[1] referring to in this example code?

on_select: btn.text = str(args[1])

Thanks again

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

[Elliot Garbus]

Question 1

 

on_release: app.root.ids.dropdown.select(self.text)

root always refers to the base widget / template in the current rule. Is root pointing to ThreeButtons here? Or, is it pointing to DropDown since ThreeButtons is a child of DropDown in the box layout?

 

Notice this is app.root.  In this case this points to the root widget of the app.  This is being evaluated in an event, so you can easily print it out to see what is happening.

Reading the entire stirng: app.root.ids.dropdown

app – The app

root – root widget of the app, in this case a BoxLayout

ids – the ids dict of the rootwidget (as opposed to a rule)

dropdown – the id of the DropDown

 

 

Question 2

 

What is the purpose of on_parent here?

 

on_parent: dropdown.dismiss()

 

This is a cheat to dismiss the DropDown after the Layout has been created.  Alternatively your could use a newer event (this might be clearer).  Consider this part of the initialization.

# on_parent:
#     dropdown.dismiss()
on_kv_post:
    dropdown.dismiss()

 

 

Question 3

 

What is args[1] referring to in this example code?

 

on_select: btn.text = str(args[1])

This is another opportunity to use a print statement to see what is happening…

on_select:
    btn.text = str(args[1])

    print(args)

 

the ouput is: (<kivy.uix.dropdown.DropDown object at 0x05C54298>, '1')

….and we recall that an event is passed an instance and a value, and in the docs we see the keyword args:

https://kivy.org/doc/stable/api-kivy.lang.html?highlight=lang#value-expressions-on-property-expressions-ids-and-reserved-keywords

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/e194f9f7-f9ab-42a1-93bd-e2ec6fa8bb64%40googlegroups.com.

 

[Shoumik Das]

Thank you very much for the detailed answer. It really helped.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/e194f9f7-f9ab-42a1-93bd-e2ec6fa8bb64%40googlegroups.com.