Introduction:-

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 (android.support.v17.leanback) 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.

Prerequisites:-

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 :com.vrinfosystem.com (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
New->Activity->BlankActivity

I will create Blank Activity named “MainTvActivity”.
Android studio will generate two files for these.MainTvActivity.java 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.

Activity_main_tv.xml

Now ,Modify MainFragmentTv as follows:

MainFragmentTv.class

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

  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.

  colors.xml

  <?xml version="1.0" encoding="utf-8"?> <resources> <color name="fastlane_background">#0096e6</color> <color name="default_background">#ffaa3f</color> </resources>

  1 2 3 4 5 6 7 8

  <?xml version="1.0" encoding="utf-8"?> <resources> <color name="fastlane_background">#0096e6</color>   <color name="default_background">#ffaa3f</color>     </resources>

  Modify MainFragmentTv as follow:

  MainFragmentTv.class

  @Override public void onActivityCreated(Bundle savedInstanceState) { Log.i(TAG, "onActivityCreated"); super.onActivityCreated(savedInstanceState); setupUIElements(); } private void setupUIElements() { setBadgeDrawable(getActivity().getResources().getDrawable(R.drawable.logo_india)); // setTitle("Hello Android TV"); // over title setHeadersState(HEADERS_ENABLED); setHeadersTransitionOnBackEnabled(true); // set fastLane (or headers) background color setBrandColor(getResources().getColor(R.color.fastlane_background)); // set search icon color setSearchAffordanceColor(getResources().getColor(R.color.search_opaque)); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  @Override public void onActivityCreated(Bundle savedInstanceState) {     Log.i(TAG, "onActivityCreated");     super.onActivityCreated(savedInstanceState);     setupUIElements(); }   private void setupUIElements() {     setBadgeDrawable(getActivity().getResources().getDrawable(R.drawable.logo_india));     // setTitle("Hello Android TV");     // over title     setHeadersState(HEADERS_ENABLED);     setHeadersTransitionOnBackEnabled(true);       // set fastLane (or headers) background color     setBrandColor(getResources().getColor(R.color.fastlane_background));     // set search icon color     setSearchAffordanceColor(getResources().getColor(R.color.search_opaque)); }

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

  <strong>private class GridItemPresenter extends Presenter { @Override public ViewHolder onCreateViewHolder(ViewGroup parent) { TextView view = new TextView(parent.getContext()); view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT)); view.setFocusable(true); view.setFocusableInTouchMode(true); view.setBackgroundColor(getResources().getColor(R.color.default_background)); view.setTextColor(Color.WHITE); view.setGravity(Gravity.CENTER); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder viewHolder, Object item) { ((TextView) viewHolder.view).setText((String) item); } @Override public void onUnbindViewHolder(ViewHolder viewHolder) { } } </strong>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  <strong>private class GridItemPresenter extends Presenter {     @Override      public ViewHolder onCreateViewHolder(ViewGroup parent) {         TextView view = new TextView(parent.getContext());         view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT));         view.setFocusable(true);         view.setFocusableInTouchMode(true);         view.setBackgroundColor(getResources().getColor(R.color.default_background));         view.setTextColor(Color.WHITE);         view.setGravity(Gravity.CENTER);         return new ViewHolder(view);     }       @Override     public void onBindViewHolder(ViewHolder viewHolder, Object item) {         ((TextView) viewHolder.view).setText((String) item);     }       @Override     public void onUnbindViewHolder(ViewHolder viewHolder) {       } } </strong>

  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.

• MainFragmentTv.java
• @Override public void onActivityCreated(Bundle savedInstanceState) { Log.i(TAG, "onActivityCreated"); super.onActivityCreated(savedInstanceState); setupUIElements(); loadRows(); } private void loadRows() { mrowsAdapter=new ArrayObjectAdapter(new ListRowPresenter()); HeaderItem gridPresenterHeader=new HeaderItem(0,"GridItemPresenter"); GridItemPresenter mGridPresenter = new GridItemPresenter(); ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter); gridRowAdapter.add("Card 1"); gridRowAdapter.add("Card 2"); gridRowAdapter.add("Card 3"); mrowsAdapter.add(new ListRow(gridPresenterHeader, gridRowAdapter)); /* set */ setAdapter(mrowsAdapter); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

  @Override public void onActivityCreated(Bundle savedInstanceState) {     Log.i(TAG, "onActivityCreated");     super.onActivityCreated(savedInstanceState);     setupUIElements();     loadRows(); } private void loadRows() {     mrowsAdapter=new ArrayObjectAdapter(new ListRowPresenter());     HeaderItem gridPresenterHeader=new HeaderItem(0,"GridItemPresenter");     GridItemPresenter mGridPresenter = new GridItemPresenter();     ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter);     gridRowAdapter.add("Card 1");     gridRowAdapter.add("Card 2");     gridRowAdapter.add("Card 3");     mrowsAdapter.add(new ListRow(gridPresenterHeader, gridRowAdapter));       /* set */     setAdapter(mrowsAdapter); }

  So whole source code of MainFragmentTv will be:

• MainFragmentTv .class

• public class MainFragmentTv extends BrowseFragment { private static final String TAG = MainFragmentTv.class.getSimpleName(); ArrayObjectAdapter mrowsAdapter; private static final int GRID_ITEM_WIDTH = 300; private static final int GRID_ITEM_HEIGHT = 200; @Override public void onActivityCreated(Bundle savedInstanceState) { Log.i(TAG, "onActivityCreated"); super.onActivityCreated(savedInstanceState); setupUIElements(); loadRows(); } private void loadRows() { mrowsAdapter=new ArrayObjectAdapter(new ListRowPresenter()); HeaderItem gridPresenterHeader=new HeaderItem(0,"GridItemPresenter"); GridItemPresenter mGridPresenter = new GridItemPresenter(); ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter); gridRowAdapter.add("Card 1"); gridRowAdapter.add("Card 2"); gridRowAdapter.add("Card 3"); mrowsAdapter.add(new ListRow(gridPresenterHeader, gridRowAdapter)); /* set */ setAdapter(mrowsAdapter); } private void setupUIElements() { setBadgeDrawable(getActivity().getResources().getDrawable(R.drawable.logo_india)); // setTitle("Hello Android TV"); // over title setHeadersState(HEADERS_ENABLED); setHeadersTransitionOnBackEnabled(true); // set fastLane (or headers) background color setBrandColor(getResources().getColor(R.color.fastlane_background)); // set search icon color setSearchAffordanceColor(getResources().getColor(R.color.search_opaque)); } private class GridItemPresenter extends Presenter { @Override public ViewHolder onCreateViewHolder(ViewGroup parent) { TextView view = new TextView(parent.getContext()); view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT)); view.setFocusable(true); view.setFocusableInTouchMode(true); view.setBackgroundColor(getResources().getColor(R.color.default_background)); view.setTextColor(Color.WHITE); view.setGravity(Gravity.CENTER); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder viewHolder, Object item) { ((TextView) viewHolder.view).setText((String) item); } @Override public void onUnbindViewHolder(ViewHolder viewHolder) { } } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

  public class MainFragmentTv extends BrowseFragment {     private static final String TAG = MainFragmentTv.class.getSimpleName();     ArrayObjectAdapter mrowsAdapter;     private static final int GRID_ITEM_WIDTH = 300;     private static final int GRID_ITEM_HEIGHT = 200;       @Override     public void onActivityCreated(Bundle savedInstanceState) {         Log.i(TAG, "onActivityCreated");         super.onActivityCreated(savedInstanceState);         setupUIElements();         loadRows();       }       private void loadRows() {         mrowsAdapter=new ArrayObjectAdapter(new ListRowPresenter());         HeaderItem gridPresenterHeader=new HeaderItem(0,"GridItemPresenter");         GridItemPresenter mGridPresenter = new GridItemPresenter();         ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter);         gridRowAdapter.add("Card 1");         gridRowAdapter.add("Card 2");         gridRowAdapter.add("Card 3");         mrowsAdapter.add(new ListRow(gridPresenterHeader, gridRowAdapter));           /* set */         setAdapter(mrowsAdapter);     }       private void setupUIElements() {         setBadgeDrawable(getActivity().getResources().getDrawable(R.drawable.logo_india));         // setTitle("Hello Android TV");         // over title         setHeadersState(HEADERS_ENABLED);         setHeadersTransitionOnBackEnabled(true);           // set fastLane (or headers) background color         setBrandColor(getResources().getColor(R.color.fastlane_background));         // set search icon color         setSearchAffordanceColor(getResources().getColor(R.color.search_opaque));     }       private class GridItemPresenter extends Presenter {         @Override         public ViewHolder onCreateViewHolder(ViewGroup parent) {             TextView view = new TextView(parent.getContext());             view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT));             view.setFocusable(true);             view.setFocusableInTouchMode(true);             view.setBackgroundColor(getResources().getColor(R.color.default_background));             view.setTextColor(Color.WHITE);             view.setGravity(Gravity.CENTER);             return new ViewHolder(view);         }           @Override         public void onBindViewHolder(ViewHolder viewHolder, Object item) {             ((TextView) viewHolder.view).setText((String) item);         }           @Override         public void onUnbindViewHolder(ViewHolder viewHolder) {           }     }   }

  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

  <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="vrinfo.com.androidtvappdemo"> <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> <!-- true: your app runs on only TV false: your app runs on phone and TV --> <uses-feature android:name="android.software.leanback" android:required="true" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/Theme.Leanback"> <activity android:name=".MainTVActivity" android:icon="@drawable/logo_india" android:theme="@style/Theme.Leanback" android:label="@string/app_name" android:logo="@drawable/logo_india"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

  <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="vrinfo.com.androidtvappdemo">     <uses-feature         android:name="android.hardware.touchscreen"         android:required="false" />       <!--      true:  your app runs on only TV      false: your app runs on phone and TV -->     <uses-feature         android:name="android.software.leanback"         android:required="true" />         <application         android:allowBackup="true"         android:icon="@mipmap/ic_launcher"         android:label="@string/app_name"         android:supportsRtl="true"         android:theme="@style/Theme.Leanback">         <activity android:name=".MainTVActivity"             android:icon="@drawable/logo_india"             android:theme="@style/Theme.Leanback"             android:label="@string/app_name"             android:logo="@drawable/logo_india">             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                   <category android:name="android.intent.category.LEANBACK_LAUNCHER" />                 </intent-filter>         </activity>     </application> </manifest>

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