CODEWITHSUNDEEP
androidpythonkivy
Nitheesh Chandrika
Nitheesh Chandrika

Reputation: 141

KIVY : Image + Label inside dynamic buttons

I want to show Image+label inside dynamic buttons that created in a for loop. The problem is its showing the image+label layout only in the last button. How do I can display it in all buttons?

main.py 

class HomeScreen(Screen):
    grid_l = ObjectProperty(None)
    top_lbl = ObjectProperty(None)

    def search_btn_pressed(self):
        grid = self.grid_l
        grid.bind(minimum_height=grid.setter('height'),
                     minimum_width=grid.setter('width'))

        for i in range(3):
                layout = GridLayout(cols=1)
                print layout
                img = Image(source='kivy.png')
                print img
                lbl = Label(text='label')
                layout.add_widget(img)
                layout.add_widget(lbl)

                btn1 = Button(size_hint=(1, None))
                btn1.text = '%r' % i
                btn1.add_widget(layout)

                grid.add_widget(btn1)

.kv 

#:kivy 1.7.2

<HomeScreen>:
    scroll_view: scrollviewID
    top_lbl: lblID
    grid_l: gridlayoutID
    AnchorLayout:
        size_hint: 1, .1   
        pos_hint: {'x': 0, 'y': .9}
        anchor_x: 'center'
        anchor_y: 'center'
        Label:
            id: lblID
            text: 'Button Tester'
    Button:
        size_hint: 1, .1   
        pos_hint: {'x': 0, 'y': .8}
        text: 'Press me!'
        on_release: root.search_btn_pressed()
    ScrollView:
        id: scrollviewID
        orientation: 'vertical'
        pos_hint: {'x': 0, 'y': 0}
        size_hint: 1, .8
        bar_width: '8dp'
        GridLayout:
            id: gridlayoutID
            cols: 1
            size_hint: 1, None
            row_default_height: 40
            row_force_default: False

screenshot

Upvotes: 3

Views: 3816

Answers (1)

kitti
kitti

Reputation: 14794

It's actually not displaying only for the last button - it's displaying for each button, but in the same position. The problem is that Button is not a layout, and as such, does not perform layout of its children. So the GridLayout for each button is rendered at 0, 0 with size 100, 100 relative to the origin of the nearest relative parent (in this case, the GridLayout grid_l because it is contained by the ScrollView).

When you add widgets to a non-layout widget, it's up to you to layout those widgets by setting position and size. Note that you must set the actual pos (or x and y) and size (or width and height) - you cannot use pos_hint or size_hint, as those are only handled by layouts.

This can be done easily using dynamic classes in kv language:

<CustomButton@Button>:
    image_source: ''
    subtext: ''
    GridLayout:
        height: self.parent.height  # match the button's height
        width: 100                  # set to whatever you would like
        pos: self.parent.pos        # match the button's position
        cols: 1
        Image:
            source: root.image_source
        Label:
            text: root.subtext

To use your dynamic class, you will need to import Factory:

from kivy.factory import Factory

Then, in your loop:

for i in range(3):
    btn = Factory.CustomButton(text=str(i), size_hint=(1, None),
                               image_source='kivy.png', subtext='label')
    grid.add_widget(btn)

Finally, a side note: you're creating new bindings on grid_l every time search_btn_pressed() is called. These bindings should only be created once. You could bind once in Python by moving those bindings to HomeScreen.__init__(), but again, this is easier in kv:

    GridLayout:
        id: gridlayoutID
        cols: 1
        size_hint: 1, None
        row_default_height: 40
        row_force_default: False
        height: self.minimum_height   # bind height to minimum_height
        width: self.minimum_width     # bind width to minimum_width

Upvotes: 4

Related Questions