Kivy For The Non Computer Scientist – Part 11: Using KV Language To Set Widget Text Size, Text Position And Text And Button Colours

Before continuing on to adding interactivity to this Kivy GUI, this blog post will look at how one can customize a buttons text size, text position text colour and button colour using the KV Language.

To give you an idea this post will build on the code from Kivy For The Non Computer Scientist – Part 10: KV Language and the Kivy Gui will build as follows;

The code for this Kivy GUI (with line comments) is as follows;

import kivy  # Required to run Kivy such as the next line of code

kivy.require('1.9.1')  # used to alert user if this code is run on an earlier version of Kivy.
from kivy.app import App  # Imports the base App class required for Kivy Apps
from kivy.lang import Builder  # Imports the KV language builder that provides the layout of kivy screens

kivyscreen = Builder.load_string(""" # The variable kivyscreen is assigned the string that will build Kivy screens
GridLayout: # Creates a GridLayout for use in the app.
    cols: 1 # Sets column property to 1

    Label: # Creates a Label Widget instance.
        text: "I'm A Label With Black Text And Green Background" # Sets above Label text property
        color: 0,0,0,1 # Sets text colour to black.
        canvas.before:
            Color:
                rgba: 0, 1, 1, 1 # Sets widget canvas towards green
            Rectangle:
                pos: self.pos # required to position rectangle inside of Label widget.
                size: self.size # required to position rectangle inside of Label widget.

    Button: # Creates a Button Widget instance.
        text: "I'm Button 1 And I Have Purple Text" #  Sets above button text property to I'm Button 1
        color: 1,0,1,1 # Sets colour for button text

    Button: # Creates a Button Widget instance.
        text: "I'm Button 2 And I Have A Blue Background" #  Sets above button text property to I'm Button 2
        background_normal: "" # Button background defalts to grey. This sets the background to plain.
        background_color: (0.0, 0.0, 1.0, 1.0)# Sets the buttons colour to blue.

    Button: # Creates a Button Widget instance.
        text: "I'm Button 3 And I Have A Larger Text Size" #  Sets above button text property to I'm Button 3
        font_size: '25sp' # Changes default text size

    Button: # Creates a Button Widget instance.
        text: "I'm Button 4 And I'm Aligned Right" #  Sets above button text property to I'm Button 5
        text_size: self.size # constrains text to button size
        halign: 'right' # Sets text horizontal alignment to right side of button.
        valign: 'middle' # Sets text vertical alignment to centre of button.

    Button: # Creates a Button Widget instance.
        text: "I'm Button 5. I Have A Larger Text Size. And My Text Wraps.... See.....See.....See.....See..... See.....See.....See.....See....." #  Sets above button text property to I'm Button 4
        text_size: self.size # constrains text to button size
        font_size: '25sp' # Changes default text size
        halign: 'center' # Sets text horizontal alignment to cenre of button.
        valign: 'middle' # Sets text vertical alignment to centre of button.
""")

class FiveButtonApp(App):  # Creates the instance (copy) of the Kivy App class named FiveButtonApp.
    def build(self):  # build is a method of Kivy's App class used to place widgets onto the GUI.
        return kivyscreen  # return calls the build method which in turn builds the GUI.

FiveButtonApp().run()

By now most of the code and line by line comments should speak for itself in terms of alignment. I could not find all of the information on how to do these kinds of alignments in any one place. What’s striking is how different the code is depending on the widget especially relating to colour. There are two principles that I came across while putting together this blog post on Kivy that one has to wrap their head around while applying code. They are;

• Kivy’s canvas is something unique. One has to dispel any notions about Kivy’s canvas if one has exposure to HTML5’s canvas. Here’s a link to the 10 things you should know about the Kivy canvas.
• Kivy’s Button.background_color really works as a kind of tint. It’s not just a block colour. Here’s an interesting conversation about how it works on StackOverflow.

Hope this information helps you with your Kivy GUI designs. Here’s the link to the next post in this series, Kivy For The Non Computer Scientist – Part 12 – KV Language – Switching Between Kivy GUI Screens.

….brad….