Android TV ImageViewCard Layout margin change

Question

I have been working on an android tv app.I have list of movies which i populated inside the BrowserFragment class.I have a presenter class that make use of ImageCardView to show the movie thumbnail.I am trying to customize the imagecardview on Selected.I wanted it to look like the pic here.On selection of particular ImageCardView the thumbnail will increase in size but the base alignment should be the same as the other unselected ones as shown in the pic.

EDIT Pic Link https://www.dropbox.com/s/habpjnrlwh1se8v/sample.png?dl=0

EDIT Presenter class

public class CardPresenter extends Presenter {
private int mSelectedBackgroundColor = -1;
private int mDefaultBackgroundColor = -1;
private Drawable mDefaultCardImage;

class ViewHolder extends Presenter.ViewHolder {
    HashMap<Integer,Object> ObjectsList=new HashMap<>();
    public ViewHolder(View view) {
        super(view);
    }
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent) {
    mDefaultBackgroundColor = R.color.default_background;
    mSelectedBackgroundColor = R.color.selected_background;
    mDefaultCardImage = parent.getResources().getDrawable(R.drawable.lb_card_shadow_focused, null);

    ImageCardView cardView = new ImageCardView(parent.getContext()) {
        @Override
        public void setSelected(boolean selected) {
            updateCardBackgroundColor(this, selected);
            super.setSelected(selected);
        }
    };

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

private void updateCardBackgroundColor(ImageCardView view, boolean selected) {
    int color = selected ? mSelectedBackgroundColor : mDefaultBackgroundColor;

    // Both background colors should be set because the view's
    // background is temporarily visible during animations.

    view.setBackgroundColor(color);
    view.findViewById(R.id.info_field).setBackgroundColor(color);
}

@Override
public void onBindViewHolder(Presenter.ViewHolder viewHolder, Object item) {
    Movie movie = (Movie) item;

    ImageCardView cardView = (ImageCardView) viewHolder.view;
    cardView.setTitleText(movie.getName());
    cardView.setContentText(movie.getCategory());

    if (movie.getImgResUrl() != 0) {
        // Set card size from dimension resources.
        Resources res = cardView.getResources();
//            int width = res.getDimensionPixelSize(R.dimen.card_width);
//            int height = res.getDimensionPixelSize(R.dimen.card_height);
        cardView.setMainImageDimensions(300, 300);

        Glide.with(cardView.getContext())
                .load(movie.getImgResUrl())
                .error(mDefaultCardImage)
                .into(cardView.getMainImageView());
    }
}

@Override
public void onUnbindViewHolder(Presenter.ViewHolder viewHolder) {
    ImageCardView cardView = (ImageCardView) viewHolder.view;

    // Remove references to images so that the garbage collector can free up memory.
    cardView.setBadgeImage(null);
    cardView.setMainImage(null);
}
}

Any help will be greatly appreciated.Thanks

Please add the reference image or Add the presenter class code which have image card view. — Jay Rathod, Mar 10 '16 at 11:32
@jaydroider i dont have enough reputation to post image so i have added link to the sample image — Infimate, Mar 10 '16 at 13:13
Currently with this code how is your list row layout is looking. Can you explain bit more ? — Jay Rathod, Mar 10 '16 at 13:53
yes, i have rows of movie thumbnails which i can scroll down vertically .Each rows have different category like comedy , action adventure.Added these categories just for the name sake. — Infimate, Mar 10 '16 at 14:06
So basically you want to focus list row selected movie which will show some what large then other movies. — Jay Rathod, Mar 10 '16 at 14:14
yes it should enlarge but as shown in the picture , the base of the enlarged picture should be the same(all in a straight line) as that of the other pics — Infimate, Mar 10 '16 at 14:32
Could you give reference image for how is your current layout looking with all movies. — Jay Rathod, Mar 11 '16 at 12:12
Try with my answer this method is i have used in one of my TV app and it's working fine. — Jay Rathod, Mar 14 '16 at 13:05
Anyone can help with this?. I also want the exact custom card http://i.stack.imgur.com/tms1C.png — rahultheOne, Jun 12 '20 at 14:21

Jay Rathod · Answer 1 · 2016-03-14T12:50:45.763

Try with this method.

In your View Holder class Modify this.

class ViewHolder extends Presenter.ViewHolder {
   private ImageCardView mCardView;
   private Drawable mDefaultCardImage;
   private PicassoImageCardViewTarget mImageCardViewTarget;
   HashMap<Integer,Object> ObjectsList=new HashMap<>();

   public ViewHolder(View view) {
        super(view);
        mCardView = (ImageCardView) view;
        mImageCardViewTarget = new PicassoImageCardViewTarget(mCardView);
    }

    protected void updateCardViewImage(URI uri) {
        Picasso.with(mContext)
                .load(uri.toString())
                .resize(Utils.convertDpToPixel(mContext, CARD_WIDTH),
                        Utils.convertDpToPixel(mContext, CARD_HEIGHT))
                .error(mDefaultCardImage)
                .into(mImageCardViewTarget);
    }
}

Where card width and card height should be define Globally in presenter class.

private static int CARD_WIDTH = 323;
private static int CARD_HEIGHT = 146;

Then call this in onBindViewHolder like this.

if (movie.getImgResUrl() != 0) {
    Resources res = cardView.getResources();
    ((ViewHolder) viewHolder).mCardView.setMainImageDimensions(CARD_WIDTH, CARD_HEIGHT);
    ((ViewHolder) viewHolder).updateCardViewImage(movie.getCardImageURI());
}

Don't Forget to add this in Build.Gradle file.

compile 'com.squareup.picasso:picasso:2.3.2'

Hope this will help you.

No , i haven't tried yet.I shifted my focus on fetching and consuming the web service.Once i finished it , i will try your idea and then let you know — Infimate, Mar 16 '16 at 05:46

Android TV ImageViewCard Layout margin change

1 Answers1