Python kivy ボタンの色を変更する方法 - MAKUMAKU - プログラミングを分かりやすく解説

まくまく

PythonのGUIアプリ作成ライブラリ kivyで作成したボタンの背景色を変更してみようと思います。

まずは出力から。

出力

8種類のボタンを作成しました。

Button-1がデフォルトの色（グレー）です。

kvファイルに記載していますが、Button-2〜4までと、Button-5〜8までは色の指定方法を変えています。

Button-2〜４まではこの書き方です。並びはR,G,B,アルファになってます。数値は0から1で指定します。下の例だと赤色が表示されます。

background_color: (1,0,0,1)

Button-5〜8は0〜255までのRGB値で指定しています。下のような書き方です。256段階の表記で、並びは同様にR,G,B,アルファです。***/255と書きます。

background_color: (255/255,0/255,0/255,1)

↓書き方が異なるだけで、このふたつは同じ色になります。

background_color: (1,0,0,1)
background_color: (255/255,0/255,0/255,1)

サンプルプログラム

pyファイル

#ライブラリのインポート
from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.lang import Builder

#ウインドウの幅と高さの設定
Config.set('graphics', 'width', 600)
Config.set('graphics', 'height', 300)
#1でサイズ変更可、0はサイズ変更不可
Config.set('graphics', 'resizable', 1)

Builder.load_file("button_color.kv")

class MyLayout(Widget):
    pass
        
class DispimageApp(App):
    def build(self):
        self.title = "window"
        return MyLayout()

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

kvファイル

#ファイル名: button_color.kv
<MyLayout>
    GridLayout:
        cols: 4
        rows: 4
        size: root.width, root.height
        padding: 20

        Button:
            text: "Button-1"
        
        Button:
            text: "Button-2"
            background_normal: ""
            #RGBA
            background_color: (1,0,0,1)

        Button:
            text: "Button-3"
            background_normal: ""
            #RGBA
            background_color: (0,0,1,1)

        Button:
            text: "Button-4"
            background_normal: ""
            #RGBA
            background_color: (0,0,0.2,1)

        Button:
            text: "Button-5"
            background_normal: ""
            #RGBA
            background_color: (57/255,147/255,221/255,1)

        Button:
            text: "Button-6"
            background_normal: ""
            #RGBA
            background_color: (244/255,235/255,232/255,1)

        Button:
            text: "Button-7"
            background_normal: ""
            #RGBA
            background_color: (41/255,231/255,205/255,1)

        Button:
            text: "Button-8"
            background_normal: ""
            #RGBA
            background_color: (106/255,62/255,55/255,1)