Kivy change slider design

Question

Is it possible to make a kivy slider look like this one?

This is my python code:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window

class MyWidget(GridLayout):
    def __init__(self, **kwargs):
        super(MyWidget, self).__init__(**kwargs)        
        Window.clearcolor = (1, 1, 1, 1)

class PhoneApp(App):
    def build(self):
        return MyWidget()

if __name__ == "__main__":
    PhoneApp().run()

This is my kv code:

#:kivy 2.1.0
<Label>
    size_hint_y: None
    height: self.texture_size[1]
    color: 0, 0, 0, 1

<Image>
    size_hint_y: None
    height: self.texture_size[1]

<Button>
    size_hint_x: None
    size_hint_y: None
    width: self.texture_size[0]
    height: self.texture_size[1]

<Slider>
    size_hint_y: None

<GridLayout>
    cols: 1
    size_hint: (0.5, 0.9)
    pos_hint: {"center_x": 0.5, "center_y": 0.5}

<MyWidget>:
    Image:
        source: "captus.png"
    
    Label:
        text: "Test Message"        

    Button:
        text: "Second test"

    Slider:
        id: slider
        min: 0
        max: 100

For now the slider looks like this:

Is it possible to make it look like the first one?

Also.. I'm wrong or it's like bugged, not aligned with the bar?

Answer 1

First of all, you generally should not create dynamic classes with their default class names as it may affect its overall design for all of its instances which you may not want. Rather create an instance of that class and apply your design or logic therein. So you should change the lines like <Button> in kvlang with <MyButton@Button>.

Now since here you're using the GridLayout as a container you have fewer control over its children's attributes like pos etc. The Slider is also a widget, so you can adjust its size. To change its appearance you can use its properties like cursor_image etc. With all these changes your code in kvlang should now look something like the following,

#:kivy 2.1.0

<MyLabel@Label>
    size_hint_y: None
    height: self.texture_size[1]
    color: 0, 0, 0, 1

<MyImage@Image>
    size_hint_y: None
    height: self.texture_size[1]

<MyButton@Button>
#    size_hint_x: None
    size_hint_y: None
#    width: self.texture_size[0]
    height: self.texture_size[1]

<MySlider@Slider>
    size_hint_y: None
    height: dp(64) # Set specific height.
    cursor_image: "path to image"
    background_horizontal: "some path to image"

#<MyGridLayout@GridLayout>
#    cols: 1
#    size_hint: (0.5, 0.9)
#    pos_hint: {"center_x": 0.5, "center_y": 0.5}

<MyWidget>:
    cols: 1
    size_hint: (0.5, 0.9)
    pos_hint: {"center_x": 0.5, "center_y": 0.5}
    MyImage:
        keep_ratio: True
        source: "captus.png"
    
    MyLabel:
        text: "Test Message"        

    MyButton:
        text: "Second test"

    MySlider:
        id: slider
        min: 0
        max: 100