Kivymd Button Tutorials

Kivymd Button Tutorials syntax for using for buttons:

Flat Rectangle Button

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:
    
    MDRectangleFlatIconButton:
        text: "           Button           "
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        
  
 '''


class MainApp(MDApp):

    def build(self):
        return Builder.load_string(KV)


MainApp().run()

Output:

Floating Action Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:
        
    MDFloatingActionButton:
        text: "           Button           "
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        
    
 '''


class MainApp(MDApp):

    def build(self):
        # self.theme_cls.primary_palette = "Blue"
        # self.theme_cls.theme_style = "Light"
        return Builder.load_string(KV)


MainApp().run()

Output:

KivyMD Icon Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:

    MDIconButton:
        icon: "arrow-right-circle"
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
 '''


class MainApp(MDApp):

    def build(self):
        return Builder.load_string(KV)


MainApp().run()

Output:

KivyMD Round Flat Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:

    MDRoundFlatButton:
        md_bg_color:"#210070"
        text: "           Button           "
        font_style: 'Subtitle1'
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}

 '''


class MainApp(MDApp):

    def build(self):
        return Builder.load_string(KV)


MainApp().run()

Output:

MD Fill Round Flat Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:
    MDFillRoundFlatButton:
        text: "           Button            "
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
    
 '''


class MainApp(MDApp):

    def build(self):
        return Builder.load_string(KV)


MainApp().run()

Output:

To change color of button:

MDFillRoundFlatButton:
        text: "           Button            "
        radius: [15, 15, 15, 15]
        md_bg_color:"#FE7028"
        font_style: 'Subtitle1'
        pos_hint: {"center_x": 0.5, "center_y": 0.5}

To add icon in button, use MDFillRoundFlatIconButton from kivymd.uix.button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:

    MDFillRoundFlatIconButton:
        width: 300
        md_bg_color:"#210070"
        text: "           Button            "
        icon: "arrow-right-circle"
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
 '''


class MainApp(MDApp):

    def build(self):
        return Builder.load_string(KV)


MainApp().run()

Output:

You can use any of these icons based of your UI (User interface)

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen: 
    MDFloatingActionButton:
        text: "           Button           "
        pos_hint: {"center_x": 0.5, "center_y": 0.7}

    MDIconButton:
        icon: "arrow-right-circle"
        pos_hint: {"center_x": 0.5, "center_y": 0.6}

    MDRoundFlatButton:
        md_bg_color:"#210070"
        text: "           Button           "
        font_style: 'Subtitle1'
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}



    MDFillRoundFlatButton:
        text: "           Button            "
        radius: [15, 15, 15, 15]
        md_bg_color:"#FE7028"
        font_style: 'Subtitle1'
        pos_hint: {"center_x": 0.5, "center_y": 0.4}

    MDFillRoundFlatIconButton:
        width: 300
        md_bg_color:"#210070"
        text: "           Button            "
        icon: "arrow-right-circle"
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.3}
 '''


class MainApp(MDApp):

    def build(self):
        # self.theme_cls.primary_palette = "Blue"
        # self.theme_cls.theme_style = "Light"
        return Builder.load_string(KV)


MainApp().run()

Output:

Style properties can be used in buttons:

• icon
• text_color
• theme_text_color
• set_size
• set_font_size
• animation_label
• hint_animation
• bg_hint_color
• closing_transition_button_rotation
• root_button_anim
• opening_transition
• on_leave
• on_open
• on_close

For more information, read KivyMD Documentation.

Related posts:-

[su_posts template=”templates/list-loop.php” posts_per_page=”3″ taxonomy=”link_category” tax_operator=”NOT IN” order=”
desc”]