ScrollView – displaying a list of videos

In this section, we will display the results of a search performed on the TED video site in a side bar that we can scroll up and down, as shown in the following screenshot:

Let's start defining the components of the side bar in the sidebar.kv file:

432. # File name: sidebar.kv
433. <ListItem>:
434.     size_hint: [1,None]
435.     height: 70
436.     group: 'listitem'
437.     text_size: [self.width-20, None]
438. 
439. 
440. <Sidebar@ScrollView>:
441.     playlist: _playlist
442.     size_hint: [None, None]
443.     canvas.before:
444.         Color:
445.             rgba: 0,0,0,.9
446.         Rectangle:
447.             pos: 0,0,
448.             size: self.width,self.height
449. 
450.     GridLayout:
451.         id: _playlist
452.         size_hint_y: None
453.         cols: 1

The ListItem class inherits from ToggleButton. The text_size property will establish a boundary for the text. If the titles of the videos are too long, two lines...