How to change the background color of the info area on a ImageCardView?

Question

I am trying to change the background color of the infoArea on an ImageCardView in the Android Leanback Library when the card is selected. Currently what I have tried is changing the background in the OnItemViewSelectedListener. This changes the background, but then doesn't clear the previously selected item.

private final class ItemViewSelectedListener implements OnItemViewSelectedListener {
        @Override
        public void onItemSelected(Presenter.ViewHolder itemViewHolder, Object item,
                                   RowPresenter.ViewHolder rowViewHolder, Row row) {
            if (item instanceof Video) {
                mBackgroundURI = ((Video) item).getBackgroundImageURI();
                startBackgroundTimer();
                ((ImageCardView) itemViewHolder.view)
                        .setInfoAreaBackgroundColor(getResources().getColor(R.color.dark_blue_grey));
            }
        }
    }

I would like to achieve something like this:

Any ideas? Thanks.

Answer 1

If you wish to dynamically change visual styles of focused card views, you could set OnFocusChangeListener on your ImageCardView. Full example can be found in Google Samples leanback-showcase project.

This is a short example, in your ImageCardViewPresenter class put something like this:

@Override
public Presenter.ViewHolder onCreateViewHolder(ViewGroup parent) {
    Context context = parent.getContext();

    ImageCardView cardView = new ImageCardView(context);
    cardView.setFocusable(true);
    cardView.setFocusableInTouchMode(true);

    cardView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if (hasFocus) {
                // Set bg color for the whole card
                cardView.setBackgroundColor(ContextCompat.getColor(context, R.color.FOCUSED_COLOR));
                // Set bg color for the info area only
                cardView.setInfoAreaBackgroundColor(ContextCompat.getColor(context, R.color.FOCUSED_COLOR));
                // Set title text color
                ((TextView) cardView.findViewById(R.id.title_text)).setTextColor(ContextCompat.getColor(context, R.color.FOCUSED_COLOR));
                // Set description text color
                ((TextView) cardView.findViewById(R.id.content_text)).setTextColor(ContextCompat.getColor(context, R.color.FOCUSED_COLOR));
            } 
            else {
                cardView.setBackgroundColor(ContextCompat.getColor(context, R.color.NORMAL_COLOR));
                cardView.setInfoAreaBackgroundColor(ContextCompat.getColor(context, R.color.NORMAL_COLOR));
                ((TextView) cardView.findViewById(R.id.title_text)).setTextColor(ContextCompat.getColor(context, R.color.NORMAL_COLOR));
                ((TextView) cardView.findViewById(R.id.content_text)).setTextColor(ContextCompat.getColor(context, R.color.NORMAL_COLOR));
            }
        }
    });

    return new ViewHolder(cardView);
}

To get proper layout ID's of all card's child views, look in XML source, for example here: lb_image_card_view.xml