I want to load a gif image from my raw resources( or my device storage), and also scale it to desired width and height with Glide. I successfully in loading gif image but can't scaled it down.
Here is my loading code:
Glide.with(getContext()).load(R.raw.abc).override(
getResources().getDimensionPixelSize(R.dimen.note_icon_width),
getResources().getDimensionPixelSize(R.dimen.note_icon_height)).into(this);
And here is the declaration view in my xml:
<ImageView
android:id="#+id/btn_open_warning"
android:layout_width="48dp"
android:layout_height="match_parent"
android:src="#drawable/ic_whatnew_toolbox"
app:srcSecondState="#drawable/ic_note_menu_disable" />
I'm not familiar with Glide but maybe if you override onResourceReady() method you can scale it down.
Use a .listener() as follows
Glide.with(getContext())
.load(R.raw.abc)
.listener(new RequestListener<Uri, GlideDrawable>() {
#Override
public boolean onException(Exception e, Uri model, Target<GlideDrawable> target, boolean isFirstResource) {
//PENG
return false;
}
#Override
public boolean onResourceReady(GlideDrawable resource, Uri model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
GlideDrawableImageViewTarget glideTarget = (GlideDrawableImageViewTarget) target;
ImageView iv = glideTarget.getView();
int width = iv.getMeasuredWidth();
int targetHeight = width * resource.getIntrinsicHeight() / resource.getIntrinsicWidth();
if(iv.getLayoutParams().height != targetHeight) {
iv.getLayoutParams().height = targetHeight;
iv.requestLayout();
}
return false;
}
})
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.into(this);
Related
By using Glide I set placeholder on image view but the problem is, it is shown on whole image view, I want my placeholder size to be 50dp/50dp but image should be setScale(fitXY).
I solved the problem in glide listener, I am resizing image view on runtime, if it get image from server then imageview width,height(x,y) if not then (x,y).
Glide.with(context)
.load(news.getUrlToImage())
.listener(new RequestListener<Drawable>() {
#Override
public boolean onLoadFailed(#Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(131, 131);
layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
holder.NewsImage.setLayoutParams(layoutParams);
return false;
}
#Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(495, 360);
holder.NewsImage.setLayoutParams(layoutParams);
holder.NewsImage.setScaleType(ImageView.ScaleType.FIT_XY);
return false;
}
}).apply(new RequestOptions().placeholder(R.drawable.place_holder).dontAnimate())
.into(holder.NewsImage);
But the problem is, if there is no image from server it show placeholder of size(50,50) fine and when it has image and glide take some mili seconds to upload image, in that time it shows placeholder on whole image view.
HELP ME
Add android:scaleType="center" in xml.
Then, Glide makes your real image fitted center and placeholder is located in center by xml.
You can check the details in Glide: load drawable but don't scale placeholder
If you want that scaleType to "fitXY"
Try below.
holder.NewsImage.setScaleType(ImageView.ScaleType.CENTER);
Glide.with(context)
.load(news.getUrlToImage())
.listener(new RequestListener<Drawable>() {
#Override
public boolean onLoadFailed(#Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(131, 131);
layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
holder.NewsImage.setLayoutParams(layoutParams);
return false;
}
#Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(495, 360);
holder.NewsImage.setLayoutParams(layoutParams);
holder.NewsImage.setScaleType(ImageView.ScaleType.FIT_XY);
return false;
}
}).apply(new RequestOptions().placeholder(R.drawable.place_holder).dontAnimate())
.into(holder.NewsImage);
You can try this code.
RequestOptions options = new RequestOptions()
.priority(Priority.NORMAL)
.placeholder(R.drawable.placeholderImageName)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.fitCenter()
.error(R.drawable.errorImageName);
Glide.with(mContext)
.load("ImagePath")
.apply(options)
.into(Img_imageView);
I have a JSON file contains images URL, then I display them using Glide intoCardView
Java:
Glide
.with(context)
.load(post.getImgUrl())
.listener(new RequestListener<String, GlideDrawable>() {
#Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
return false;
}
#Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target,
boolean isFromMemoryCache, boolean isFirstResource) {
mProgress.hide();
return false;
}
})
.priority(Priority.HIGH)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(image);
_xml: _
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
card_view:cardPreventCornerOverlap="false"
app:ignore="NamespaceTypo">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
</android.support.v7.widget.CardView>
Now I want to get Width and Height of each Image in JSON, to set it in the ImageView (height, width)
So I already tried this:
int width = resource.getIntrinsicWidth();
int height = resource.getIntrinsicHeight();
But it didn't work for me
I am using Glide loader to load my images. My code is working but it changes images continuously. Here is my code:
Glide.with(ctx).load(image).asBitmap()
.dontTransform()
.placeholder(R.drawable.cart)
.into(new SimpleTarget < Bitmap > () {
#Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
photoImageView.setImageBitmap(resource);
Glide.with(ctx).load(image).into(post_image);
post_image.setImageBitmap(resource);
}
Hey You can use glide utill class for better understanding
public class GlideUtil {
public static void loadImage(String url, ImageView imageView) {
Context context = imageView.getContext();
if(context!=null || (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)) {
assert context != null;
ColorDrawable cd = new ColorDrawable(ContextCompat.getColor(context, R.color.blue_grey_500));
Glide.with(context)
.load(url)
.placeholder(cd)
.crossFade()
.centerCrop()
.into(imageView);
}
}
public static void loadProfileIcon(String url, ImageView imageView) {
Context context = imageView.getContext();
if(context!=null || (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)) {
Glide.with(context)
.load(url)
.placeholder(R.drawable.ic_person_outline_black)
.dontAnimate()
.fitCenter()
.into(imageView);
}
}
#RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public static void loadImage(String url, ImageView mPhotoView, final ProgressBar mProgress) {
Context context = mPhotoView.getContext();
if(context!=null || (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)) {
assert context != null;
ColorDrawable cd = new ColorDrawable(ContextCompat.getColor(context, R.color.blue_grey_500));
mProgress.setEnabled(true);
Glide.with(context)
.load(url)
.listener(new RequestListener<String, GlideDrawable>() {
#Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
mProgress.setVisibility(View.GONE);
return false;
}
#Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
mProgress.setVisibility(View.GONE);
return false;
}
})
.placeholder(cd)
.crossFade()
.centerCrop()
.into(mPhotoView);
}
}
}
Image changing occurs because of lazy loading of images in the glide. When the glide is downloading the new image previous image will be already loaded since you are reusing the view. To prevent this,.Before loading images clear the previous image before loading image.
Glide.clear(post_image);
EDIT:
Also before fetching the image from glide clear the old image of the imageView.
post_image.setImageDrawable(null);
Then load the new image from glide
Glide.with(ctx)
.load(image)
.asBitmap()
.dontTransform()
.placeholder(R.drawable.cart)
.into(new SimpleTarget<Bitmap>() {
#Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
post_image.setImageBitmap(resource);
}
}
I using Glide lib for load photo from url to show on ImageView.But this Photo have multiple size, i want before updating the ImageView then placeholder show with size equal size Image from URL.
Like this:
This is my code:
Glide.with(context)
.load(url)
.override((int) context.getResources().getDimension(R.dimen._180sdp), (int) context.getResources().getDimension(R.dimen._300sdp))
.fitCenter()
.bitmapTransform(new RoundedTransformation(context, (int) context.getResources().getDimension(R.dimen._10sdp)))
.error(defaultImageResId)
.diskCacheStrategy(DiskCacheStrategy.RESULT)
.listener(new RequestListener<String, GlideDrawable>() {
#Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
progressBar.setVisibility(View.INVISIBLE);
return false;
}
#Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
progressBar.setVisibility(View.INVISIBLE);
return false;
}
})
.into(imageView);
How can do it?
You need to get the image dimensions from the server along with URL and use it to resize the place holder image.
Glide
.with(context)
.load(imageUrl)
.override(width, height) // resizes the image to these dimensions (in pixel)
.into(imageViewResize);
I load images using Glide like such:
Glide.with(getContext()).load(apdInfo.url)
.thumbnail(0.5f)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(apd_image);
And wish to save the Bitmap loaded like such:
private void saveImage() {
final ImageView apd_image = (ImageView) view.findViewById(R.id.apd_image);
final InternalFileHandler IFH = new InternalFileHandler(getContext());
apd_image.setDrawingCacheEnabled(true);
apd_image.buildDrawingCache(true);
Bitmap bitmap = apd_image.getDrawingCache();
// Simply saves the bitmap in the filesystem
IFH.savePicture("APD", bitmap, getContext());
apd_image.destroyDrawingCache();
}
The issue is that if I call saveImage before Glide has loaded my picture, it won't work.
How may I wait or Glide to load it? Please note that using Glide's listeners did not work.
EDIT:
I now use the following listeners:
.listener(new RequestListener<String, GlideDrawable>() {
#Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
//handle the exception.
return true;
}
#Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
// onResourceReady is called twice for some reason, this is my work around for now
if (first) {
GlideBitmapDrawable glideBitmapDrawable = (GlideBitmapDrawable) resource;
// Convert to Bitmap
Bitmap bm = glideBitmapDrawable.getBitmap();
saveImage(bm);
first = false;
} else {
first = true;
}
return true;
}
})
Use the listener so that when the image is fetched and ready to be used, you can save it using the saveImage method of yours.
Do this:
Glide.with(getContext()).load(apdInfo.url)
.thumbnail(0.5f)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(new SimpleTarget<GlideDrawable>() {
#Override
public void onResourceReady(GlideDrawable glideDrawable, GlideAnimation<? super GlideDrawable> glideAnimation) {
apd_image.setImageDrawable(glideDrawable);
apd_image.setDrawingCacheEnabled(true);
saveImage();
}});
Call the saveImage method inside onResourceReady() callback and use the GlideDrawable resource. I would suggest using the GlideDrawable rather than getting the image using Drawing Cache.