Android Tv App Demo Tutorial

Jun 14, 2017





Anybody with a Good Understanding of Android Application Development can create an android tv app.Android TV development follows the same structure as other android apps like Android phones and tablets,But UI  is one of the biggest difference between Android phone app and Android TV app. We need to make UI suitable for TV usage. To achieve this requirement, Android open source project is providing Leanback Support library ( so that developers can easily implement UI which satisfies these requirements and thus suitable for TV usage.
The Aim of this tutorial is to create a Home page of Android tv App using LeanbackSupport Library.


  1. Android Development IDE (Android Studio)
  2. SDK Tool Verison : 24.0.0 or Higher
  3. SDK with Android 5.0 (API 21) or Higher

Step 1: Launch Android Studio

->Create a New project : AndroidTvAppDemo.
->Domain name (Or you can choose your domain name)
->Target Android Devices
->Add an activity

  • Select “Add No Activity ” and finish.
    Android studio automatically generates source code to start this demo.

Step 2:Add an Activity

Right click on “com.vrinfosystem.androidtvappdemo” and choose

I will create Blank Activity named “MainTvActivity”.
Android studio will generate two files for and activity_main_tv.xml

Step 3: Add a Fragment

Create a new Java class MainFragmentTv as  follow:
Right click on “com.vrinfosystem.androidtvappdemo” package select New->Java Class(with named  MainFragmentTv.) add Fragment to activity-main_tv,so it only displays mainfragment.


Now ,Modify MainFragmentTv as follows:


We will make MainFragmentTv as a Sub-class of  BrowseFragment.
lets have some Intro of Browse fragment.

Our home page is composed of a BrowseFragment from the Leanback library which is divided into 4 main components:

  • HeadersFragment:The left side of the fragment that holds the headers for a set of Rows or Pages.
  • TitleView:The top right corner of the screen. This can be used with a badge image or a String title. It can be also customized through a custom view.
  • SearchOrb:The SearchOrb on the top left corner of the screen can have it’s color customized and will show when a SearchListener is attached to the fragment.
  • RowsFragment:The main component of the fragment. It will hold a set of rows. The titles of the rows will automatically be used by the HeadersFragment.
  • Step 4:Adding setupUIElements() to

    In this step, we will setup Application Title or icon and Brand Color.Right click res/values and chooseNew -> values Resource file
    File name: colors.XML -> “OK”
    Write below.


    Modify MainFragmentTv as follow:


    Step 5:Construction of Browse Fragment:
    When you launch  Android tv sampleapplication, the contents are aligned in a grid structure. Each header title on the left have a each contents row, and this header – contents row relationship is one to one. This “header + contents row” combination is represented by ListRow. Body of BrowseFragment is a set ofListRow .

  • To summarize,

     ArrayObjectAdapter (RowsAdapter) ← A set of ListRow
     ListRow = HeaderItem + ArrayObjectAdapter (RowAdapter)
     ArrayObjectAdapter (RowAdapter) ← A set of Object (CardInfo/Item) 


    Step 6:Create a Presenter Class:

  •  The design of card is determined by Presenter. Presenter defines how to show/present cardInfo. Presenter class itself is an abstract class, so you need to extend this class for your app’s suitable UI design.
    Let’s  implement GridItemPresenter as a inner class in MainFragmentTv.

    After defining your own Presenter, you only need to set RowsAdapter at the start time of Activity. You can do so in onActivityCreated() in MainFragmentTv.

  • So whole source code of MainFragmentTv will be:

  • MainFragmentTv .class

  • step 7:Modify AndroidManifest.xml 

  • We need some declaration in our app to be considered as Android TV app. Modify AndroidManifest.xml as following.

  •  AndroidManifest.xml

    Step 8: Run your project

    So we created Android tv app just in few steps, now Run your Project, and you will see the output as follows. 


  • Kindly, text us for any help or assistance, we will provide you the solution ASAP!!

Post by richa

Leave a Reply

Your email address will not be published. Required fields are marked *