I spent all day for this issue :(
In my Android application, I download the images with different size from the server. For example, Image A has 500x330 size, Image B has 500x700 size and so on. I also added some text below the images. I am using a placeholder image with 500x400 size.
I can load the images and show placeholder by using Glide:
XML:
<android.support.v7.widget.AppCompatImageView
android:id="#+id/myImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
Kotlin:
GlideApp.with(myImage.context)
.load(url)
.skipMemoryCache(false)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(myImage)
Issue:
While the image is loading, the placeholder is shown with 400 height. When finish loading, users will see changes height from 400 to 700 for example. Then users also see that the text below the images are jumping up or down depend on the image size:(
Question:
How can I scale or keep the placeholder the same size with every loading images which I want to show on the UI. So that the UI does not change after loading?
Notes: I don't want to hard code the height of my images static like this layout_height="100dp". They should be kept the same size and radio as they are.
If Glide cannot do that. Do you guys have any other suggestions?
Thank you so much.
Don't know if this issue is still active. I hope it will help you if you set fitCenter() to Glide. This will fit the image into the placeholder and not change the dimensions. Buuut....you will see that there will be some white space if the photo doesn't have the exact aspect ratio as the placeholder image.
If it's not working as you want, you can try also to override the width and the height of the whole imageView by setting the width and the height of the placeholder image.
.override(w, h) // set exact size
.fitCenter() // keep memory usage low by fitting into (w x h) [optional]
where
w = placeholderDrawable width
h = placeholderDrawable height
I really hope this helps.
More details here
Related
I need to load some images from URI to Bitmap variables and perform some operation with them togheter. I need the bitmaps to be squared images with fixes size, scaled down and cropped. By now I use this code:
return Picasso.with(c).load(imageUri).resize(size, size).get();
but, obviously, the image will be resized without keep its aspect ratio.
I want to resize the image with these requirements:
the smaller dimension (width or height) should be equals to size
the greater dimension should be cropped to size, keep image centered
The key is using centerInside after resize. See link
Picasso.with(c).load(imageUri).resize(size, size).centerInside().get()
set your imageview height and width fix inside xml and then set image to imageview like
Picasso.with(YourActivityName.this)
.load(imageUri)
.into(imageview_id);
I am going to show some images, but my constraint is as title. I want to make all images have same height but according to their width they must have different width. I just do not want to lose any part of the image when scaling. here is my code:
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/ImageView_IssueFirstLookActivity_magas"
android:layout_width="wrap_content"
android:layout_height="170dp"
android:layout_marginLeft="32dip"
android:layout_weight="2"
android:maxWidth="40dp"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
I tried all I could with different values of android:scaleType but get nowhere.
here is a figure that what I want but when I play with those properties it dose not scale it as I want for example some time it dose not show image width completely and it crops it badly. Another try for example is android:scaleType="fitStart" which cause the width of my images to be fine but the heights are not fit anymore. Any idea?
andriod ImageView attributes does not support the requirement you said just by statically choosing combination of width,height and saleType in the layout xml.
Instead you can do it in the java code by actually finding the width for the image for a given fixed height and setting them programattically to each view in dp(make sure you do the pixel to dp calculation for achieving right output, salable across devices)
If you don't mind an extra dependency, you can do it with Picasso
Picasso.get()
.load(R.drawable.my_image_resource)
.placeholder(R.drawable.ic_image_placeholder)
.error(R.drawable.ic_broken_image)
.resize(0, (int) imagefixedHeight)
// optional:
// .centerInside()
.into(myImageView);
I have a background image in body.
What I want to achieve is that:
1) - Calculate the visitor screen resolution.
2) - based on that resolution I want to resize my background image.
I know get the screen resolution as a
Display display = getWindowManager().getDefaultDisplay();
width_screen = display.getWidth();
height_screen = display.getHeight();
But I don't know how to resize the images according screen resolution of user.
Can anyone help?
Thanks..
Put a ImageView in your layout file and set
android:layout_width="match_parent"
android:layout_height="match_parent"
If you want to keep the aspect use:
android:scaleType="centerInside"
If you dont care about the aspect ratio use:
android:scaleType="fitXY"
you may have to write a custom view to do this. Overide onDraw method in it to copy your bitmap as many times as needed.
In my code I want to set a default image for my imageview. All my images are of 174px X 174px. So, I want the default image to be same size. This is my xml for image view
//....code
<ImageView
android:id="#+id/ivCover"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="Default Image"
android:src="#drawable/default_cover" />
//....some other code
Now, my default_cover.jpg is also 174px X 174px. But it shows a smaller image. I've tried all
android:scaleType="centerInside"
android:scaleType="center"
android:scaleType="matrix"
even when most of them were senseless for me but still I tried all of 'em & none of them works. Then I specified the height & width of image by specifying
android:layout_width="174px"
android:layout_height="174px"
(I know using dp is better than px but because this image size is fixed & I was just testing it). So it shows
[default image]
while when loaded from an external url using
Bitmap bitmap = BitmapFactory.decodeStream((InputStream) new URL(url_source_for_image).getContent());
ivCover.setImageBitmap(bitmap);
desired image
[]
The two pictures may not look very different here but the difference is very clear on my android device. And please don't say that I didn't try other solutions..
Here is a list of links of so itself..
ImageView fit without stretching the image
Fit image into ImageView, keep aspect ratio and then resize ImageView to image dimensions?
ImageView one dimension to fit free space and second evaluate to keep aspect ration
Resizing ImageView to fit to aspect ratio
Maximum width and height for ImageView in Android
Image in ImageView is stretched - Android
Android: How to prevent image from being scaled in ImageView or ImageButton?
Sounds like the answer is to use drawable-nodpi. For future reference, if you have the same named image in both the ldpi/hdpi/etc and in no-dpi, I think the no-dpi one will be ignored.
I have a normal "read an article" type page with a single large photo at the top.
I'd like it to:
not scale larger than the source imgae
not be larger than the screen
not be CRAZY long vertically
side things I already have working
border (via padding), center crop (would rather top crop, but seems not avail)
The main issue I'm having is - I can either have it fill_parent (ie full width) OR wrap_content (ie as large as the original image). And nothing I have done so far allows the image to be normal size (ie keep from enlarging).
Is there a "norm" for this kind of thing? I'm sure there's some kind of sweet spot or combination of attributes for this that works - I just can't find them.
My current attempt:
<ImageView
android:id="#+id/article_photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/super_light_gray"
android:scaleType="centerCrop"
android:contentDescription="#string/articlePhoto"
android:cropToPadding="true"
android:layout_marginBottom="20dp"
android:padding="1dp"/>
You can write some code in the Activity to get the image size and display size.
If the image size exceeds display size set width to display, if not set to image size. If you want to be fancy you can find the ratio between the x and y and scale vertically also.