# VerticalGridFragment – Android TV application hands on tutorial 19

## 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.

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

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

Source code is on github.

## 9 responses

1. Thiago says:

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

• corochann says:

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.

• Thiago says:

The title does not appear, but the space occupied by the title is still there, for me at least.

• corochann says:

I think this is ok. Is it a problem for you? What behavior you are expecting?

2. Георгий says:

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..

3. Rajsekhar says:

I want to show every item is in focus.Please help me How to remove dim color not selected items

4. tungds says:

Thank for your tut!
how i get position of selected item?

5. Anonymous says:

How can we add a container (Linearlayout) below each row?

6. Rakesh Agarwal says:

Can we add a Linearlayout below each row? If yes, how can we do that?