Как разместить квадрат на заднем фоне у объекта MDTopAppBar?

Question

[DarkiDeuce]

Хочу разместить три квадрата другого цвета в центре MDTopAppBar.

Первое что пришло в голову:

BoxLayout:
    orientation: 'vertical'

    MDTopAppBar:
        elevation: 2
        type_height: 'small'
        left_action_items: [['menu', lambda x: None]]

        MDRelativeLayout:
            Image:
                source:'White.png'
                pos_hint: {'center_x':.5, 'center_y':.40}
                size_hint: 0.8, 0.8
            Image:
                source:'White.png'
                pos_hint: {'center_x':.3, 'center_y':.40}
                size_hint: 0.8, 0.8

            Image:
                source:'White.png'
                pos_hint: {'center_x':.7, 'center_y':.40}
                size_hint: 0.8, 0.8

    MDBottomNavigation:

Однако при таком подходе кнопка, отвечающая за открытие меню, находиться не в вертикальном центре верхней панели, а явно выше, так как панель разделена на две части.

Далее решил использовать холст:

canvas:
    Rectangle:
        pos: self. pos
        size: self.size

Но квадрат вообще не отображается, как исправить ситуацию?
Желаемый результат:


Но с расположением кнопки в вертикальном центре верхней панели.

Comments

[Алан Гибизов]

Внимательнее с оформлением вопроса. Поправил тэги вокруг кода, убрал лишний тэг Python.

[DarkiDeuce]

Алан Гибизов, Вы слишком быстро среагировали) Я опубликовал вопрос и заметил проблему, пошёл исправлять, но вы уже всё сделали)