Android TV: Customizing Leanback's VideoDetailsFragment

Make modifications to the demo of the new TV project in Android studio to achieve the following requirements:

1. Remove the top background area

2. Modify the height of the middle detail area

3. Modify the overall background interface

The effect is as shown in the figure:

I searched all over the internet and couldn't find a solution. You can only test yourself by looking at the code to customize the implementation.

1. Remove the top background area:

Rewrite the setupDetailsOverviewRowPresenter method in VideoDetailsFragment and remove one of the alignDefs:

@Override
    protected void setupDetailsOverviewRowPresenter(FullWidthDetailsOverviewRowPresenter presenter) {
        ItemAlignmentFacet facet = new ItemAlignmentFacet();
        // by default align details_frame to half window height
        ItemAlignmentFacet.ItemAlignmentDef alignDef = new ItemAlignmentFacet.ItemAlignmentDef();
        alignDef.setItemAlignmentViewId(androidx.leanback.R.id.details_frame);
        alignDef.setItemAlignmentOffset(0);
        alignDef.setItemAlignmentOffsetPercent(0);
        ItemAlignmentFacet.ItemAlignmentDef[] defs =
                new ItemAlignmentFacet.ItemAlignmentDef[] {alignDef};
        facet.setAlignmentDefs(defs);
        presenter.setFacet(ItemAlignmentFacet.class, facet);
    }

When you look at the effect after completion, you will find that there will be an unsightly return button in the upper left corner, and there will be no response when you click it. We don't need this return icon. If we actively call the showTitle method, we will find that it has no effect. Here I rewrite the method so that no matter how other classes assign values ​​to it, I will not display the title bar, and there will be no return button icon:

@Override
    public void showTitle(boolean show) {
        super.showTitle(false);
    }

2. Modify the height of the middle detail area:

Customize a FullWidthDetailsOverviewRowPresenter class and modify the height in it:

public class MyDetailsOverviewRowPresenter extends FullWidthDetailsOverviewRowPresenter {
    public MyDetailsOverviewRowPresenter(Presenter detailsPresenter) {
        super(detailsPresenter);
    }

    @Override
    protected RowPresenter.ViewHolder createRowViewHolder(ViewGroup parent) {
        ViewHolder viewHolder = (ViewHolder) super.createRowViewHolder(parent);
        ViewGroup overviewView = viewHolder.getOverviewView();
        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) overviewView.getLayoutParams();
        layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
        overviewView.setLayoutParams(layoutParams);
        overviewView.setPadding(0,0,0,50); //底部给点边距，不然很难看
        return viewHolder;
    }

    @Override
    protected void onLayoutOverviewFrame(ViewHolder viewHolder, int oldState, boolean logoChanged) {
        super.onLayoutOverviewFrame(viewHolder, oldState, logoChanged);
        //重写这个方法为了解决图片位置偏上的问题
        ViewGroup.MarginLayoutParams lpFrame =
                (ViewGroup.MarginLayoutParams) viewHolder.getOverviewView().getLayoutParams();
        lpFrame.topMargin = 0;
        viewHolder.getOverviewView().setLayoutParams(lpFrame);
    }
}

Then replace the original instantiation in VideoDetailsFragment:

private void setupDetailsOverviewRowPresenter() {
        // 替换我们的自定义类
        FullWidthDetailsOverviewRowPresenter detailsPresenter =
                new MyDetailsOverviewRowPresenter(new DetailsDescriptionPresenter());
       //设置背景透明
        detailsPresenter.setBackgroundColor(ContextCompat.getColor(requireContext(),R.color.transparent));
        //设置action栏背景不透明
        detailsPresenter.setActionsBackgroundColor(ContextCompat.getColor(requireContext(),R.color.default_background));
        //设置详情没有选中效果，不然选中会有个半透白色前景色
        detailsPresenter.setSelectEffectEnabled(false);
        // Hook up transition element.
        FullWidthDetailsOverviewSharedElementHelper sharedElementHelper =
                new FullWidthDetailsOverviewSharedElementHelper();

        ......

3. Modify the overall background interface:

Originally, the background was set through mDetailsBackground, but it separated different backgrounds at the top, middle, and bottom. I wanted a complete background here.

Check out VideoDetailsFragment's parent class, DetailsSupportFragment, which has a setBackgroundDrawable method, but it is not public, so we cannot call it. Then we don’t need the original one. We can find the rootView of this interface and set the background:

Override onCreateView:

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = super.onCreateView(inflater, container, savedInstanceState);
        rootView.findViewById(androidx.leanback.R.id.details_fragment_root)
                .setBackground(ContextCompat.getDrawable(requireContext(),R.drawable.image1));
        return rootView;
    }

Remove the original background statement:

Comment out the code related to mDetailsBackground and it will be OK. Otherwise, the mDetailsBackground.enableParallax() method will be executed and the background will become black.