Develop Android TV App Using RecyclerView

TV app is becoming a trend in some businesses and its demand is increasing due to growth of smart TV users. One of the biggest shares of operating systems in smart TVs is Android.

Android TV and Fire TV

When you google developing an android tv app, you can just find the Leanback default theme for developing a TV app. But Leanback is not everything! Developing apps on TV has almost all the freedom of developing mobile apps (NOT all, but almost).

The only point about TV apps is how to handle the focuses because there is no touch screen and there is only a remote control!

The following outlines, first, focus concerns of a TV app. Then, it goes through how to use recyclerViews in the app.

Focuses in a TV app

As it is mentioned, focus handling is one of the main tasks in developing and designing TV app. In what follows, we discuss how to design focussable components and then how to handle focuses.

Designing Focusable Items

For designing drawable, you need to consider different states at least two for a focused and default state.

For colors:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="@color/color_focused" />
    <item android:color="@color/color_default" />
</selector>

For Drawables:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/drawable_focused" />
    <item android:drawable="@drawable/drawable_default" />
</selector>

In Layouts

In layouts, if you want to have a component focusable you just need to add:

android:focusable="true"
android:focusableInTouchMode="true"

You can also handle the next focus of each direction for each component by adding the following attributes.

android:nextFocusRight="id_of_next_focus"
android:nextFocusLeft="id_of_next_focus"
android:nextFocusUp="id_of_next_focus"
android:nextFocusDown="id_of_next_focus"

In Kotlin

In Kotlin, you can manage focuses on each view to do some logics by adding the following listener to the view:

view?.setOnFocusChangeListener { view, isFocused ->
}

and you can modify next focuses on each direction of a view programmatically:

view?.nextFocusUpId = [id_of_view]
view?.nextFocusDownId = [id_of_view]
view?.nextFocusRightId = [id_of_view]
view?.nextFocusLeftId = [id_of_view]

As it is expressed, focus handling is one of the main issues in android tv development. Therefore, it should be considered focusability of views, focus state design, and other directions focus.

RecyclerView in a TV app

RecyclerView is one of the main components which could be used in most applications for showing a long list without causing performance issues.

For using recyclerView, first, should be added the focusability in each item view created. For this purpose, we need to add the following lines in the onCreateViewHolder of the adapter:

view.isFocusable = true
view.isFocusableInTouchMode = true

Therefore, the onCreateViewHolder method of the adapter should be similar to:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val view = LayoutInflater.from(context).inflate(R.layout.item, parent, false)
    view.isFocusable = true
    view.isFocusableInTouchMode = true
    return ViewHolder(view)
}

and in bindViewHolder method, add:

holder.itemView.setOnFocusChangeListener { view, isFocused ->
    // add focus handling logic
    if(isFocused) {
    } else {
    }
}

It should be mentioned that it is also better to use state colors and drawables to highlight which component in the view is selected.

Conclusion

Now, there is no limitation to designing android TV apps. You can design your own item view and recycler view, without using Leanback browse fragment!

Thank you for reading the article, it would be great for me to have your comments and suggestions. Also, if you liked it, do not forget to click on the clap to help more people find the article.