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;

buttons

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;

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….

Advertisements

2 Responses

  1. […] One great thing about using the kv language is how much less code is required to create and place the widgets onto a Kivy GUI. In our next few posts we’ll look at how to add events that will provide the interactivity for this viewer. Here’s the link to Kivy For The Non Computer Scientist – Part 11: Using KV Language To Set Widget Text Size, Text Pos… […]

  2. […] 39 – In Kivy For The Non Computer Scientist – Part 11: Using KV Language To Set Widget Text Size, Text Position And Text And Button Colours, I covered the canvas.before code. It’s purpose is to change the background colour of a […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: