VerticalGridFragment
– Android TV application hands on tutorial 19

verticalgridfragment

Showing icons on vertical alignment

We learned BrowseFragment to show icons, where icons are aligned horizontally when the size increases. VerticalGridFragment is another Fragment provided by leanback support library, where it shows the icons with vertical alignment.

“Sideload Launcher – Android TV” app shows installed app icons in vertical alignment.

 

For example, I guess Sideload Launcher – Android TV is using this VerticalGridFragment to show installed app icons. 

This post explains how to implement VerticalGridFragment. The implementation is referenced from Google’s sample implementation in the same way as before.

Create parent Activity – VerticalGridActivity

Starting by creating Activity. right click on “ui” package, [New] → [Activity] → [Blank Activity], type Activity Name as “VerticalGridActivity” and click [Finish]. It will automatically create VerticalGridActivity class, activity_vertical_grid.xml layout resource and add this Activity information to AndroidManifest.xml.

This Activity only shows VerticalGridFragment, so modify layout/activity_vertical_grid.xml (automatically generated file) as follows

No modification necessary for VerticalGridActivity class.

 

Create VerticalGridFragment

Now we can proceed to make our VerticalGridFragment class. right click on “ui” package, [New] → [Java Class] → type Name as “VerticalGridFragment“. 

This new Fragment needs to be a subclass of leanback support library’s VerticalGridFragment class (android.support.v17.leanback.app.VerticalGridFragment). Mock implementation looks like this.

When I check the source code of VerticalGridFragment, it was not long. So tracking all the public set methods are not so difficult which are

  • setGridPresenter
  • setAdapter
  • setTitle
  • setOnItemViewSelectedListener
  • setOnItemViewClickedListener
  • setSelectedPosition

Each methods are explained one by one in the following. But if you want a quick minimum implementation, implementing setGridPresenter & setAdapter is enough (and setGridPresenter is MUST) for VerticalGridFragment to work.

setGridPresenter (MUST)

Specify a Presenter for VerticalGridFragment. setGridPresenter takes VerticalGridPresenter class (provided by leanback library) as argument. Following simple template code suffices in most of the case. 

You must implement this method, otherwise runtime exception happens.

 

setAdapter

Usage of setAdapter is similar to BrowseFragment, but it’s more easy.

  1.  Prepare instance of ArrayObjectAdapter adapter, by specifying Presenter
    Ex. prepare mAdapter which uses CardPresenter
  2. Adding items (Model instance) to this adapter.
    Ex. adding Movie movie instance.
  3. Finally, call setAdapter
    Ex. 

After implementing setGridPresenter and setAdapter, VerticalGridFragment source code will be following.

Even without implemeting setAdapter, VerticalGridFragment appears with no contents. But there is no meaning for it if there is no contents set in adapter.

setTitle

Showing a title on the top-right of VerticalGridFragment.

Instead of setTitle, you may also call setBadgeDrawable if you want to set Drawable at the title.

setOnItemViewSelectedListener

This is same with BrowseFrament, use a class which implements OnItemViewSelectedListener in the argument.

Ex.

 

setOnItemViewClickedListener

This is same with BrowseFrament, use a class which implements OnItemViewClickedListener in the argument.

Ex.

 

setSelectedPosition

This method will change the current select focus to specified position.

 

The sample code after all the implementation is as follows

 

Launch from MainFragment

Launch VerticalGridActivity from MainFragment. I added grid item to launch VerticalGridActivity, below is the added part.

 

Build and run

verticalgridfragment

When the number of contents increases VerticalGridFragment grows to the bottom, not to the right like BrowseFragment.

Source code is on github.

 

Sponsored Links

7 responses

  1. How do I remove the title from the grid view? If I do not set the title, I have the blank space occupying real state in the UI.

    Thank you

    • Hello Thiago,
      I do not know what do you mean by “blank space occupying real state”.
      When I don’t call “setTitle()” (Comment out setTitle() from source code) of VerticalFragment, title did not appear without any problem.

  2. Man, Thank You! With your help I learned and made quick up-and-running the Android TV bespoked app! You’re cool. Now have a job with 100k$ an.l..
    Very Helpful Tutorials!

Leave a Reply

Your email address will not be published.