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.

Palaeozoic

Answer 1

I found a simpler solution where I just keep track of the view that is currently selected and then change the background area based on that.

private final class ItemViewSelectedListener implements OnItemViewSelectedListener {

        private ImageCardView currentlySelectedView = null;

        @Override
        public void onItemSelected(Presenter.ViewHolder itemViewHolder, Object item,
                                   RowPresenter.ViewHolder rowViewHolder, Row row) {
            if (item instanceof Video) {
                mBackgroundURI = ((Video) item).getBackgroundImageURI();
                startBackgroundTimer();

                if (currentlySelectedView != null) {
                    currentlySelectedView.setInfoAreaBackgroundColor(
                            getResources().getColor(R.color.lb_basic_card_info_bg_color));
                }

                currentlySelectedView = (ImageCardView) itemViewHolder.view;
                currentlySelectedView
                        .setInfoAreaBackgroundColor(getResources().getColor(R.color.dark_blue_grey));
            }
        }
    }

Palaeozoic

Answer 2

I achieved this by extending the ImageCardView, to hold a custom selected color.

public static class CustomImageCardView extends ImageCardView {

    private int mColor;

    public CustomImageCardView(Context context) {
        super(context);
    }

    public CustomImageCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomImageCardView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public int getCustomSelectedSwatch() {
        return mColor;
    }

    public void setCustomColor(int color) {
        mColor = color;
    }
}

I maintain the default background color, and default selected color as member variables in my presenter.

private final int mDefaultInfoBackgroundColor;
private final int mDefaultSelectedInfoBackgroundColor;

And override the setSelected method of the card image view:

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent) {
    mContext = parent.getContext();

    final CustomImageCardView cardView = new CustomImageCardView(mContext) {
        @Override
        public void setSelected(boolean selected) {
            if (getCustomColor() != 0 && selected) {
                setInfoAreaBackgroundColor(getCustomColor());
            } else setInfoAreaBackgroundColor(selected ? mDefaultSelectedInfoBackgroundColor : mDefaultInfoBackgroundColor);
            super.setSelected(selected);
        }
    };

    cardView.setFocusable(true);
    cardView.setFocusableInTouchMode(true);
    return new ViewHolder(cardView);
}

Let me know if you have any questions!

Confluence

Answer 3

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

Deutoplasm