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