I am implementing something called InApp messages, now I am trying to fit ImageView to image size after resizing.
This is my imageView:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="40dp"
android:padding="6dp">
--other components--
<ImageView
android:id="#+id/middleLayoutImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border"
android:padding="5dp"
app:layout_constraintBottom_toTopOf="#+id/middleLayoutText"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topWrapper"
app:layout_constraintVertical_chainStyle="packed" />
--other components--
</android.support.constraint.ConstraintLayout>
To download img and put into this view I am using Picasso:
Picasso.with(getApplicationContext())
.load(inputurl)
.into(imageView);
Now my activity looks like this:
Before fitting
Now I want to resize it with aspect ratio to width of the parent Layout. I've tried a lot od combinations with no success:
android:scaleType="fitXY" - stretched img
picasso fit().centerCrop() - centerCrop
picasso fit().centerInside() - centerInside
and more combination with android:adjustViewBounds scaleTypes etc.
I want to achieve something like this: Resized correctly - in this case, I've used picasso: .resize(2000,500).centerInside() - but it will work only in this case.. How to do it automatically ?
Thanks in advance for help:)
edit:
ImageView imageView = (ImageView) findViewById(R.id.middleLayoutImage);
String inputurl = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQtqf1EUqH4eQNNqYFbSawpiR5bypfOhvlatgS0mC3Ve1nk2adbw"; //http://www.gatesms.eu/img/android.png";
Picasso.with(getApplicationContext())
.load(inputurl)
.resize(2000,500)
.centerInside()
.into(imageView);
For Picasso to fit your Image correctly you should know the size of your Image. But for this case You do not know the size of the Image then for good UI design you should have a placeholder (An image to show while Picasso is loading another) keep that image in your drawable folder lets call it placeholder and set it as a src or alternatively using Picasso itself like this:
Picasso.with(getActivity())
.load(imageUrl)
.placeholder(R.drawable.placeholder)
.error(R.drawable.error)
.resize(screenWidth, imageHeight)
.fit()
.centerCrop()
.into(imageView);
Now what?
Now because you have another Image in the imageView Picasso now knows the height and width so that It can fit your Image well. But if you do not provide any image then the results are very small images or improperly stretched ones. I have also added an optional error image that will be displaced if Picasso fails to make the request like my be No network Connection you can omit it if you want.
Do not forget the android:adjustViewBounds in XML too.
Related
I am working with an application in which I have more work with images. I want to show profile pictures and Article images in my app. For article images I have tried scale type of ImageView to "fitcenter or centercrop or fitxy" but nothing works fine. My image pixel's are distorted. I am using Glide library to show image on sever. I have even tried .fitcenter() etc. Glide methods but nothing works so that my image work fine with ImageView.
Code:
<ImageView
android:id="#+id/imgArticle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/blank_image" />
Glide Code:
Glide.with(context).load(articleList.get("article_image"))
.thumbnail(0.5f)
.placeholder(context.getResources().getDrawable(R.drawable.blank_image))
.fitCenter()
.into(imgBanner);
I have tried various methods i.e. fitcenter, centercrop etc. but nothing works.
android:scaleType="fitXY" will stretch your image. You can try this code so that image will not stretch.
<ImageView
android:id="#+id/imgArticle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/blank_image" />
Or you can adjust the height and width as per your UI
<ImageView
android:id="#+id/imgArticle"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/blank_image" />
<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
Currently I am using Picasso to load image stored on Firebase. The problem is that when I am fetching the image, initially CardView has very small size and then when image is fetched it goes to bigger size as shown below.
Is there any way to prefetch image dimensions and hence cardview does not change size before and after loading.
You can use a placeholder image by using the .placeholder(R.drawable.image_name)
in XML
......
......
......
<ImageView
android:id="#+id/partner_post_image"
android:layout_width="match_parent"
android:layout_height="90dp"
android:scaleType="fitXY"
android:layout_margin="8dp" />
......
......
......
Like this
Picasso.with(context)
.load(imageURL)
.error(android.R.drawable.error_image)
.placeholder(R.drawable.ic_default)
.fit()
.centerCrop()
.into(postImage);
Hey everyone I have been running into an issue with Picasso. I am trying to load an image from sound cloud but it keeps appearing stretched or very small. Here is my XML
<ImageView
android:id="#+id/album_cover_art"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/fragment_content_item_top_margin"
android:scaleType="centerInside"
android:contentDescription="#string/content_description_image_placeholder"
android:src="#drawable/placeholder" />
I tried to use picasso's resize and center inside but the image appears small.
Picasso.with(getContext()).load(mSelectedTrack.getArtworkURL()).resize(800,300).centerInside().into(mAlbumCoverArt);
Using picasso's resize and center crop maintains the image view size but leads to the image appearing stretched.
Picasso.with(getContext()).load(mSelectedTrack.getArtworkURL()).resize(800,300).centerCrop().into(mAlbumCoverArt);
Any ideas on a way to do this that is easier than writing a function to resize it myself ?
I avoided image stretching using :
.resize(800,0)
Passing 0 as second parameter it preserved the image proportions.
Hope it helps
try this:
for your imageview:
<ImageView
android:id="#id/img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true" //add this
android:scaleType="fitCenter" />
And in picasso use .fit().centerCrop()
Picasso.with(getContext()).load(mSelectedTrack.getArtworkURL()).resize(800,300).fit().centerCrop().into(mAlbumCoverArt);
Try setting height or width to fixed and other to wrap content and load Picasso with .fitXY and don't use . resize.
Give a try to Glide.
https://github.com/bumptech/glide
Glide.with(this)
.load(imageUrl)
.centerCrop()
.override(300, 300)
.into(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.