KaraokeGUI:

<Song>:
    size_hint: None, None
    size: 200, 200
    orientation: 'vertical'
    padding: 0
    spacing: 0

    canvas.before:
        Color:
            rgb: 0.9, 0.9, 0.9 if self.active else 0.3, 0.3, 0.3
        Line:
            rectangle: self.pos[0], self.pos[1], self.size[0], self.size[1]

    Image:
        source: self.parent.thumbnail
        size_hint: 1, 0.8
    Label:
        canvas.before:
            Color:
                rgb: 0.3, 0.3, 0.3
            Rectangle:
                pos: self.pos
                size: self.size
        size_hint: 1, 0.1
        text: self.parent.name

<KaraokeGUI>:
    orientation: 'vertical'
    Image:
        id: current_song_image
        source: ''
    Button:
        text: '>'
        on_press: root.play()
        size_hint: 1, 0.1

    BoxLayout:
        orientation: 'horizontal'
        height: 220
        size_hint: 1, None

        Button:
            size_hint: None, None
            size: 20, 220
            text: '<'
            on_press: root.previous()

        ScrollView:
            id: songs_scroll
            do_scroll_x: True
            do_scroll_y: False
            size_hint: 1, None
            height: 220

            GridLayout:
                id: song_container
                rows: 1
                width: self.minimum_width
                padding: 10
                spacing: 10
                size_hint: None, 1

        Button:
            size_hint: None, None
            size: 20, 220
            text: '>'
            on_press: root.next()