Custom TitleView with Description and Preview Image Android TV (FireTV)

Question

I am trying to build my first Amazon Fire TV app using Android Lean back library. I want to customise the BrowseFragment to look like the image shown below.

I tried setting a custom layout as below.

 @Override public View onInflateTitleView(LayoutInflater inflater, ViewGroup parent,
      Bundle savedInstanceState) {
    View title = inflater.inflate(R.layout.custom_title_view, parent, false);
    titleImageView = (AppCompatImageView) title.findViewById(R.id.title_content_thumbnail);
    return title;
  }

but the resulting layout is showing as shown below, with a transparent TitleView and the list rows are showing below that. Please suggest a better approach to make the UI looks similar to the first image. Couldn't find anything that could implement this.

Answer 1

So, I have solved this somehow. My activity_main.xml looks like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/default_background"
    android:orientation="vertical"
    >
  <fragment
      android:id="@+id/title_layout"
      android:name="com.kalpnik.vrdevotee.fragment.MainTitleFragment"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_alignParentTop="true"
      android:layout_weight="1"
      />
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/main_fragment"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_below="@+id/title_layout"
      android:layout_weight="1"
      tools:deviceIds="tv"
      />
</LinearLayout>

In the FrameLayout I will load a fragment which extended from BrowseFragment, so this gives me the necessary rows.

And at the top, I am loading MainTitleFragment which is extended from Fragment and the layout looks like below.

fragment_main_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#000000"
    android:orientation="horizontal"
    >
  <LinearLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:background="@color/icon_background"
      android:orientation="vertical"
      android:paddingTop="16dp"
      >
    <TextView
        android:id="@+id/title_content_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="16dp"
        tools:text=""
        android:textColor="@color/colorPrimaryDark"
        android:textSize="28sp"
        android:textStyle="bold"
        />
    <TextView
        android:id="@+id/title_content_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="16dp"
        android:ellipsize="end"
        android:text=""
        android:textSize="15sp"

        />
  </LinearLayout>
  <FrameLayout
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      >

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/title_content_thumbnail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        />
    <View
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@drawable/transparent_bg"
        />
    <View
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="bottom"
        android:background="@drawable/transparent_bg_bottom"
        />
  </FrameLayout>

</LinearLayout>

And this worked for me. Hope this helps.