How do I make a TV item expandable upon selection, such as a homepage recommendation?
On the AndroidTV home page, when a user selects a recommendation video, the item expands itself and displays more information than other unselected items.
Screenshot here:
In my TV app, I expand for VerticalGridFragment
both GridFragment
TV show. And also expands Presenter
to set the layout of the element. However, when an item is selected, it only scales more, but does not display more information like the home page recommendation.
How can I get this effect in my TV Presenter app?
source to share
Perhaps I found a solution: In Presenter
we will create 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 the container in which the displaying view is displayed, in code, the view RichCardView
. Here are some of the codes RichCardView
:
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 a view is selected, we show more views to show more information. Otherwise, we will hide some views to hide some information.
And yes, it RichCardView
just continues RelativeLayout
. You can also expand any ViewGroup
one you want. If you want to change the live view, just add animation when the view is visible.
source to share
You can refer to the ImageCardView implementation. It has setInfoVisibility and setExtraVisibility methods that control the behavior of the extensible CardView. If CARD_REGION_VISIBLE_ACTIVATED is set to argument, it will behave so that the region does not appear when the user selects a header, and the region appears when the user moves to the RowsFragment.
Update (2015.10.26)
If you only want to deploy the card when you can use CARD_REGION_VISIBLE_SELECTED.
Below is a sample code (updated) that 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 .
source to share