Control bar – adding buttons to control the video

In this section, we will work on user interaction with the application. Right now, we control the video with touches on the screen that play, pause, and stop the video. However, this is not very intuitive for a new user of our application. So, let's add some buttons to improve the usability of our application.

We will use Image widgets enhanced with ToggleButtonBehaviour and ToggleBehaviour classes in order to create buttons for a play/pause button and a stop button, respectively. Here is a cropped screenshot of the simple control bar that we will be implementing in this section:

Let's start defining our two widgets for controlbar.kv. We will cover each widget one by one. Let's start with the header of the file and the ControlBar class definition:

178. # File name: controlbar.kv
179. <ControlBar@GridLayout>:
180.     rows: 1
181.     size_hint: None, None
182.     pos_hint: {'right': 1}
183.     padding: [10,0,0,0]
184.     play_pause...