如何为Android TV自定义选定的RowPresenter

Question

I want to increase size of selected RowPresenter and put a white border around it in BrowseFragment . I tried following to put border but its edge are fitting my card as I am using rounded corner for my cards.

private final class ItemViewSelectedListener implements OnItemViewSelectedListener {
    @Override
    public void onItemSelected(Presenter.ViewHolder itemViewHolder, Object item,
                               RowPresenter.ViewHolder rowViewHolder, Row row) {
                ImageCardView cardView = (ImageCardView) itemViewHolder.view;
                GradientDrawable border = new GradientDrawable();
                border.setStroke(10, ContextCompat.getColor(getActivity(), R.color.white));
                cardView.getMainImageView().setImageDrawable(border);
  }
}

Below is code how I am making my card's corner rounded:

<dimen name="lb_rounded_rect_corner_radius">10dp</dimen>

1. How can I increase size of selected card more than default zooming size?
2. How can I put white border around my selected card, so that it covers all edges smoothly?

Answer 1

1. How can I increase size of selected card more than default zooming size?

You can do this by passing in a larger FocusHighlight zoom factor when initializing your ListRowPresenter . You can initialize your presenter with the FocusHighlight#ZOOM_FACTOR_LARGE for the larger focused cards. ListRowPresenter has this constructor .

2. How can I put white border around my selected card, so that it covers all edges smoothly?

You can provide your own subclass of BaseCardView (or ImageCardView ) where you supply your own layout. When you have your own layout, you won't have any limiting factors. If you look at this folder in the leanback-showcase sample app, there are many examples of custom cards.

This covers a very simple example

public class YourCardView extends BaseCardView {

    public YourCardView(Context context) {
        super(context, null, R.style.TextCardStyle);
        LayoutInflater.from(getContext()).inflate(R.layout.your_card_xml, this);
        setFocusable(true);
    }
}

Where you supply your own xml file instead of R.layout.your_card_xml . There you can add borders and whatever else you'd like.