Display image from URL in Android Recyclerview Imageview with Glide - android

I am trying to display images from url addresses in a RecyclerView ImageView, But only [this url][1] and [this url][2] image is being displayed. When I change url to other image urls, no images is diplaying, but only white background in the shape of the image comes out.
#Override
public void onBindViewHolder(CategoryGridAdapter.ViewHolder holder, final int position) {
final CategoryGridModel categoryGridModel = categoryGridModels.get(position);
holder.textView.setText(categoryGridModel.getDescription ());
holder.frameLayout.setBackgroundColor (Color.parseColor (categoryGridModel.getColor ()));
Glide.with(holder.imageView)
//.load("https://www.sarahmcculloch.com/wp-content/uploads/2015/06/flat-duolingo.png") //Image not showing with this URL
.load("https://lh6.ggpht.com/9SZhHdv4URtBzRmXpnWxZcYhkgTQurFuuQ8OR7WZ3R7fyTmha77dYkVvcuqMu3DLvMQ=w300") //Image showing properly
.apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.RESOURCE)
.error(R.drawable.ic_icon_volleyball))
.into(holder.imageView);
holder.imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(context, categoryGridModel.getImageUrl (), Toast.LENGTH_SHORT).show();
}
});
}

Related

RecyclerView doesn't mantain changes

I'm creating an application for Android, and in this moment i want just create a selectable list using a RecyclerView, for this, when a user clicks on an item, I put its id in an array and I change its icon.
The problem is that, when I scroll down and then I scroll up again or when I change fragment, the array still contains all the id of the items, but the icons comes back as before, they don't mantain the new image that I set.
This is the onBindViewHolder metod, this method is the only in the whole project which change the imageview :
List<Integer> selected = new LinkedList<>();
#Override
public void onBindViewHolder(final ViewHolder holder, int position) {
holder.mBoundString = mValues.get(position);
holder.mTextView.setText(mValues.get(position));
final int pos = position;
holder.mView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
final Context context = v.getContext();
Animation to_middle = AnimationUtils.loadAnimation(v.getContext(), R.anim.to_middle);
final Animation from_middle = AnimationUtils.loadAnimation(v.getContext(), R.anim.from_middle);
to_middle.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
holder.mImageView.setImageResource(R.drawable.ic_action_navigation_check);
holder.mImageView.clearAnimation();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
holder.mImageView.setAnimation(to_middle);
holder.mImageView.startAnimation(to_middle);
selected.add(pos);
}
});
if(!selected.contains(position)) {
/* I checked and this method it's not called when
an item is selected, so the following instruction
isn't the cause of my problem, anyway the image
comes back as before */
Glide.with(holder.mImageView.getContext())
.load(R.drawable.ic_default)
.fitCenter()
.into(holder.mImageView);
}
}
I'm sure that R.drawable.ic_default isn't used elsewhere, so which method is changing the image?
Thank you
if(selected.contains(position)) { // Check if already selected
Glide.with(holder.mImageView.getContext())
.load(R.drawable.ic_action_navigation_check) // set selected drawable here.
.fitCenter()
.into(holder.mImageView);
}
You are checking that "if not selected set image to default" but you need to check "if selected set image to selected image".

ImageView zooms on first tap

I am using a library to zoom in and out within a ImageView. I am using PhotoAttacher. When I click on the ImageView then first the ImageView loads in a fullscreen (within a dialog), and that is fine. But during loading in fullscreen mode the zoom function already takes place. How can I avoid zooming when I click first on ImageView. Here the code:
image.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
final Dialog nagDialog = new Dialog(DetailView.this,
android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
nagDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
nagDialog.setCancelable(false);
nagDialog.setContentView(R.layout.preview_image);
Button btnClose = (Button) nagDialog
.findViewById(R.id.btnIvClose);
ivPreview = (ImageView) nagDialog
.findViewById(R.id.iv_preview_image);
// Loading image from url in ImageView
Picasso.with(getApplicationContext()).load(path)
.placeholder(R.drawable.loading).into(ivPreview);
// Here definition of zoom function
PhotoViewAttacher mAttacher = new PhotoViewAttacher(ivPreview);
mAttacher.canZoom();
btnClose.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
nagDialog.dismiss();
}
});
nagDialog.show();
}
});
The weird thing is, when I close the preview and click again on the imageview then it does not zoom in first.
You could implement the PhotoViewAttacher after they image is loaded successfully.
You add a callback to know if the request is successfully done.
Sample code:
Picasso.with(getApplicationContext()).load(path)
.placeholder(R.drawable.loading).into(ivPreview, new Callback(){
#Override
public void onSuccess()
{
Log.d("Test picasso", "image loaded");
PhotoViewAttacher mAttacher = new PhotoViewAttacher(ivPreview);
mAttacher.canZoom();
}
#Override
public void onError()
{
Log.d("Test picasso", "image error");
}
});
Be aware, the Callback param is a strong reference and will prevent your Activity or Fragment from being garbage collected. So you should invoke an adjacent Picasso.cancelRequest(android.widget.ImageView) call to prevent temporary leaking.

How to identified which image is clicked in imageview

ImageView imageAd =(ImageView) findViewById(R.id.HomeimageViewAd);
ad4 and ad5 are changing on regular interval in imageAd (i.e imageview) and i want to find which image is click
//Image resource in an array
private int[] imageArray = {
R.drawable.ad4,
R.drawable.ad5
};
Bitmap bmp= BitmapFactory.decodeResource(getResources(),imageArray[i]);
imageAd.setImageBitmap(bmp);
imageAd.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// here i want to identified which image is clicked
} } );
Set id to imageviews like this
imageView.setId(imageArray[i]);
Then check with id.
The entire code will be like as follows
Bitmap bmp= BitmapFactory.decodeResource(getResources(),imageArray[i]);
imageAd.setImageBitmap(bmp);
imageAd.setId(imageArray[i]);
imageAd.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
if(v.getId()==R.drawable.ad4){
}
} } );

Need to Disable the setOnClickListener while the ImageView is loading in background

I am loading ImageView using the below code from URL
int resID = getResources().getIdentifier(name, "drawable", this.getPackageName());
chat_home.setImageResource(resID);
while I refresh the page, ImageView (i.e chat_home) is disappear for several second during that time I have to discard the chat_home.setOnClickListener. Once the ImageView is displayed in the screen, then I want to enable the chat_home.setOnClickListener.
chat_home.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
if(checkInternetConnection())
{
Intent intent = new Intent(ActivityOne.this, ActivityTwo.class);
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK);
//intent.putExtra(MainActivity.check, result);
startActivity(intent);
}
else
{
// my toast
}
});
So my question is how to check whether the imageview is filled or empty in the screen.
I'm guessing the "loading" part is when you're calling
chat_home.setImageResource(resID);
Just create a flag that is false until this method executes (so set it to true immediately after this statement).
Then, in your onClickListener,
#Override
public void onClick(View v) {
if(flag) {
// execute code
} else {
// do nothing
}
}
Use Universal image loader. in that there is several methods are as under.
// Load image, decode it to Bitmap and display Bitmap in ImageView (or any other view
// which implements ImageAware interface)
imageLoader.displayImage(imageUri, imageView, displayOptions, new ImageLoadingListener() {
#Override
public void onLoadingStarted(String imageUri, View view) {
...
//here you can set
view.setEnable(false)
}
#Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
...
}
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
//here you can set
view.setEnable(true);
}
#Override
public void onLoadingCancelled(String imageUri, View view) {
...
}
}, new ImageLoadingProgressListener() {
#Override
public void onProgressUpdate(String imageUri, View view, int current, int total) {
...
}
});
For loading image you need use one of the method.
String imageUri = "assets://image.png"; // from assets
String imageUri = "drawable://" + R.drawable.image; // from drawables (only images, non-9patch)
Note:
To use universal image loader library you have to configure first.for that all instruction given in below link.
Universal-image-loader

Android Maps Utility: images from URL

I am using the excellent Android Maps Utility library to display on the map custom markers withs clusters. It works great and it is very easy to customize.
My problem is how to change local resources from the demo (R.drawable.image_demo) to images from a URL. I'm using Universal Image Loader to load this images on the imageView async, but the problems is that the images are not loaded on the marker that corresponds.
Anyone know about any example?
This is the code where the image is downloaded and loaded inside the DefaultClusterRender class. Thanks in advance.
#Override
protected void onBeforeClusterItemRendered(MapFoto mapFoto, MarkerOptions markerOptions) {
// Draw a single person.
// Set the info window to show their name.
// mImageView.setImageResource(R.drawable.barcelona);
// mImageView.setScaleType(ScaleType.CENTER_CROP);
Log.d("", "--- url: " + mapFoto.getPictureUrl());
ImageLoader.getInstance().displayImage(mapFoto.getPictureUrl(), mImageView, BlipointApp.optionsAvatarImage, new ImageLoadingListener() {
#Override
public void onLoadingStarted(String imageUri, View view) {
}
#Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
}
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
mImageView.setImageBitmap(loadedImage);
mImageView.setScaleType(ScaleType.CENTER_CROP);
}
#Override
public void onLoadingCancelled(String imageUri, View view) {
}
});
Bitmap icon = mIconGenerator.makeIcon();
markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)).title(mapFoto.getName());
}
I had a similar problem using the UIL, not all images were loaded. Every time I ran the map activity and zoomed into the clusters there were different markers/clusters that had no image. Only the standard marker/cluster icons were shown.
Finally after two days of trying and trying it works fine. Temporarily I had switched to the Picasso library to see if it might work but I experienced similar problems there and couldn't get it done. Besides with Picasso all the images loaded from the web (URL) were rotated by 90 degrees. I couldn't figure out why. According to some posts that I found in the web it might have to do something with the device, I am using Samsung Galaxy S5 device for testing. But not sure....
Here some notes how I did it: I created a HardRefSimpleImageLoadingListener with an ImageView which will exist until UIL loading process is finished. Without its hard reference ImageView the onLoadingCancelled would get called and loading would not complete. I also created the objects ClusterMarkerTarget and ClusterItemMarkerTarget which contain a Marker, ImageView, and bitmap for the Icon generators. I also put them into HashSets myClusterItemMarkerTargets and myClusterMarkerTargets to keep them from getting garbagecollected.
Maybe it can be of use for somebody.
Here some code:
#Override
protected void onClusterItemRendered(ReportItem clusterItem, Marker marker) {
final ClusterItemMarkerTarget pm_ClusterItem = new ClusterItemMarkerTarget(marker);
myClusterItemMarkerTargets.add(pm_ClusterItem);
HardRefSimpleImageLoadingListener loadingListener = new HardRefSimpleImageLoadingListener() {
#Override
public void onLoadingFailed(String s, View view, FailReason failReason) {
myClusterItemMarkerTargets.remove(pm_ClusterItem);
}
#Override
public void onLoadingComplete(String s, View view, Bitmap bitmap) {
mClusterItemImageView.setImageBitmap(bitmap);
pm_ClusterItem.myIcon_cluster = mClusterItemIconGenerator.makeIcon();
pm_ClusterItem.mMarker.setIcon(BitmapDescriptorFactory.fromBitmap(pm_ClusterItem.myIcon_cluster));
myClusterItemMarkerTargets.remove(pm_ClusterItem);
}
#Override
public void onLoadingCancelled(String s, View view) {
myClusterItemMarkerTargets.remove(pm_ClusterItem);
}
};
ImageLoader.getInstance().displayImage(clusterItem.picPath, pm_ClusterItem.myClusterItemImageView , loadingListener );
}
#Override
protected void onClusterRendered(Cluster<ReportItem> cluster, Marker marker) {
int i=0;
clustersize = cluster.getSize();
final ClusterMarkerTarget pm_Cluster = new ClusterMarkerTarget(marker, cluster);
myClusterMarkerTargets.add(pm_Cluster);
for (ReportItem r : cluster.getItems()) {
// Draw 1 at most.
if (i == 1 ) {
break;
}
HardRefSimpleImageLoadingListener loadingListener = new HardRefSimpleImageLoadingListener() {
#Override
public void onLoadingFailed(String s, View view, FailReason failReason) {
myClusterMarkerTargets.remove(pm_Cluster);
}
#Override
public void onLoadingComplete(String s, View view, Bitmap bitmap) {
mClusterImageView.setImageBitmap(bitmap); // = (ImageView) view; //pm.myClusterImageView;
pm_Cluster.myIcon_clusterItem = mClusterIconGenerator.makeIcon(String.valueOf(clustersize));
pm_Cluster.myMarker.setIcon(BitmapDescriptorFactory.fromBitmap(pm_Cluster.myIcon_clusterItem));
myClusterMarkerTargets.remove(pm_Cluster);
}
#Override
public void onLoadingCancelled(String s, View view) {
myClusterMarkerTargets.remove(pm_Cluster);
}
};
ImageLoader.getInstance().displayImage(r.picPath, pm_Cluster.myClusterImageView, loadingListener);
i++;
}
}
more:
//Set for holding a reference to marker targets --> targets won't get carbage collected during looping and loading images
Set<ReportRenderer.ClusterItemMarkerTarget> myClusterItemMarkerTargets = new HashSet<>();
Set<ReportRenderer.ClusterMarkerTarget> myClusterMarkerTargets = new HashSet<>();
more:
public ReportRenderer(ClusterManager<ReportItem> mClusterManager, GoogleMap map) {
super(MyApplication.getContext(), map, mClusterManager);
mDimension = (int) MyApplication.getContext().getResources().getDimension(R.dimen.custom_report_image);
mPadding = (int) MyApplication.getContext().getResources().getDimension(R.dimen.custom_report_padding);
// initialize cluster icon generator
View multiReport = inflater.inflate(R.layout.multi_report, null);
mClusterImageView = (ImageView) multiReport.findViewById(R.id.image_report);
mClusterIconGenerator = new IconGenerator(MyApplication.getContext());
mClusterIconGenerator.setContentView(multiReport);
// initialize cluster item icon generator
mClusterItemImageView = new ImageView(MyApplication.getContext());
mClusterItemImageView.setLayoutParams(new ViewGroup.LayoutParams(mDimension, mDimension));
mClusterItemImageView.setPadding(mPadding, mPadding, mPadding, mPadding);
mClusterItemIconGenerator = new IconGenerator(MyApplication.getContext());
mClusterItemIconGenerator.setContentView(mClusterItemImageView);
// initialize image loader
options = new DisplayImageOptions.Builder()
.showImageOnLoading(R.drawable.loading)
.showImageForEmptyUri(R.drawable.warning)
.showImageOnFail(R.drawable.fail)
.cacheInMemory(true)
.cacheOnDisk(true)
.considerExifParams(true)
//.bitmapConfig(Bitmap.Config.RGB_565)
.build();
config = new ImageLoaderConfiguration.Builder(MyApplication.getContext())
.defaultDisplayImageOptions(options)
.build();
ImageLoader.getInstance().init(config);
}
more:
//cluster marker with image loaded by Ultimate Image Loader
class ClusterMarkerTarget {
Marker myMarker;
ImageView myClusterImageView;
public ClusterMarkerTarget(Marker marker, Cluster<ReportItem> cluster) {
myMarker = marker;
View multiReport = inflater.inflate(R.layout.multi_report, null);
myClusterImageView = (ImageView) multiReport.findViewById(R.id.image_report);
}
}
//cluster item marker with image loaded by Ultimate Image Loader
class ClusterItemMarkerTarget {
Marker mMarker;
ImageView myClusterItemImageView;
public ClusterItemMarkerTarget(Marker marker) {
mMarker = marker;
myClusterItemImageView = new ImageView(MyApplication.getContext());//mClusterItemImageView;
myClusterItemImageView.setLayoutParams(new ViewGroup.LayoutParams(mDimension, mDimension));
int padding = (int) MyApplication.getContext().getResources().getDimension(R.dimen.custom_report_padding);
myClusterItemImageView.setPadding(padding, padding, padding, padding);
}
}
and finally:
class HardRefSimpleImageLoadingListener extends SimpleImageLoadingListener {
public ImageView mView;
#Override
public void onLoadingStarted(String imageUri, View view) {
mView = (ImageView) view;
}
}

Categories

Resources