I have explained Android TV specific UI implementations (sample source code referenced from Android TV sample application) through this tutorial. So I conclude this project by reorganizing the source code files. I did refactoring based on the role of each classes, and finished with below structure.
com.corochann.androidtvapptutorial
common – common functions. This module has no dependency of this application’s specific implementation so that you can “re-use” the code in other project as well.
PlaybackController
Utils
data – the data set of “Model”
MovieProvider
model – “Model” part of MVP architecture
Movie
recommendation – Recommendation function part
RecommendationBuilder
RecommendationFactory
ui – UI handling modules (Activity & Fragments)
MainActivity & MainFragment
DetailsActivity & VideoDetailsFragment
PlaybackOverlayActivity & PlaybackOverlayFragment
SearchActivity & SearchFragment
ErrorActivity & ErrorFragment
GuidedStepActivity
presenter – “Presenter” part of MVP architecture
CardPresenter
(GridItemPresenter) * It is defined in MainFragment, but you may move to here.
DescriptionPresenter
DetailsDescriptionPresenter
view – “View” part of MVP architecture
Nothing in this Tutorial. Custom designed View came this place. For example, ImageCardView will be placed here, if it is not provided by Leanback support library.
background – The modules which handles background. It is also a commonly useful modules.
SimpleBackgroundManager
PicassoBackgroundManager
I continue little supplemental explanation below.
UI handling modules
At first, I want to differentiate the part which handles UI and doesn’t. The modules which is updating UI is the following,
～Activity – Main component of constituting current Activity.
～Fragment – Fragment supports UI of Activity by filling up specific sub-component.
～Presenter – Presenter defines how to show specific “item”, which is explained detail later.
Let’s make new package “ui” and replace above inside this package. It can be done by right click on package name → New → Package → type “ui”. Then new folder “ui” appears in your Android studio.
Model-View-Presenter (MVP) architectural pattern
Through this tutorial, we are using Movie class as a item to show, and we are displaying its instance with ImageCardView. It is achieved by the mediator CardPresenter which specifies how to show this Movie instance to ImageCardView.
This architecture is called Model-View-Presenter (MVP) architectural pattern. Model is the definition of item to handle it as “object” which is a base of Object Oriented Programming, View is the actual UI to show this item, and Presenter intermediates Model and View.
In our case, we can write this correspondence.
Model
String
Movie
View
TextView
ImageCardView
Presenter
GridItemPresenter
CardPresenter
If you have the experience of Web application development, you will probably remind Model-View-Controller (MVC) pattern, (especially for ruby on rails developer). Below is the comparison between MVC & MVP
Model, View and Presenter for each module are separated to each modules after refactoring. I put View and Presenter in “ui” package since it is changing UI.
So far, I have explained about Leanback support library which makes our UI design of Android TV application much easier, simpler. I would say it was not a short tutorial, but now almost all the Android TV specific UI designs (until API level 22) are covered! I hope you get basics of Android TV app development, and you don’t lost a way to start developing your own design application.
