Giter Site home page Giter Site logo

zichkoding / how-to-create-and-color-a-button-in-a-.py-file-with-kivy Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 10 KB

If you need to know how to create and color a button with Kivy in your Python code this is the repository to look for.

Python 100.00%
python3 python kivy kivy-widget button-widget button front-end-development

how-to-create-and-color-a-button-in-a-.py-file-with-kivy's Introduction

How to create and color a button in a .py file with Kivy

Today we will make a button with Kivy and learn how to change its color. Before we start, remember to use the virtual environment to play with the Kivy module to prevent any mishaps with other modules.

Alright, it's time to get down to some coding. First, we will start off with making a simple button.

Input:

    import kivy
    from kivy.app import App
    from kivy.uix.button import Button
    
    class ButtonApp(App)
        def build(self):
            # Make a variable for the Button Class being called from Kivy
            button = Button(text="Hello World!")
            return button
            
    if __name__ == '__main__':
        ButtonApp().run()

Output:

image of basic button

This is a button that does nothing once it's pressed, but it's okay because we are more worried about the design parts of this app than the logic. The next part is going to show how to change the color. So, what we need to do is in our variable, button, we need to go into the Button() method and add the keyword argument background_color.

It is pretty simple to make sense out of this color system. This color system is based on RGB values, so to set the color to blue would be background_color = (0, 0, 1, 1). To understand what is going on, the tuple stands for (Red, Green, Blue, Opacity) and the 0's stand for 0% (or 0/255) while the 1's stand for 100% (or 255/255). The last value in the tuple (1) stands for opacity, which is also percentage-based.

Input:

    import kivy
    from kivy.app import App
    from kivy.uix.button import Button
    
    class ButtonApp(App):
        def build(self):
            # Make a variable for the Button class being called from Kivy
            button = Button(text="Hello World!",
                background_color=(0,0,1,1)
            )
            return button
            
     if __name__ == '__main__':
        ButtonApp().run()

Output:

image of blue button

Alright, we have a blue button! If you wanted a different shade of blue, you can always refer to an HTML color picker off of Google and divide each RGB value by 255. For instance, if we wanted a pink button the code would be background_color=(255/255, 19/255, 230/255, 1).

Another way of creating and coloring a button using the Kivy design language is by making a .kv file, but I will cover that in a different shot. For now, this will be enough for creating and changing the color of a button in a .py file with Kivy.

how-to-create-and-color-a-button-in-a-.py-file-with-kivy's People

Contributors

zichkoding avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.