Custom Rounded Button color change on_press()

[Kelly Whitlock]

Hi! I have made custom rounded buttons for my program, but I am struggling with getting the color to change when pressing it. Below is the custom button code and where it is implemented. I have tried to create a function that changes the color when pressed, however it creates a grey rectangle that is not rounded.  Any help would be greatly appreciated! 

Current Code:

<RoundedButton@Button>:

background_color: 0,0,0,0

background_normal: ''

canvas.before:

Color:

rgba: hex('#ffffff')

RoundedRectangle:

size: self.size

pos: self.pos

#size_hint_x: .5

radius: [28]

#size_hint : (1, .3)

RoundedButton:

id: game_button

text: ""

font_name: "LondrinaSolid-Regular"

background_normal: "#ffffff"

font_size: 32

on_press: root.color_change()

on_release:

root.manager.current = "games"

root.manager.transition.direction = "left"

Image:

source: 'images/Game_icon.png'

center_x: self.parent.center_x

center_y: self.parent.center_y

allow_stretch: True

#Define our different screens

class MainMenuWindow(Screen):

def color_change(self):

self.ids['game_button'].background_color = "#8C8C8C"

Before clicking: 

After clicking: 

[Elliot Garbus]

Rather than deriving your custom button from Button, use Image and ButtonBehavior.  There is an example in the docs.  Reach out if you have any trouble.

Read: https://kivy.org/doc/stable/api-kivy.uix.behaviors.button.html?highlight=buttonbehavior#example

 

Some additional info:

In your code below, you are placing an Image in a Button.  You can put widgets in Layouts, not in other widgets. 

If you check the documentation for Button you will see it defines 4 images, images for normal, down and the disabled versions of normal and down.  As an alternative approach you could change these images. 

 

I recommend using the ButtonBehavior approach.

 

After clicking: 

 

 

 

--
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/65fc67aa-1706-4ec9-95d7-10a9257ce9c6n%40googlegroups.com.

 

[Kelly Whitlock]

So I tried out your example, I am confused on how to keep the rounded white background? 

class MyButton(ButtonBehavior, Image):

def __init__(self, **kwargs):

super(MyButton, self).__init__(**kwargs)

self.source = 'images/cat.png'

self.background_color = '#ffffff'

self.background_normal = ""

self.radius = [28]

def on_press(self):

self.source = 'images/Game_icon.png'

def on_release(self):

self.source = 'images/cat.png'

class SampleApp(App):

def build(self):

return MyButton()

SampleApp().run()

For this test, I used a cat image with a transparent background. When Kivy loads, it is just loading the image without the background

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/IJ9hp3BDx54/unsubscribe.
To unsubscribe from this group and all its topics, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/643d6048.170a0220.17b71.801aSMTPIN_ADDED_MISSING%40gmr-mx.google.com.

[Elliot Garbus]

In this example the properties background_color and background_normal are not doing anything.

If you want to have a transparent cat, and a cat with a background, create 2 images, and change the image when the image is pressed and released.

 

 

From: Kelly Whitlock
Sent: Monday, April 17, 2023 10:25 AM
To: kivy-...@googlegroups.com
Subject: Re: [kivy-users] Custom Rounded Button color change on_press()

 

So I tried out your example, I am confused on how to keep the rounded white background? 

class MyButton(ButtonBehavior, Image):

    def __init__(self, **kwargs):

        super(MyButton, self).__init__(**kwargs)

        self.source = 'images/cat.png'

        self.background_color = '#ffffff'

        self.background_normal = ""

        self.radius = [28]

 

    def on_press(self):

        self.source = 'images/Game_icon.png'

 

    def on_release(self):

        self.source = 'images/cat.png'

 

class SampleApp(App):

    def build(self):

        return MyButton()

 

SampleApp().run()

 

For this test, I used a cat image with a transparent background. When Kivy loads, it is just loading the image without the background

 

 

 

After clicking: 

 

 

 

--
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/65fc67aa-1706-4ec9-95d7-10a9257ce9c6n%40googlegroups.com.

 

--
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/IJ9hp3BDx54/unsubscribe.
To unsubscribe from this group and all its topics, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/643d6048.170a0220.17b71.801aSMTPIN_ADDED_MISSING%40gmr-mx.google.com.

--
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/CA%2BNMK0%3Duf4j%2BLuaYhnfNSniHPy1RJ8y_mDw2x9DBKj1V%3DKvB_w%40mail.gmail.com.

 

[ElliotG]

Another thought, you could add a canvas to the Image, and use a rounded rectangle to create a background.

[ElliotG]

I just did a quick test, using 2 images is the most effective way to get good looking output.