24. Translate

Translate, a context canvas instruction, causes any vertex instructions, that follow within the layout, to translate in the x-direction, y-direction or a combination of the two.

---

The root class is based on a GridLayout.

# ex24.py

from kivy.uix.gridlayout import GridLayout
from kivy.app import App

class Ex24(GridLayout):
    pass
        
class Ex24App(App):
    def build(self):
        return Ex24()

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

---

In the kv file, we define columns to be 2. Next, 4 RelativeLayouts are defined and thus we have two rows. Because, no specific size is defined, each will have the same size, half of root width and height. The background for the first RelativeLayout is red.

---

For each layout, we will draw three lines, two vertical and one horizontal. The relative coordinates will be the same in each RelativeLayout.

---

RelativeLayout 2 is colored green and has the same coordinates as RelativeLayout 1 for the 3 lines. The reason for the two layouts is to serve as reference.

---

RelativeLayout 3 has a blue background.

---

For the three lines, we set a translation of 100 in x-direction. Because of this, the first vertical line should be aligned with the second vertical line of RelativeLayout 1, which is, the layout above it.

---

RelativeLayout 4 has a cyan background color.

---

The three lines have a translation of -100 in x-direction, so the second vertical line is aligned with the first vertical line, in RelativeLayout 2.

# ex24.kv

<Ex24>:
    cols: 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 1,0,0
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Color:
                rgb: 1,1,1
            Line:
                points: 150,root.height/4, 250, root.height/4
                width: 2
            Line:
                points: 150,50, 150,root.height/2-50
                width: 2
            Line:
                points: 250,50, 250,root.height/2-50
                width: 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,1,0
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Color:
                rgb: 1,1,1
            Line:
                points: 150,root.height/4, 250, root.height/4
                width: 2
            Line:
                points: 150,50, 150,root.height/2-50
                width: 2
            Line:
                points: 250,50, 250,root.height/2-50
                width: 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,0,1
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Color:
                rgb: 1,1,1
            Translate:
                x: 100
            Line:
                points: 150,root.height/4, 250, root.height/4
                width: 2
            Line:
                points: 150,50, 150,root.height/2-50
                width: 2
            Line:
                points: 250,50, 250,root.height/2-50
                width: 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,1,1
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0, 0
            Color:
                rgb: 1,1,1
            Translate:
                x: -100
            Line:
                points: 150,root.height/4, 250, root.height/4
                width: 2
            Line:
                points: 150,50, 150,root.height/2-50
                width: 2
            Line:
                points: 250,50, 250,root.height/2-50
                width: 2

---

This is the result. The two vertical lines in each layout are 100 pixels apart and the horizontal line are at the midpoint, in the y-direction, for each of the four RelativeLayouts.

---