Skip to content Skip to sidebar Skip to footer

Kivy - How Do I Restrict The Imagebutton Click Space To Only On The Image Itself? (and Not The Blank "occupied" Space)?

I have four ImageButtons in a row, all separated by (what seems to be) blank space. This blank space also however acts as a button (up to the halfway point between the two Buttons'

Solution 1:

I managed to restrict the "Clickable" area to the image itself (Clickable area is now Square - Image is circular, corners are still clickable), by playing around with the size_hint.

I first decreased the horizontal size of the image until the most-right image was basically touching the side of the window. then this value (.08 for me) indicated the horizontal width of my specific image. then I populated .08 for the remaining Images, and lined them up with my labels.

This however, does not exclude the corners of my round images as they are still clickable. But for my purposes this simple solution will suffice.

updated code:

'''

FloatLayout:

    canvas:
        Color:
            rgb: utils.get_color_from_hex("#0a5a97")
        Rectangle:
            size: self.size
            pos: self.pos
    pos_hint: {"top":0.125,"right":1}
    size_hint: 1,.125


    ImageButton:
        source: "Icons5/040-user.png"
        pos_hint: {"top":0.95,"right":.80}
        size_hint: .07,.7
        on_press:
            print("Account")

    ImageButton:
        source: "Icons5/002-settings.png"
        pos_hint: {"top":0.95,"right":.60}
        size_hint: .07,.7
        on_press:
            print("Settings")

    ImageButton:
        source: "Icons5/015-idea.png"
        pos_hint: {"top":0.95,"right":.40}
        size_hint: .07,.7
        on_press:
            print("Info")


    ImageButton:
        source: "Icons5/003-home.png"
        pos_hint: {"top":0.95,"right":.20}
        size_hint: .07,.7
        on_press:
            print("Home")
            app.change_screen("home_screen", direction='right', mode='push')


    Label:

        pos_hint: {"top":0.2,"right":.8}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Account"
        markup: True


    Label:
        pos_hint: {"top":0.2,"right":.6}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Settings"
        markup: True

    Label:
        pos_hint: {"top":0.2,"right":.4}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Info"
        markup: True

    Label:
        pos_hint: {"top":0.2,"right":.20}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Home"
        markup: True

'''

Post a Comment for "Kivy - How Do I Restrict The Imagebutton Click Space To Only On The Image Itself? (and Not The Blank "occupied" Space)?"