Customize BrowseFragment to show text and image preview above Row list

Question

As we are new to the Android TV development and we are willing to design the screen as shown in the screenshot below.

After some sort of research on the Leanback library, came to know that we are supposed to use the BrowseFragment to achieve the expected result.

Now the problem is how to design the preview section in the top with a combination of Text and the Program poster as the BrowseFragment shows the Rows from the top left corner of the screen.

Do we need to use our customization or we can just use any of the Leanback library Fragment/Class/Activity?See screenshot here

Jason · Accepted Answer · 2019-07-08T16:34:07.390

I would suggest to wrap the BrowseFragment as child fragment into your fragment which contains any information you want(TextView, ImageView or others). It is hard to change the UI behavior of BrowseFrament because most of the codes/resources are private or protected.

I assume you have a RootFragment which contains two child fragment which is HeaderFragment and ContentFragment.

RootFragment

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="0dp"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp">
  <fragment
        android:id="@+id/headersView"
        android:name="yourpackagename.HeadersFragment"
        android:layout_width="120dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
<fragment
        android:id="@+id/contentFragment"
        android:name="yourpackagename.ContentFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/headersView"
        app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Layout of HeaderFragment

<?xml version="1.0" encoding="utf-8"?>
<androidx.leanback.widget.VerticalGridView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:lb="http://schemas.android.com/tools"
    android:id="@+id/headersView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    lb:numberOfRow="1" />

For ContentFragment, you just extends androidx.leanback.app.RowsSupportFragment() to load the data. And so you can change whatever UI you like accordingly.

Hi Jason, Could you please explain your answer in more detail how to wrap BrowseFragment as child fragment? Or with the example which helps us to understand. — shekhar bhadange, Jul 02 '19 at 11:06
Hey Shekhar, Sorry I made some mistakes. We don't use BrowseFragment because it is super hard to do customization. Instead we use custom Fragment to implement behavior like BrowseFragment. You need a fragment which contains two child fragments (left and right). For the left fragment, we use "androidx.leanback.widget.VerticalGridView" to display the nav bar. And for the right fragment, we extend "androidx.leanback.app.RowsSupportFragment" to display multi rows and tiles. Doing this, you can change the UI easily. — Jason, Jul 02 '19 at 19:56
Hey Jason, Thanks for the explanation, but we are newbies in Android TV development, so it will be very helpful if you just provide us with a basic example or the code snippet for the same. — shekhar bhadange, Jul 05 '19 at 10:49
I edited my answer to have some xml included but for how to use VerticalGridView and RowsSupportFrament, you will need to google it. Leanback handle the focus for you automatically. — Jason, Jul 08 '19 at 16:36

Customize BrowseFragment to show text and image preview above Row list

1 Answers1