How to customize selected RowPresenter for Android TV

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.