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