Android Glide ImageView ScaleType Matrix Centering - android

I'm using Glide 4.0 to load an image into an ImageView with scaleType="matrix" for pan and zoom functionality. The image does not load centered. If it is tall it loads to the left and if it is wide it loads at the top (see pictured). I've tried the various RequestOptions but none will center the image initially. How can I accomplish this? Thanks!
Current Tall or Wide Image Position
Activity
Uri selectedImage = returnedIntent.getData();
RequestOptions options = new RequestOptions().fitCenter();
Glide.with(MyActivity.this).load(selectedImage).apply(options).into(mImage);
Layout
<ImageView
android:id="#+id/m_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="matrix" />

you are overriding the functionality of scaleType attribute by using .apply(options)
only remove it so the request will be
Glide.with(MyActivity.this).load(selectedImage).into(mImage);
you may find this link helpful
https://github.com/wasabeef/glide-transformations/issues/94

Related

ImageView showing grey square instead of image

I've tried several different ways but the imageview still show only a gray square. I'm testing on API 17.
Below are the options I've tried unsuccessfully:
Configured the ImageView in XML to:
fixed width and height; width and height to wrap_content; width to match_parent and height to wrap_content
android: scaleType to "fitXY" and "centerCrop"
android: adjustViewBounds to true | false;
Image loading methods tried:
binding.captcha.setImageBitmap (BitmapFactory.decodeFile (imgFile2.getAbsolutePath ()));
Also tried this answer https://stackoverflow.com/a/35830800/1764042
Tried Glide:
Glide.with(this)
.load (Uri.fromFile (imgFile2))
.skipMemoryCache (true)
.diskCacheStrategy (DiskCacheStrategy.NONE)
.override (150, 150)
.centerCrop ()
.into (binding.captcha);
The option below is the only that displays the image (in background), however I would like to know what could be happening to prevent me from displaying the image using default methods ...
Drawable drawableImage = new BitmapDrawable(BitmapFactory.decodeFile(imgFile2.getAbsolutePath()));
binding.captcha.setBackgroundDrawable(drawableImage);
Notes:
imgFile2 is not empty, it is loaded from SD Card.
imgFile2 is showing if I use it as background so the problem is not with the file.
The problem is not simply solved with a lib, I'm already trying Glide... But if you Know what I need to do to make it work with glide...
The imageView is inside a fragment, if it matters.
Current xml:
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:id="#+id/captcha"/>
For those who are still facing this issue, for me this is caused because of android:tint property of ImageView to which I was setting image into using Glide.
I was displaying a dummy placeholder image with android:tint as a shade of grey while the actual image loads from url. And that tint was causing the problem.
So try removing the android:tint property alltogether or set the tint to null programmatically after loading the image using imageView.setImageTintList(null)
Hope it helps

how to fix stretching image in image view in android when i use fitxy Scale type in android

<ImageView
android:id="#+id/bigimages"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_below="#+id/productTitle"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="40dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/bath_and_body_1" />
Glide.with(this)
.load("https://images-eu.ssl-images-amazon.com/images/I/41ZNY84Q-7L.jpg")
.placeholder(R.drawable.cancel_icon)
.into(bigimages);
https://images-eu.ssl-images-amazon.com/images/I/41ZNY84Q-7L.jpg
this is my code and image URl i have to display full image without streching but i am not able to display its stretched please suggest me how to fix it . below is current image which is stretched
enter image description here
how to fix there is stretching in text yellow....
YOu can try :
android:scaleType="fitXY"
android:adjustViewBounds="true"
Change to
android:scaleType="centerCrop"
or
Glide.with(this)
.load("https://images-eu.ssl-images-amazon.com/images/I/41ZNY84Q-7L.jpg")
.placeholder(R.drawable.cancel_icon)
.centerCrop()
.into(bigimages);
Of the various scaleType options, fitXY is specifically made to stretch the image. It will make sure that the entire image is stretched/shrunk to fit in exactly the space provided.
You probably want centerInside; this will make sure that the entire image fits within the view, and will not distort the aspect ratio. If your view is square and the image is rectangular, centerInside will scale the image down so that it fits inside the view, meaning either the top+bottom or left+right will be empty.
Alter your Glide implementation with:
Glide.with(this)
.load("https://images-eu.ssl-images-amazon.com/images/I/41ZNY84Q-7L.jpg")
.override(width, height) //set width & height as you want
.palceholder(R.drawable.cancel_icon)
.into(bigimages);
References:
Glide Image Resizing & Scaling
Glide Documentation

Displaying an image from within an Android app?

I have filepath which is a String holding the absolute path to an image file.
Is there a way to display the image to the user similar to when they use the Gallery app?
When I looked up solutions to this problem, most of them involved setting an ImageView's bitmap to the bitmap decoded from the file, but I don't want to go this route because the orientations may be different, the size of the picture may not be maximized depending on how it fits within the ImageView, and so on. I basically want to have it displayed full-screen. Or if this can be done with an ImageView I'd be curious to know how.
Is this possible to do?
You can declare an ImageView in your layout that fills the parent
<ImageView
android:layout_gravity="fill"
android:id="#+id/your_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
Then you use the Picasso library to load the image by
1/ Inflating the ImageView
yourImage = (ImageView) view.findViewById(R.id.your_image);
2/ Loading the image to the ImageView like
Picasso.with(context).load(filepath).fit().into(yourImage);
Check http://square.github.io/picasso/
Use the following library: TouchImageView
Usage:
Place TouchImageView.java in your project. It can then be used the same as
ImageView. Example:
TouchImageView img = (TouchImageView) findViewById(R.id.img);
If you are using TouchImageView in xml, then you must provide the full package
name, because it is a custom view. Example:
<com.example.touch.TouchImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Android crop imageview

There is my ImageView
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp" />
I load image to this ImageView using Picasso library.
Picasso.with(getActivity()).load(url)
.config(Bitmap.Config.RGB_565)
.into(imageView);
There is problem that there is padding inside ImageView and loaded image.
There is image to show padding:
I use .fit() method to avoid this gap, but image stretches and quality losts.
(You can see that this dark-blue circles is ovals now)
The question is:
What should I do to avoid loosing quality of image and resize it directly to ImageView. I can't add .centerCrop() because left side of image is logical safe-zone. Also I can't change layout_height="150dp" because it will break all my layout.
Anyway thank you!
Look at your ImageView:
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp" />
You are forcing the image to stretch to the width of its parent view (the screen maybe?). Try using wrap_content for the width and keeping the height the same. This may cause the image to shrink, but its up to your desired UX.
#stefs found that adding this:
...android:adjustViewBounds="true" />
would help. Check out the post here.
If you want static image sizes, you may have to deal with the padding.

Android Picasso resize() not consistent

I am using Picasso to resize my background images on my Android interface.
I am stretching the width of the image to fill the width, but I cannot adjust the height, as the background image needs to line up with the circular image in the middle.
Problem is that on different devices, the height appears to adjust as the background is not positioned consistently. I would post an example but I can't as I dont have 10 reputation yet.
Here is my java
ImageView imgBackground = (ImageView) v.findViewById(R.id.imgBackground);
aParent = (MainActivity) getActivity();
//Picasso.with(getActivity()).load(R.drawable.morn_blur_bg).fetch();
Picasso.with(aParent.getApplicationContext())
.load(R.drawable.morn_blur_bg)
.resize(aParent.getBackgroundWidth(), aParent.getBackgroundHeight())
.into(imgBackground);
And this is my XML
<ImageView
android:id="#+id/imgBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_alignParentTop="true" />
Any help is greatly appreciated.
It turns out that the imageview was stretching the image after picasso did its thing.
I tried to set the imageview height, but the OS overrode me.
In the end I set imageView.scaletype="matrix", and now it does not stretch my image.
hope that helps someone else, i've spent a lot of time on this.
In my case, I put android:scaleType="centerCrop" on my ImageView and then no need to apply centerCrop() through Picasso.

Categories

Resources