Centering a Background Image for a Button

[Tysen Moore]

I am skinning a button using the, background_normal/down settings.  The problem is that it always left justifies the image within the Button widget.

How can I center the image within the Button widget?

Any help would be appreciated.

Tysen

Example Code, (png file attached)

#!/usr/bin/env python

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout

Builder.load_string("""
<MainLayout>:
    orientation: "vertical"
    Button:
        text: "Top"
    Button:
        size_hint:          None,None
        size:               70, 70
        background_normal:  "./circle.png"
        background_down:    "./circle.png"
""")

class MainLayout(BoxLayout):
    pass

class MainApp(App):

    def build(self):
        return MainLayout()

if __name__ == '__main__':
    MainApp().run()

Example Output: (would like the circle in the middle of its button (i.e. to the right of its current location)

[Gerhard Venter]

The way I worked this out it is below.  I'll be happy to learn if there is a way to do this without adding in an Image widget like I have done

   Button:

        size_hint: 1, .2                                            

        Image:

            x: self.parent.width * .5 - self.width * .5   

            source: './circle.png'

Explanation:

x: self.parent.width * .5 is what really centers the image, but on its own the leftmost edge of the image is in the middle.   Subtracting  half the image width puts the middle of the image in the middle of the available space. 

I've added 'size_hint: 1, .2'    to make the button width 100% and height 20% (otherwise the button is too big)

--
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.
For more options, visit https://groups.google.com/groups/opt_out.

[Tysen Moore]

Thanks for the response.  Your change did center the image, but the unwanted side effect was the rest of the button was displayed instead of being transparent.  My hope was to keep the transparent button and only have the image--as is the case when using the background_normal/down options.  Do you know of a way to eliminate the drawing of the button, yet keep the image (canvas.before...)?  Basically reproduce your results, minus the drawing of the button.  Thanks again for the feedback.

--
You received this message because you are subscribed to a topic in the Google Groups "Kivy users support" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/kivy-users/tBZH1dJyz3M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to kivy-users+...@googlegroups.com.

[qua-non non]

Use ButtonBehavior.

```

<ImageButton@ButtonBehavior+Image>

    source: 'path/to/my/image.png'

```

[Tysen Moore]

Thanks so much, that worked great.

[Brian MacDiarmuide]

Hi

I have looked around and haven't been able to find an explanation for what's going on here:

<ImageButton@ButtonBehavior+Image>

    source: 'path/to/my/image.png'

Is there some part of the docs I have missed with regards to this?

I get what the behavior does basically, I just haven't found docs on how to implement it,

or where. Any help much appreciated.

[ZenCODE]

Hi

See the "Dynamic classes" section here: http://kivy.org/docs/guide/lang.html

Basically, <ImageButton@ButtonBehavior+Image> creates ImageButton that subclasses ButtonBehavior and Image, equivalent to:

    class ImageButton(ButtonBehavior, Image):

in Python. Hope that was what you were asking? ;-)

[Brian MacDiarmuide]

Thank you, I understand now :)

--

You received this message because you are subscribed to a topic in the Google Groups "Kivy users support" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/kivy-users/tBZH1dJyz3M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to kivy-users+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[qua non]

http://kivy.org/docs/api-kivy.uix.behaviors.html

http://lmgtfy.com/?q=kivy+buttonbehavior&l=1

For more options, visit https://groups.google.com/d/optout.

[EdsonSil Sil]

Hello, 

A help please. 

Why the two codes below will not produce the same effect? 

Can not work without Kivy language? 

Thank you

With kivy language:

===================================================================

from kivy.app import App

from kivy.uix.boxlayout import BoxLayout

from kivy.lang import Builder

from kivy.uix.stacklayout import StackLayout

from kivy.uix.label import Label

from kivy.uix.button import Button

from kivy.uix.image import Image

Builder.load_string("""

<ButtonsApp>:

    orientation: "vertical"

    padding:30

    

    Button:

        

        background_color: ( 3, 3, 3, .85 )

        canvas:

            Color:

                rgb: .5,.5,.5                            

            Line:

                points: self.x + 2, self.y , self.right - 2, self.y , self.right - 2, self.top - 2, self.x - 2, self.top - 2

        

        StackLayout:

            pos: self.parent.pos

            size: self.parent.size

            orientation: 'lr-tb'

            

            Image:

                source: 'exit.png'

                size_hint_x: None

                width: 74

            

            Label:

                size_hint_x: None

                width: 100

                text: "The text"

                font_size: '20sp'

                color: (0, 0, 0, 1)

                

    Label:

        text: "A label"

                

""")

class ButtonsApp(App, BoxLayout):

     

    def build(self):        

        

        return self

        

if __name__ == "__main__":

    ButtonsApp().run()

and without

======================================================

from kivy.app import App

from kivy.uix.boxlayout import BoxLayout

from kivy.lang import Builder

from kivy.uix.stacklayout import StackLayout

from kivy.uix.label import Label

from kivy.uix.button import Button

from kivy.uix.image import Image

class ButtonsApp(App, BoxLayout):

     

    def build(self):

               

        self.orientation= "vertical"                                    

        self.padding = 30

        btnok = Button( background_color=( 3, 3, 3, .85 ) )

        stacklayout = StackLayout( orientation='lr-tb', size=btnok.size  , pos=btnok.size )

         

        stacklayout.add_widget( Image( source='exit.png' , size_hint_x=None , width=74 ) )

        stacklayout.add_widget( Label( text="Label buttom" , font_size='20sp' , size_hint_x=None , width = 100 ))

        btnok.add_widget( stacklayout )

        

        self.add_widget( btnok )       

        self.add_widget( Label( text="A label" ) )        

                    

        return self

        

if __name__ == "__main__":

    ButtonsApp().run()