🔒 TOP APP BAR AND BOTTOM APP BAR IN KIVY

[solid hull]

@void plinth

Python help channel opened

Remember to:

• Ask your Python question, not if you can ask or if there's an expert who can help.
• Show a code sample as text (rather than a screenshot) and the error message, if you've got one.
• Explain what you expect to happen and what actually happens.

:warning: Do not pip install anything that isn't related to your question, especially if asked to over DMs.

Closes after a period of inactivity, or when you send !close.

[craggy crest]

what framework is this?

[versed fjord]

kivy

@void plinth does it show anything on the screen

send screenshots

also, ffs, come on

use

[solid hull]

Formatting code on Discord

Here's how to format Python code on Discord:

```py
print('Hello world!')
```

These are backticks, not quotes. Check this out if you can't find the backtick key.

For long code samples, you can use our pastebin.

[void plinth]

KivyMD

[versed fjord]

it looks correct?

[void plinth]

nope

[versed fjord]

it looks exactly like what your code says

that's exactly what your code says

[void plinth]

not really

#create a design
MDScreen:
MDBoxLayout:
orientation: "vertical"

    MDTopAppBar:
        title: 'Task App Planner'
        md_bg_color: [0.0196, 0.2196, 0.0039, 1]

        left_action_items: [['menu', lambda x: print('menu')]]
        right_action_items: [['magnify', lambda x: print('search')], ['dots-vertical', lambda x: print('vertical dots')]]
    MDBottomAppBar:
        md_bg_color: [0.0196, 0.2196, 0.0039, 1]
        anchor: 'right'
        mode: 'center'
        icon: "plus"
        left_action_items: [['delete', lambda x: print('delete')], ['pencil', lambda x: print('update')]]

[craggy crest]

lol

[versed fjord]

you changed it

[void plinth]

That's the code i run just now

[craggy crest]

try and break it more... sometimes that helps to debug

[versed fjord]

# This is a message

[versed fjord]

right click my message

select Copy Text

then paste it in

[bleak onyx]

i like that debugging method

[void plinth]

#create a design
MDScreen:
    MDBoxLayout:
        orientation: "vertical"


        MDTopAppBar:
            title: 'Task App Planner'
            md_bg_color: [0.0196, 0.2196, 0.0039, 1]

            left_action_items: [['menu', lambda x: print('menu')]]
            right_action_items: [['magnify', lambda x: print('search')], ['dots-vertical', lambda x: print('vertical dots')]]
        MDBottomAppBar:
            md_bg_color: [0.0196, 0.2196, 0.0039, 1]
            anchor: 'right'
            mode: 'center'
            icon: "plus"
            left_action_items: [['delete', lambda x: print('delete')], ['pencil', lambda x: print('update')]]

[versed fjord]

thank you

doesnt that look so much better?

[void plinth]

I cant find that mark in my keyboard so never used it

[versed fjord]

you could've asked

[void plinth]

anyway. I've beeen changing it so many times

never worked

[versed fjord]

what happens if you comment out MDTopAppBar

[craggy crest]

slow down and just methodically change it

[versed fjord]

send screenshots

[bleak onyx]

is the problem that is so far down the screen?

[void plinth]

gone

[versed fjord]

nothing on the screen?

[void plinth]

my problem is. bottom app bar does not display the content

[versed fjord]

if you comment out top bar there is nothing on the screen?

[void plinth]

ye

[craggy crest]

so maybe you need some more content under the topbar so it renders properly?

[versed fjord]

im still here btw im just reading the docs

[bleak onyx]

what does "mode: 'center'" do

[void plinth]

it's for flaoting action button

[bleak onyx]

is bottom app bar supposed to be just the floating action button?

[void plinth]

wdym?

[versed fjord]

if you change the background color of the bottom app bar does your bar change color correctly?

[bleak onyx]

it looks like it's about at the height where a floating action button would be

[bleak onyx]

good idea

[versed fjord]

uhhhhh

the color doesnt change?

[craggy crest]

seems fixed

[void plinth]

yeah

[versed fjord]

the buttons not appearing

[bleak onyx]

i was looking at an example and for the floating action button they have everything under MDFabBottomAppBarButton

[craggy crest]

aren't they hidden in the hamburger?

[bleak onyx]

under MDBottomAppBar

[craggy crest]

oh nm, i'll shutup

[void plinth]

Floating Action Bar

[bleak onyx]

which thing?

[versed fjord]

looks like MDBottomAppBar doesnt have left_action_items

[void plinth]

nope. I need to put content in the hamburger later

[versed fjord]

https://kivymd.readthedocs.io/en/latest/components/appbar/#kivymd.uix.appbar.appbar.MDBottomAppBar

see the docs

it doesnt support that attribute

wait no

but left_action_items is not in the MDTopAppBar too

[bleak onyx]

They also have MDBottomAppBar under FloatLayout

[versed fjord]

are you using kivymd 1.x.x

what's your kivymd version?

@void plinth hello????

[void plinth]

most latest

[versed fjord]

and that is?

if you look at the docs the latest version doesnt use left_action_items and right_action_items anymore

MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    MDBottomAppBar:
        id: bottom_appbar
        action_items:
            [
            MDActionBottomAppBarButton(icon="gmail"),
            MDActionBottomAppBarButton(icon="bookmark"),
            ]

this is the example they gave

[void plinth]

I'll try it

[versed fjord]

check the exact version of your kivyMD

[void plinth]

v3.13.5

[versed fjord]

kivyMD, not kivy python

[void plinth]

1.2.0

[versed fjord]

can you upgrade to 2.0.0?

[versed fjord]

also that's your python version

it looks like the kivyMD docs doesnt have the 1.2.0 version anymore

I can't help if I don't have the documentations

[void plinth]

2.2.0

upgraded now

[versed fjord]

hang on

kivy is different from kivyMD

kivy current release seems to be 2.3.1

kivyMD seems to be 2.0.0

also pypi kivyMD is outdated?

[void plinth]

(from kivy>=2.2.0->kivymd) (0.1.5)

[versed fjord]

where are you getting this from

[versed fjord]

https://pypi.org/project/kivymd2/

[versed fjord]

did you install this?

or https://pypi.org/project/kivymd

[void plinth]

nope, installed it now

Successfully installed asyncgui-0.6.3 asynckivy-0.6.4 exceptiongroup-1.3.0 kivymd2-2.0.1 materialyoucolor-2.0.10

[versed fjord]

you should be able to uninstall this one btw

the 1.2.0 version

[void plinth]

how

[versed fjord]

it looks like they left it there to support legacy apps

are you using a package manager?

[void plinth]

you mean older apps?

[versed fjord]

yea, there are older apps written with the old version that would break

[void plinth]

wdym? should i say vs terminal?

[versed fjord]

so, essentially a package manager handles these packages for your projects,

[void plinth]

sample?

[versed fjord]

someone can download your project source code, and then run a command to install only the libraries needed for your project

[versed fjord]

uv is one of the most popular package manager

to install kivy you would run uv add kivy

for example

so you are not using a package manager?

[void plinth]

i think so

i used pip

[versed fjord]

it's alright

pip uninstall kivymd should remove the old version of kivyMD

[void plinth]

Successfully uninstalled kivymd-1.2.0\

[versed fjord]

close vs code and open it again

just to make sure we are working with the correct environment

do your import code have errors saying kivyMD is not installed?

im just concerned that they might be using different module name or something

[void plinth]

ModuleNotFoundError: No module named 'kivymd.app'

[versed fjord]

ok let me check the correct module name

actually you know what, im going to create a project to make sure that it is correct first

[void plinth]

aight

ill wait

[versed fjord]

im using uv btw

so it does all the things automatically

if you want you can try it too

@void plinth im back

it looks like the module name is still kivyMD

[void plinth]

teach me how

[void plinth]

I'll reinstall it

[versed fjord]

no

as in

kivymd2 is the correct library

but you import it with kivyMD

from kivymd import kivymd seems to be correct

@void plinth im here now

[void plinth]

it highlights my import

[versed fjord]

do you want to redo this project over, and you can learn how to use a package manager?

[void plinth]

sure

[versed fjord]

i will guide you to here

and then you can go from there

[void plinth]

aight dont worry it was just basic anyway

lets proceed with your idea

[versed fjord]

https://docs.astral.sh/uv/getting-started/installation/ follow the instructions here

to install uv

obviously choose the correct OS you are using

lmk when you are done

[void plinth]

which here?

[versed fjord]

do you use windows?

[void plinth]

ye

[versed fjord]

follow the instructions from here

https://docs.astral.sh/uv/getting-started/installation/#standalone-installer

[void plinth]

done it

[versed fjord]

this is all you need actually

do you have a folder where you keep your coding projects?

[void plinth]

ain't what im using fine?

[versed fjord]

what do you mean?

[void plinth]

ahh mb. YEs

[versed fjord]

open powershell

and navigate to that folder

cd C:\the\folder\you\save\your\projects\in

[void plinth]

done

[versed fjord]

if you type pwd does it show the folder path

[void plinth]

yeah

[versed fjord]

ok

uv init <your project name> give it a cooler name

any name you like

[void plinth]

done

[versed fjord]

this will create a subfolder inside your coding projects folder

with the name of your project

this folder will contain everything you need to run this project

[void plinth]

aight, made it

[versed fjord]

including its own python, its own environment

open the folder uv created, in vscode

[void plinth]

done

just copy what I did before and paste it?

or start over?

[versed fjord]

your sidebar has something like this?

[versed fjord]

start over

you can copy any code over later

[versed fjord]

are you sure this is the folder uv created?

[void plinth]

yeah

[versed fjord]

it's the subfolder

not the parent folder

[versed fjord]

if you look at mine, the toml file is in the topmost folder

[void plinth]

i don't get it

[versed fjord]

so vscode can open folders right?

[void plinth]

yeah

[versed fjord]

your vscode should open the folder Nyx, not the folder PythonProject

[void plinth]

it opened nyx

[versed fjord]

by opening i dont mean open the folder in the sidebar

go to File > Open Folder...

[versed fjord]

correct

[void plinth]

aight

[versed fjord]

create a folder .vscode

we need a config file to let vscode know to use the python inside our project

[void plinth]

done

[versed fjord]

create a file inside .vscode with the name settings.json

[void plinth]

done

[versed fjord]

wait i just noticed

[void plinth]

pycharm automatically did this in my projects before

[versed fjord]

you dont have a venv folder?

[void plinth]

I don't even know that

[versed fjord]

this is the folder that uv created are you sure?

[void plinth]

yes

[versed fjord]

hmmmmm

[void plinth]

[project]
name = "nyx"
version = "0.1.0"
description = "Add your description here"
readme = "README.md"
requires-python = ">=3.13"
dependencies = []

[versed fjord]

open the vscode terminal

uv venv

should create the venv for you

[void plinth]

it did

[versed fjord]

uhhhh

where does it say that?

how do you know it did

[void plinth]

its above vscode

[versed fjord]

oh

ok

that's good

in the vscode folder create settings.json

and then inside the file

{
  "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python"
}

save the file and restart vscode

[void plinth]

done

[versed fjord]

open vs code terminal

[void plinth]

and

[versed fjord]

screenshot

[versed fjord]

does it activate the environment automatically?

[void plinth]

wdym?

[versed fjord]

hmmmm

can you click the trashcan to kill the terminal and open the terminal again

[void plinth]

done

[versed fjord]

it didnt run anything?

[void plinth]

PS C:\xampp\htdocs\MyFiles\PythonProject\Nyx> & C:/xampp/htdocs/MyFiles/PythonProject/Nyx/.venv/Scripts/Activate.ps1
& : File C:\xampp\htdocs\MyFiles\PythonProject\Nyx.venv\Scripts\Activate.ps1 cannot be loaded because running scripts is disabled
on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:3

• & C:/xampp/htdocs/MyFiles/PythonProject/Nyx/.venv/Scripts/Activate.ps ...

• + CategoryInfo          : SecurityError: (:) [], PSSecurityException
  + FullyQualifiedErrorId : UnauthorizedAccess
  

PS C:\xampp\htdocs\MyFiles\PythonProject\Nyx>

[versed fjord]

ah ok

[void plinth]

[versed fjord]

hold on

im looking up the correct command

[void plinth]

[versed fjord]

from https://docs.python.org/3/library/venv.html

Note

On Microsoft Windows, it may be required to enable the Activate.ps1 script by setting the execution policy for the user. You can do this by issuing the following PowerShell command:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

[void plinth]

what?

[versed fjord]

run this in your vscode terminal

[versed fjord]

ok we are almost there

[void plinth]

yipee

[versed fjord]

uv add kivymd2

this will install kivy automatically too

it's running yeah?

[void plinth]

ye

done

[versed fjord]

Copy the code from https://kivymd.readthedocs.io/en/latest/components/appbar/#change-action-items

and paste it in main

[void plinth]

done

[versed fjord]

uv run main.py should open the app

[void plinth]

done

[versed fjord]

does it run?

[void plinth]

ye

is this like live server?

[versed fjord]

wdym

[void plinth]

nothing

now what?

[versed fjord]

hmmmm

hold on

try changing your KV to this

KV = """
#:import MDActionBottomAppBarButton kivymd.uix.appbar.MDActionBottomAppBarButton


MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    MDTopAppBar:
        id: top_appbar
        type: "small"
        pos_hint: {"center_x": 0.5, "top": 1}

        MDTopAppBarLeadingButtonContainer:

            MDActionTopAppBarButton:
                icon: "arrow-left"

        MDTopAppBarTitle:
            text: "AppBar small"

        MDTopAppBarTrailingButtonContainer:

            MDActionTopAppBarButton:
                icon: "attachment"

            MDActionTopAppBarButton:
                icon: "calendar"

            MDActionTopAppBarButton:
                icon: "dots-vertical"

    MDBottomAppBar:
        id: bottom_appbar
        action_items:
            [
            MDActionBottomAppBarButton(icon="gmail"),
            MDActionBottomAppBarButton(icon="bookmark"),
            ]

        MDFabBottomAppBarButton:
            icon: "plus"
            on_release: app.change_actions_items()
"""

@void plinth

[void plinth]

aight

[versed fjord]

this is what you should get

and this will be a good place for you to continue making your app

do you understand what the code does btw

[void plinth]

yup i do

ill try

[versed fjord]

do you think i can leave you at that?

[void plinth]

anyway, how to add kivy again?

[versed fjord]

...

[void plinth]

I'll ping you if not

[versed fjord]

what

[void plinth]

uv add kivy?

[versed fjord]

🤦

open your toml file

does it say this?

dependencies = [
    "kivymd2>=2.0.1",
]

[void plinth]

and?

[void plinth]

yeah

[versed fjord]

essentially how it works is like this:

[void plinth]

but i also need the normal kivy

[versed fjord]

your app needs kivyMD

and kivyMD needs kivy

so kivy has already been installed automatically

[void plinth]

ohhhhhhhhhhhhhhhhh

[versed fjord]

it also does not look like you need kivy as a dependency other than for kivyMD to work

I can already see how I can complete this project

with kivyMD alone

[void plinth]

you are born to be a programmer

[versed fjord]

no not really

this just comes with experience

you will be able to write apps fluently in less time than it took me

[void plinth]

btw

i noticed

THESE ARE TOO LONG

I can't use my usual syntax anymore?

[versed fjord]

wdym

[versed fjord]

what's your usual syntax

[void plinth]

title: 'Task Planner'
theme_bg_color: 'Custom'
md_bg_color: [0.0196, 0.2196, 0.0039, 1]

        left_action_items: [['menu', lambda x: 'menu']]
        right_action_items: [['pencil', lambda x: 'update'], ['delete', lambda x: 'delete']]

[solid hull]

Hey @void plinth!

Please edit your message to use a code block

```py
print('Hello, world!')
```

This will result in the following:

print('Hello, world!')```

[versed fjord]

this is the old kivymd syntax

it doesn't work anymore

[void plinth]

i tried and yup,,,,it doesn't show content HAHA

[versed fjord]

you will need to use the new syntax

do you know how to use it?

take some time to look at the kivymd docs

and i will try to get something working in the mean time

[void plinth]

yeah. i learned to learn the syntax from scratch

[versed fjord]

this is what you want?

oh wait pencil and trash on the right

[void plinth]

yeah

this is troublesome, I think I'll get seizure trying to memorise the bar HAHA

[versed fjord]

memorise the bar?

[void plinth]

line of code of toolbar

[versed fjord]

you are not supposed to memorise it

[void plinth]

anyway. I can't find anything on youtube which tackles about version 2

[versed fjord]

if you are just following youtube tutorials you wont be able to learn anything

[void plinth]

documentary are complicated

I need someone to explain it to me in Layman's term

[versed fjord]

well yea im working on it

do you have an idea of how you want the app to look like?

i basically have an idea of how to get it to work now

you can draw it out on paper, in powerpoint, or anything really

[void plinth]

basically just like memo

[versed fjord]

nuh uh

i dont want it in text

draw it out

[void plinth]

lmao

wait.

[versed fjord]

this is what i have now

lmk when you are done

brb

[void plinth]

@versed fjord

[versed fjord]

oh?

you got it working?

[void plinth]

I think this is all

[void plinth]

yeah, luckily, other than toolbar nothing much changed

[versed fjord]

alright

[versed fjord]

do you want to get to this toolbar or no?

that was your original design

[void plinth]

can u show me your idea?

[versed fjord]

it's not my idea, that's what your original code does

[void plinth]

ohh, this is a much better design

[versed fjord]

that is your own design

[void plinth]

lmao. wait ill redo mine

should i integrate update and add?

and get rid of plus button

ohh btw. i still have a problem with traversing array. can u help me ?

[versed fjord]

mmmm i think that is a question you can ask in pydis so that more people can learn too

not everyone reads these threads

[void plinth]

aight

[void plinth]

ye

[versed fjord]

if you need help with reading the kivymd documentations you can ask me here though

[void plinth]

I can't see anyone teaching through vc here now

[versed fjord]

it is incredibly important that you learn to read documentations

[void plinth]

Aight that's cool. I will, I liked it. Maybe I'll compile this work of mine

can u recommend a Virtual Space thats not heavy and with linux

[versed fjord]

ask in #python-discussion

[versed fjord]

what is virtual space

[void plinth]

hmm something like emulator?

[versed fjord]

for what purpose

[void plinth]

for compiling

it only works on linux

[versed fjord]

you should be able to use WSL?

[void plinth]

and I don't have phone so pydroid ain't possible

[void plinth]

whats that?

[versed fjord]

i think this question will be better asked in #python-discussion because i dont use windows anymore i cant test things before I answer you

[void plinth]

aight

[void plinth]

@versed fjord

menu_items = [
{"text": "Profile", "on_release": lambda: self.menu_callback("Profile")},
{"text": "Settings", "on_release": lambda: self.menu_callback("Settings")},
{"text": "Logout", "on_release": lambda: self.menu_callback("Logout")},
]

can u explain this to me

and what can I customize it with?

[versed fjord]

what do you mean customize

[versed fjord]

where did you get this

[void plinth]

for my dropdown menu

chatgpt

[versed fjord]

i have no idea what this even means

[void plinth]

but i can't understand its explanantion

[solid hull]

Python help channel closed for inactivity

This help channel has been closed. Feel free to create a new post in #1035199133436354600. To maximize your chances of getting a response, check out this guide on asking good questions.