Using Glide to load image in ImageView of SliderCard gives weird result

[arshadalisoomro]

Hello Team Ramotion!

I found this as repository of choice, it was very cleverly engineered. I've to load image from URL using Glide but result is

As you can see the height & width of image is not being perfect as the drawable are, i have made some changes in code as you can see

public class SliderAdapter extends RecyclerView.Adapter<SliderCard> {

    private final int count;
    private String[] mPlayerImageUrlArray; // Adding an array of Urls instead of int resIds
    private final View.OnClickListener listener;

    public SliderAdapter(String[] mPlayerImageUrlArray, int count, View.OnClickListener listener) {
        this.mPlayerImageUrlArray = mPlayerImageUrlArray;
        this.count = count;
        this.listener = listener;
    }

    @Override
    public SliderCard onCreateViewHolder(ViewGroup parent, int viewType) {
        final View view = LayoutInflater
                .from(parent.getContext())
                .inflate(R.layout.layout_slider_card, parent, false);

        if (listener != null) {
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    listener.onClick(view);
                }
            });
        }

        return new SliderCard(view);
    }

    @Override
    public void onBindViewHolder(SliderCard holder, int position) {
        holder.setContent(mPlayerImageUrlArray[position]);
    }

    @Override
    public void onViewRecycled(SliderCard holder) {
        holder.clearContent();
    }

    @Override
    public int getItemCount() {
        return count;
    }

}

now SliderCard is

public class SliderCard extends RecyclerView.ViewHolder {

    private static int viewWidth = 0;
    private static int viewHeight = 0;

    private final ImageView imageView;

    public SliderCard(View itemView) {
        super(itemView);
        imageView = (ImageView) itemView.findViewById(R.id.image);

    }

    void setContent(final String imgUrl) {
        Log.e("IMG_URL", "setContent() is " + imgUrl);
        if (viewWidth == 0) {
            Log.e("IF", "Called ");
            itemView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    itemView.getViewTreeObserver().removeOnGlobalLayoutListener(this);

                    viewWidth = itemView.getWidth()*2;//Here I tried to double the image size but in vain
                    viewHeight = itemView.getHeight()*2;//Here I tried to double the image size but in vain
                    loadBitmap(imgUrl);
                }
            });
        } else {
            loadBitmap(imgUrl);
        }
    }

    void clearContent() {
       /* if (task != null) {
            task.cancel(true);
        }*/
    }

    private void loadBitmap(String imgUrl) {
        //Glide comes in to place here
        imageView.setMaxWidth(viewWidth);
        imageView.setMaxHeight(viewHeight);

        Glide.with(imageView.getContext())
                .load(imgUrl)
                .into(imageView);

    }

}

Question is how can I get Image cover the SliderCard perfectly as Drawables were?

Regards, Arshad Ali

[dvg4000]

Hello, @arshadalisoomro.

You can use Glide in such a way. Set scaleType of ImageViews in layout\layout_slide_card.xml and layout-v21\layout_slide_card.xml like this:

<ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:layout_gravity="center"/>

Then change setContent and clearContent methods of SliderCard class, like this:

void setContent(@DrawableRes final int resId) {
        Glide.with(imageView.getContext()).load(imgUrl).into(imageView);
}

void clearContent() {
        Glide.clear(imageView);
}

That should do the trick.