A couple of days ago you finished learning all the basic concepts you need to build a modern Roku application.
And just yesterday you learned how to debug your application properly, in case any problem appears.
Now you’re ready to put all of that into practice 🏋️♂️
You're an awesome student. I’d be honored if you would share your feedback on what it was like learning from this course. To make it easy, I created a form here where you can quickly leave your comments and upload an image in just a couple minutes.
Click here to leave your review
In the following modules we will learn how to make an HTTP request asynchronously and also how to play a video from the response data.
But for that we need a little more than just a counter in our screen. This will be our end product:
This is Zapping, a simple app that lets you change between streams or watch the currently selected video. At any point we will have a currently playing video and the ability to Load another video, which will enable the Play Now button to change the current stream to the loaded one.
BTW, there will be a link to a Github repository with the full implementation at the end of this lesson 👍
Loading another video implies making a request to fetch the latest video list and randomly selecting one to add to the queue.
Let's start with a simple task: Creating the Load another and Play Now buttons. Take a moment and try doing it yourself. Note that unlike our previous examples the buttons don't have a black dot on the left side and also the text looks centered. You will need to explore the documentation for the Button component to adjust these visuals.
This is how the XML for the buttons would look like:
<Button
id="loadAnotherButton"
translation="[96, 100]"
text="Load another"
maxWidth="350"
minWidth="0"
iconUri=""
focusedIconUri=""
/>
<Button
id="playNowButton"
translation="[400, 100]"
text="Play Now"
maxWidth="300"
minWidth="0"
iconUri=""
focusedIconUri=""
/>
As you can see, we had to replace the iconUri and focusedIconUri fields with an empty value to get rid of the black dot.
Similarly, we had to add a maxWidth to keep the text centered. But you'll notice that Roku is a quirky platform... it also needs minWidth to be set at 0 manually for maxWidth to work properly -- at least at the time I'm writing this.