Develop Reference

Can't resize picture in CircleImageView

I have this XML:
<de.hdodenhof.circleimageview.CircleImageView
android:src="#drawable/ic_kitty_superhero"
android:id="#+id/userAvatar"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center"
android:layout_marginBottom="16dp"
app:civ_border_color="#android:color/white" // just to show you wrong result
app:civ_border_width="1dp" />
and this extension function to load image:
fun ImageView.loadImage(context: Context, url: String) {
val resourceID = context.resources.getIdentifier(url, "drawable", context.packageName)
if (resourceID != 0) { // if it's an image from drawable folder
Glide.with(context)
.load(resourceID)
.fitCenter()
.into(this)
} else {
Picasso.with(context)
.load(url)
.fit()
.centerInside()
.into(this)
}
}
Since Picasso doesn't know how to work with resourceID, I need to use Glide or something similar like this.setImageResource(). But it's cannot execute transformation that I want.
In the first photo, everything looks the way I want, but it’s just used ImageView container.
In the second photo I use CircleImageView container and it no longer looks the way I would like - the ears are cropped in the photo.
Please, can you help me, how can I get the correct result?
NOTE: I can't use .load(R.drawable.icon) and I can't use the ImageView container (I can probably if make it circle somehow)

I solved my problem by using ImageView container and Circle Transformation for Picasso

Load GIF as background in linear layout through Glide

I have to set a GIF image as background in a linear layout. I am using below code
final LinearLayout layoutMain = (LinearLayout) findViewById(R.id.main_layout);
Glide.with(this).load(R.raw.game_screen_background)
.into(new SimpleTarget<Drawable>() {
#Override
public void onResourceReady(Drawable resource, Transition<? super Drawable> transition) {
layoutMain.setBackground(resource);
}
});
But its not setting GIF as background. GIF is in raw folder and I am using below glide dependency
implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
Why is the GIF not loading? Am I missing something?

I think final may be cause the problem. You may remove it and try like this way. and You are missing like asGif().
You can load an image in a LinearLayout like this. I'm just showing you the hard part which is setting an image to the background.
For Glide version before 4.X
If the source you provide is not a Gif, and maybe just a regular image, there is no way of registering that issue. Glide accepts Gifs or images as the load() parameter. If you, the developer, expect that the URL is a Gif, which is not the case, Glide can't automatically detect that. Thus, they introduced an additional method to force Glide into expecting a Gif asGif() and you can call asBitmap() to guarantee the display as a regular image.
As per this document https://futurestud.io/tutorials/glide-displaying-gifs-and-videos
Like :
For Glide version before 4.X
LinearLayout layoutMain = (LinearLayout) findViewById(R.id.main_layout);
Glide.with(this).load(R.raw.game_screen_background)
.asGif()
.into(new SimpleTarget<Drawable>() {
#Override
public void onResourceReady(Drawable resource, Transition<? super Drawable> transition) {
layoutMain.setBackground(resource);
}
});
Update for Gide v4 onward:
LinearLayout layoutMain = (LinearLayout) findViewById(R.id.main_layout);
GlideApp.with(this).load(R.drawable.backgroundimage).into(new SimpleTarget<Drawable>() {
#Override
public void onResourceReady(Drawable resource, Transition<? super Drawable> transition) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
layoutMain.setBackground(resource);
}
}
});

How to load Image into ImageView from Url using Glide v4.0.0RC1

I just updated Glide library from v3 to v4 in my application.
But Now I am not able to load image from the url. Previously it was working fine with v3.
Here is my Glide code:
Glide.with(context).load(galleryList.get(itemPosition).getImage()).thumbnail(Glide.with(context).load(R.drawable.balls)).apply(options).into(holder.kolamImage);
What is the change in v4? I went through the document but still no help.

If you are using Glide v4.0.0-RC1 then you need to use RequestOptions to add the placeholder, error image and other option. Here is an working example
RequestOptions options = new RequestOptions()
.centerCrop()
.placeholder(R.mipmap.ic_launcher_round)
.error(R.mipmap.ic_launcher_round);
Glide.with(this).load(image_url).apply(options).into(imageView);

Glide.with(this)
.load("url here") // image url
.placeholder(R.drawable.placeholder) // any placeholder to load at start
.error(R.drawable.imagenotfound) // any image in case of error
.override(200, 200) // resizing
.centerCrop()
.into(imageView); // imageview object

Glide v4 added a feature of RequestOptions to add placeholder ,error image and to customize image.
RequestOptions options = new RequestOptions()
.placeholder(R.drawable.your_placeholder_image)
.error(R.drawable.your_error_image);
Glide.with(this).load(image_url).apply(options).into(imageView);

Below Steps is for load image into imageView from URL :-
create a new Activity like this and load image from given url.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/myOfferImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
ImageView myOfferImageView;
String url = "";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
url = "https://image.url"
myOfferImageView = findViewById(R.id.myOfferImage);
Glide.with(this).load(url)
.placeholder(R.drawable.ic_launcher_background)
.error(R.drawable.ic_launcher_background)
.into(myOfferImageView);
}
}

Make sure you have quotes around your url, with ivProfileImage being your imageview.
Glide.with(mContext)
.asBitmap()
.load("https://i2.wp.com/www.siasat.com/wp-content/uploads/2018/03/Rosamund-Pike.jpeg?fit=600%2C421&ssl=1")
.into(ivProfileImage);

Using CircledImageView in android wear

I am using the CircledImageView to display the image in the ListView, but I am not getting the image view as circular. Can anyone tell me how to achieve this?

ok got it woking by setting the height and width as wrap content and also providig the radius of the cirlce.
Here is the code working for me.
<android.support.wearable.view.CircledImageView
android:id="#+id/im_action_icons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:circle_border_color="#FFFFFFFF"
app:circle_border_width="2dp"
app:circle_color="#color/blue"
app:circle_radius="23dp" />

Try this short code it works for me:
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(Activity.this.getResources(), yourbitmap);
roundedBitmapDrawable.setCircular(true);
your imageview.setImageDrawable(roundedBitmapDrawable);
If you use Glide library to download images you can do something like this.
Glide.with(context).load(your image url).asBitmap().placeholder(your default place holder).error(error place holder).into(new BitmapImageViewTarget(your imageview) {
#Override
protected void setResource(Bitmap resource) {
super.setResource(resource);
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(Activity.this.getResources(), resource);
roundedBitmapDrawable.setCircular(true);
your imageview.setImageDrawable(roundedBitmapDrawable);
}
});
You can also do these thing with Picasso library

Android: Glide not showing large image from URL

I'm trying to load a large hi-res (3225x4800) image from URL into glide for a newspaper company. The image I wanted to load is this High Res Image.
String url = "http://www.businessweekmindanao.com/content/wp-content/uploads/2015/10/fitness-and-wellness-poster-final.jpg";
Glide.with(getActivity()).load(url).asBitmap().into(new SimpleTarget<Bitmap>() {
#Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
imageView.setImageBitmap(resource);
}
});
I'm using Mike Ortiz' TouchImageView from the solution offered here: https://github.com/MikeOrtiz/TouchImageView/issues/135 when loading resource from url. But it seems to only work on small resolution image and it does not load high quality image.
There is an alternative solution I tried from stackoverflow: Android: not displayed ImageView with UIL and TouchImageView which tries to modify the onMeasure() method of Mike's library. It works with:
Glide.with(getActivity()).load(url)
.into(imageViewPreview);
The problem is it loads the image in very low resolution.
Is there a way to load high resolution image like: 7480x3740 for instance using Glide and TouchImageView? How do I do that?

I have found a solution that worked for my requirement. The override() method does the trick. Setting higher numbers for the target resolution seems to be the final workaround, but the bigger the numbers, the longer the time it would take to display the image(s), so it would be wise to implement a preloader/progressbar.
Glide.with(getContext())
.asBitMap() //[for new glide versions]
.load(url)
//.asBitmap()[for older glide versions]
//.placeholder(R.drawable.default_placeholder)
.override(1600, 1600) // Can be 2000, 2000
.into(new BitmapImageViewTarget(imageViewPreview) {
#Override
public void onResourceReady(Bitmap drawable, GlideAnimation anim) {
super.onResourceReady(drawable, anim);
progressBar.setVisibility(View.GONE);
}
});
Custom centered preloader/progressbar placeholder indicator on relativeLayout xml:
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
This is neat because another issue related about loading image asBitmap() in Glide will not show placeholders for error and preloader/progress indicator:
Glide.with(getActivity())
.load(url).asBitmap()
.placeholder() //<== will simply not work:
.error() // <== is also useless
.into(new SimpleTarget<Bitmap>() {
#Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
imageView.setImageBitmap(resource);
}
});
In my research, I have also tried a Picasso solution to handle high quality image:
Picasso.with(getContext())
.load(url)
.resize(1500, 0)
.placeholder(R.drawable.default_placeholder)
.error(R.drawable.download_error)
.into(imageViewPreview);
In the end, I was happy with the Glide version.
I hope this will be helpful to anyone that might be facing the same challenge.

I had issue while loading image from url into TouchImageView using Glide. It would show a black screen.
I found a fix which works like this. Pass width and height in Glide override method and after setting bitmap call setZoom of TouchImageView with value 1.
Here is the complete code:
Glide.with('context')
.asBitmap()
.load('url')
.apply(new RequestOptions().override(1600, 1600)) //This is important
.into(new BitmapImageViewTarget('imageview') {
#Override
public void onResourceReady(#NonNull Bitmap resource, #Nullable Transition<? super Bitmap> transition) {
super.onResourceReady(resource, transition);
'imageview'.setImageBitmap(resource);
'imageview'.setZoom(1); //This is important
}
});

Add android:usesCleartextTraffic="true"
Glide will start loading images in android 10

I have same issue and it is due to large image size. resolved it by following way:
Glide
.with(imageView.context)
.load(url)
.placeholder(R.drawable.placeholder)
.apply(RequestOptions().transform(CenterCrop(), RoundedCorners(if (applyCorner) 32 else 1)))
.into(object : CustomTarget<Drawable>(200, 200) {
override fun onLoadCleared(placeholder: Drawable?) {
// called when imageView is cleared. If you are referencing the bitmap
// somewhere else too other than this imageView clear it here
}
override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
imageView.setImageDrawable(resource)
}