Android Tv App Demo Tutorial
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:-
- Android Development IDE (Android Studio)
- SDK Tool Verison : 24.0.0 or Higher
- 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
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="utf-8"?> <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_browse_fragment" android:name="vrinfo.com.androidtvappdemo.MainFragmentTv" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainTVActivity" tools:deviceIds="tv" tools:ignore="MergeRootFrame" /> |
Now ,Modify MainFragmentTv as follows:
MainFragmentTv.class
1 2 3 4 5 6 7 8 9 |
public class MainFragmentTv extends BrowseFragment { @Override public void onActivityCreated(Bundle savedInstanceState) { Log.i(TAG, "onActivityCreated"); super.onActivityCreated(savedInstanceState); } } |
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
12345678<?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
12345678910111213141516171819@Overridepublic 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 titlesetHeadersState(HEADERS_ENABLED);setHeadersTransitionOnBackEnabled(true);// set fastLane (or headers) background colorsetBrandColor(getResources().getColor(R.color.fastlane_background));// set search icon colorsetSearchAffordanceColor(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.java12345678910111213141516171819202122232425<strong>private class GridItemPresenter extends Presenter {@Overridepublic 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);}@Overridepublic void onBindViewHolder(ViewHolder viewHolder, Object item) {((TextView) viewHolder.view).setText((String) item);}@Overridepublic 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
-
1234567891011121314151617181920@Overridepublic 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
-
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667public 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;@Overridepublic 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 titlesetHeadersState(HEADERS_ENABLED);setHeadersTransitionOnBackEnabled(true);// set fastLane (or headers) background colorsetBrandColor(getResources().getColor(R.color.fastlane_background));// set search icon colorsetSearchAffordanceColor(getResources().getColor(R.color.search_opaque));}private class GridItemPresenter extends Presenter {@Overridepublic 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);}@Overridepublic void onBindViewHolder(ViewHolder viewHolder, Object item) {((TextView) viewHolder.view).setText((String) item);}@Overridepublic 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
123456789101112131415161718192021222324252627282930313233343536<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"package="vrinfo.com.androidtvappdemo"><uses-featureandroid:name="android.hardware.touchscreen"android:required="false" /><!--true: your app runs on only TVfalse: your app runs on phone and TV --><uses-featureandroid:name="android.software.leanback"android:required="true" /><applicationandroid: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!!