Chapters

Hide chapters

Android Apprentice

Fourth Edition · Android 11 · Kotlin 1.4 · Android Studio 4.1

Section II: Building a List App

Section 2: 7 chapters
Show chapters Hide chapters

Section III: Creating Map-Based Apps

Section 3: 7 chapters
Show chapters Hide chapters

27. Episode Player
Written by Fuad Kamal

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the last chapter, you succeeded in adding audio playback to the app, but you stopped short of adding any built-in playback features. In this final chapter of this section, you’ll finish up PodPlay by adding a full playback interface and support for videos.

If you’re following along with your own project, the starter project for this chapter includes an additional icon that you’ll need to complete the section. Open your project then copy the following resources from the provided starter project into yours. Be sure to copy the .png files from the various dpi folders (shown below once as “?dpi” but on the file system, they’ll be “hdpi”, “mdpi”, etc). This includes the following resources:

  • res/drawable-?dpi/ic_forward_30_white.png
  • res/drawable-?dpi/ic_replay_10_white.png
  • res/drawable/ic_play_pause_toggle.xml

If you don’t have your own project, don’t worry. Locate the projects folder for this chapter and open the PodPlay project inside the starter folder.

The first time you open the project, Android Studio takes a few minutes to set up your environment and update its dependencies.

Getting started

You’ll start by adding a new Fragment to display the details for a single episode. This Fragment gets loaded when the user taps on an episode.

The episode detail screen provides an overview of the episode and playback controls. The design looks like this:

The album art is in the upper-left corner. The episode title is to the right. The description takes up the entire center of the layout and because episode descriptions can be long, the TextView is scrollable so that the user can see the full description.

At the bottom is the player controls area. This area has a black background and the following controls:

  • Play/Pause toggle: starts and stops playback.
  • Skip back: skips back 10 seconds.
  • Skip forward: skips forward 30 seconds.
  • Speed control: allows the playback speed to be increased.
  • Scrubber: displays playback progress and allows scrubbing to any part of the episode.

First up, creating the basic layout.

Episode player layout

Inside res/layout, create a new file and name it fragment_episode_player.xml. Replace its contents with the following:

Episode player fragment

You’re ready to build out the episode player Fragment. This Fragment will display the episode layout and handle all of the playback logic. You’ll move the media-related code from the PodcastDetailsFragment class into this new episode player fragment.

Episode player navigation

Before finishing the Fragment code, hook up the navigation.

Episode player details

It’s time to get some episode data on the player screen. You’ll use the active episode view data from the podcast view model to populate the Views.

Episode player controls

Now you can turn your attention to the player controls. You’ll get the basic play, pause, and skip controls working first. Then you’ll focus on the seek bar and speed control.

Play/Pause button

Now it’s time to hook up the play/pause button to start and stop playback.

Speed control button

Next, you’ll hook up the speed control button. This button will increase the speed by 0.25x times each time it’s tapped up to a maximum of 2.0x. It will go to 0.75x after reaching the max of 2.0x.

Seeking

Before adding the changes to the player Fragment to support skipping or scrubbing to a new position, you need to update the media browser to allow seeking to a specific playback position. This is done by overriding an additional method in PodplayMediaCallback.

Skip buttons

OK, it’s time to implement the skip forward and back functionality. The media controller allows you to change the playback position directly. To perform a skip, you need to take the current playback position, add a plus or minus offset to get a new position, and then set the new position.

Scrubber control

There are a few steps required to make the scrubber functional:

Video playback

The last feature you’ll implement is video playback. If you try to play a video podcast with PodPlay now, only the audio part will play.

Identifying videos

The first thing you need is a means to identify if the episode media is a video. Open PodcastViewModel.kt and add the following to EpisodeViewData:

Media session

You need a MediaSession object to manage the video playback.

Media player

You also need a MediaPlayer object just like you did with the MediaBrowserService. Add the following property to EpisodePlayerFragment:

SurfaceView overview

Finally, add the following method to initialize the video surface and call the new initMediaPlayer method:

Key Points

  • You used a number of built-in overrides for media session to control playback features such play / pause and seeking to various points in the media timeline.
  • You created custom commands to add other features such as changing playback speed.
  • Custom commands have a name and a Bundle object with the command parameters. onCommand() is called by the media session when a custom command is received.
  • You learned how to identify and playback video podcasts, making for a truly dynamic podcast experience!

Where to go from here?

Congratulations, you now have a fully functional podcast player worthy of praise and bragging rights! Pat yourself on the back because you’ve accomplished a lot.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now