CODEWITHSUNDEEP
pythonpython-3.xkivy
Vitor Ferreira
Vitor Ferreira

Reputation: 1095

Image with rounded corners and shadow Kivy

How can I do something like this with Kivy? Example

Upvotes: 5

Views: 5860

Answers (1)

ikolim
ikolim

Reputation: 16031

Use the button's background_normal, background_down, and border to achieve this. Lets name the two pictures that you provided as normal.png and down.png. Please refer to the example below for details.

Snippets

Button:
    background_normal: 'normal.png'
    background_down: 'down.png'
    border: 30,30,30,30

Example

main.py

import kivy
kivy.require('1.10.0')

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

Builder.load_string("""
<RoundedButtons>:
    orientation: 'vertical'
    Button:
        text: '[color=3333ff][b]Rounded Button 1[/b][/color]'
        markup: True
        background_normal: 'normal.png'
        background_down: 'down.png'
        border: 30,30,30,30
    Button:
        text: '[color=ff3333][b]Rounded Button 2[/b][/color]'
        markup: True
        background_normal: 'normal.png'
        background_down: 'down.png'
        border: 30,30,30,30
""")


class RoundedButtons(BoxLayout):
    pass


class TestApp(App):
    def build(self):
        return RoundedButtons()


if __name__ == "__main__":
    TestApp().run()

Output

Img01 - App Startup Img02 - Button 2 Down

Upvotes: 6

Related Questions