How to make TV item expandable when be selected, like homepage's recommendation?

Question

In AndroidTV's homepage, when user selects a recommendation video, the item will expand itself and shows more information than the other unselect items.

Screenshot is here:

In my TV application, I extends the VerticalGridFragment as the GridFragment to show TV shows. And also extends the Presenter to set the item layout. However, when item is selected, the item only scale bigger, but not show more information just like homepage's recommendation.

How can I get this effect in my TV application's Presenter?

Answer 1

Maybe I found the solution: In Presenter , we will create a ViewHolder to show, maybe like this:

public class GridItemPresenter extends Presenter {
......

public GridItemPresenter(Fragment fragment) {
    this.mainFragment = fragment;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent) {
    // Here is the view we want to show.
    final RichCardView cardView = new RichCardView(parent.getContext());

    // We should change something when the view is focused: show more information.
    cardView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, final boolean isFocused) {
            updateCardBackgroundColor(cardView, isFocused);
            cardView.setSelected(isFocused);
        }
    });
    cardView.setFocusable(true);
    cardView.setFocusableInTouchMode(true);
    ......
    return new ViewHolder(cardView);
}

private static void updateCardBackgroundColor(RichCardView view, boolean selected) {
    ......
}

@Override
public void onBindViewHolder(ViewHolder viewHolder, Object item) {
    RichCardView cardView = (RichCardView) viewHolder.view;
    ......
}

@Override
public void onUnbindViewHolder(ViewHolder viewHolder) {
    RichCardView cardView = (RichCardView) viewHolder.view;
    ......
}
}

ViewHolder is a container which holds the showing view, in upon code , view is RichCardView. Here are some of the RichCardView codes:

public class RichCardView extends RelativeLayout {

public RichCardView(Context context) {
    this(context, null);
}

public RichCardView(Context context, AttributeSet attrs) {
    this(context, attrs, android.support.v17.leanback.R.attr.imageCardViewStyle);
}

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

    LayoutInflater inflater = LayoutInflater.from(context);
    View v = inflater.inflate(R.layout.lb_rich_card_view, this);

   ......
}

@Override
public void setSelected(boolean selected) {
    super.setSelected(selected);
    if (selected) {
        // when be selected, set some views Visible to show more information.
        mContentView.setVisibility(View.VISIBLE);
        mEpisodeView.setVisibility(View.VISIBLE);
    } else {
        // when not be selected, hide those views.
        mContentView.setVisibility(View.GONE);
        mEpisodeView.setVisibility(View.GONE);
    }
}
}

When the view is selected , we show more views to show more information. Otherwise, we hide some views to hide some information.

And yes, RichCardView is simply extends RelativeLayout. You can also extend any ViewGroup you want. If you want to change lively, just add some animations when change view's visibility.

Answer 2

You may refer the implementation of ImageCardView. It has a method setInfoVisibility and setExtraVisibility which controls the behavior of expandable CardView. When CARD_REGION_VISIBLE_ACTIVATED is set to argument, it will behaves that the region will not appear when user is selecting header, and the region will appear when user move to RowsFragment.

Update (2015.10.26)

When you want to expand the card only when selected CARD_REGION_VISIBLE_SELECTED can be used.

Below is sample code (updated), which should be implemented in the Presenter class.

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent) {
    Log.d(TAG, "onCreateViewHolder");
    mContext = parent.getContext();

    ImageCardView cardView = new ImageCardView(mContext);
    cardView.setCardType(BaseCardView.CARD_TYPE_INFO_UNDER);
    cardView.setInfoVisibility(BaseCardView.CARD_REGION_VISIBLE_SELECTED);
    cardView.setFocusable(true);
    cardView.setFocusableInTouchMode(true);
    cardView.setBackgroundColor(mContext.getResources().getColor(R.color.fastlane_background));
    return new ViewHolder(cardView);
}

Details are explained at the bottom of this tutorial.