Kivy Look and Feel

Question

I am trying to build a Kivy application with a sharp, crisp look and feel but the default Kivy UI is not exactly what I had in mind? Is there any way to create a custom theme to give your Kivy app style?

This app here is called Pithon and it was made from Kivy. I have searched everywhere but I can not find anything on how the developer managed such a clean look. Does anyone have any ideas?

Answer 1

A kivy developer called Andrés Rodríguez released a set of widgets based on google's material design principles. I am currently using them myself and they have surely saved me from alot of work. You can find KivyMD here (see bottom of this answer for more info). Their are some themes also based on the same principles but am yet to try them out one is FlatKivy and another is kivy material ui by Federico Curzel.

Some screenshots for kivyMD,flatkivy and kivy material ui respectively are here.

Click the highlighted links you will find a lot more info about the three projects.

---

The original KivyMD project by Andrés Rodríguez is no longer maintained but there is active fork of KivyMD by HeaTTheatR.

Answer 2

(Almost) all widgets have properties that can be used to set aspects of their style. For instance, with a Button you can change the background colour, the background image when pressed or released, and the size of the border region (it's scaled like in CSS border images). You can check the documentation for the specifics of a given widget.

An theme like in the screenshot you posted could be achieved by turning off background images for the buttons and just using solid colours, with the non-button text being normal Labels and the circle being drawn directly with a kivy canvas instruction or via an Image widget (along with an image of the circle).

I notice you mentioned padding in a comment but I'm not sure what you mean by it - do you mean the distance between the buttons? They may well be placed in a GridLayout which has a padding property controlling this, so you could set it to whatever you like.

I recognise that you're asking a more general question than 'how does this screenshot do it?', but the key point is that just about everything is customisable and it doesn't take many changes to go from the default theme to your image.

Edit: One useful feature that helps this kind of customisation is that you can use kv language to override styles for widget classes very easily, so you don't need to manually change every button etc.