Working With Android TV LeanBack Browsefragment

Android TV Browsefragment: 

We are Using  Leanback framework for android tv Application Development, in this Leanback framework browse fragment is Major concept to discussion so i am starting with browsefrgment. 

When we are creating Application Most probably we use to display all modules and shortcuts display in Homepage to Building home page Browsefragment is Most useful. 

In Android OS default launcher also using this browsefragment launch home screen,

In this browfragment we have few deafult implementations like  Logo in Header, and Search, category list info etc.


Lets goto hands-on Development : 

in this session I am displaying default Browsefragement with array-object, next sessions we can learn more deep on Browse fragment. 

Start a New Project with the name of  Browsefragement 

-Open Android Stuido - > Start a new Android Studio Project- Give Application Name as SampleBrowseFrament -> select android tv and Finish

Create An Activity with the name of MainActivity this activity is Launcher Activity.





















Create actvity with name MainActivity (github path : SampleBrowseFragment/app/src/main/java/mindrock/in/MainActivity.java)

package mindrock.in;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

The source code of Mainactivity  Layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/root"
        android:name="mindrock.in.BrowseFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></fragment>
</android.support.constraint.ConstraintLayout>

Then its time to change the manifest file  : use leanback Theam

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="mindrock.in">
    <!-- TV app need to declare touchscreen not required -->
    <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=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

and now Create java file for browsefragement :

package mindrock.in;


import android.graphics.Color;
import android.os.Bundle;
import android.support.v17.leanback.widget.ArrayObjectAdapter;
import android.support.v17.leanback.widget.HeaderItem;
import android.support.v17.leanback.widget.ListRow;
import android.support.v17.leanback.widget.ListRowPresenter;
import android.support.v17.leanback.widget.Presenter;
import android.support.v17.leanback.widget.Visibility;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.TextView;

public class BrowseFragment extends android.support.v17.leanback.app.BrowseFragment {
    private static final String TAG = BrowseFragment.class.getSimpleName();

    private ArrayObjectAdapter mArrayObjectAdapter;
    private static final int GRID_ITEM_WIDTH= 300;
    private static final int GRID_ITEM_HEIGHT= 200;

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        setUpUI();
        loadRows();
    }


    private void setUpUI() {
        setTitle("Mind Rock");

        setHeadersState(HEADERS_ENABLED);
        setHeadersTransitionOnBackEnabled(true);

        setBrandColor(Color.RED);

        setSearchAffordanceColor(Color.BLUE);

    }
    private void loadRows() {
        mArrayObjectAdapter =new ArrayObjectAdapter(new ListRowPresenter());

        HeaderItem gridPresenterheader = new HeaderItem(0,"ONE");
        GridItemPresenter gridItemPresenter = new GridItemPresenter();

        ArrayObjectAdapter mRowAdapter=new ArrayObjectAdapter(gridItemPresenter);
        mRowAdapter.add(" ITEM ONE");
        mRowAdapter.add(" ITEM TWO");
        mRowAdapter.add(" ITEM THREE");
        mRowAdapter.add(" ITEM Four");

        HeaderItem gridPresenterheader2 = new HeaderItem(1,"TWO");
        //GridItemPresenter gridItemPresenter = new GridItemPresenter();

        ArrayObjectAdapter mRowAdapter2=new ArrayObjectAdapter(gridItemPresenter);
        mRowAdapter2.add(" ITEM ONE");
        mRowAdapter2.add(" ITEM TWO");
        mRowAdapter2.add(" ITEM THREE");
        mRowAdapter2.add(" ITEM Four");

        HeaderItem gridPresenterheader3 = new HeaderItem(1,"Three");
        //GridItemPresenter gridItemPresenter = new GridItemPresenter();

        ArrayObjectAdapter mRowAdapter3=new ArrayObjectAdapter(gridItemPresenter);
        mRowAdapter3.add(" ITEM ONE");
        mRowAdapter3.add(" ITEM TWO");
        mRowAdapter3.add(" ITEM THREE");
        mRowAdapter3.add(" ITEM Four");

        HeaderItem gridPresenterheader4 = new HeaderItem(2,"Four");
        //GridItemPresenter gridItemPresenter = new GridItemPresenter();

        ArrayObjectAdapter mRowAdapter4=new ArrayObjectAdapter(gridItemPresenter);
        mRowAdapter4.add(" ITEM ONE");
        mRowAdapter4.add(" ITEM TWO");
        mRowAdapter4.add(" ITEM THREE");
        mRowAdapter4.add(" ITEM Four");


        mArrayObjectAdapter.add(new ListRow(gridPresenterheader,mRowAdapter));
        mArrayObjectAdapter.add(new ListRow(gridPresenterheader2,mRowAdapter2));
        mArrayObjectAdapter.add(new ListRow(gridPresenterheader3,mRowAdapter3));
        mArrayObjectAdapter.add(new ListRow(gridPresenterheader4,mRowAdapter4));


        setAdapter(mArrayObjectAdapter);



    }
    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(Color.GRAY);
            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) {

        }
    }

}

 Create a java file with the name of Browsefragment, and extend leanback browsefragment.



Browse fragment alredy have few pre implementations  like title and rows and search,



full source code of project available in Github