Image View doesn't show clear image defined in xml - android

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.

Related

larger bitmap how to fit into android device screen

I have confusion for the loading of the bitmap into android device screen or any digital device for example LED TV screen here my android mobile screen resolution like 768x1280 pixels and I want to load bitmap resolution like 3000x2000 pixels here may be two type of possibility arise first one directly load bitmap without and resizing of the original bitmap second one form original bitmap to take the resizable bitmap and load into device screen but question arise into the first case how to load larger bitmap into small device screen can anybody help me for this confusion.
For reference consider this image :
Here this image have resolution 3000x2000 pixels and mobile screen resolution 768x1280 pixels.
Use "picasso" plugin:
picasso page
Example:
Picasso.with(context).load("link or #drawable/...").into(imageView);
You can add .fit() and image will fill imageView.
Picasso.with(context)
.load("link or #drawable/...")
.fit()
.into(imageView);
Rotate image to 90 degree(either outside or inside XML), Then Fit with scaleType attribute.
Firstly either you can add rotated image to your resource or rotate it with XML attribute, like this.
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rotation="90"
android:src="#mipmap/your_image" />
Then, Scale it with scaleType attributes (fitCenter, centerInside or centerCrop)
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rotation="90"
android:scaleType="fitCenter"
android:src="#mipmap/your_image" />
Note: If you only give scaleType to your ImageView without rotation then your image will be stretched.

ImageView as Mask or Parameter for images from web - How to?

I built an app and used an imageview (SmartImageView to be exactly, but i doubt that the problem) as reference for the place where I want my images to be, the thing is: the imageview has 50x50 px (set to wrap_content) but when I pull the images from web (favicons, to be exactly) if they are bigger than 60x60 instead of keeping the imageview size, they keep their own size.
I want my imageview to work as a mask and crop and/or resize the favicons to it's 50x50 size, how can I do it?
Heres the xml of the imageview:
<com.loopj.android.image.SmartImageView
android:id="#+id/favicon_placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/favicon_example2" />
And here's the java bit of code that pulls the images to it:
linkImageView.setImageUrl(link.favicon);
You are setting your height and width to wrap_content which means that it is going to resize itself to fit the content that you give it. If you want it to always be 50px no matter what size image you give it then you need to declare the size statically instead of wrap_content. And set your scaleType so the system knows how to manipulate the image should it be a different size. See here for possible values
<com.loopj.android.image.SmartImageView
android:id="#+id/favicon_placeholder"
android:layout_width="50px"
android:layout_height="50px"
android:scaleType="fitXY"
android:src="#drawable/favicon_example2" />
note that the use of the px unit is generally discouraged. dp is used more often because it can scale up or down for smaller and larger resolution devices. But if you want it to be the exact same pixels on every device then you must declare it with px
Look at ImageView.ScaleType. You may want to have a calculated size or fixed size in dp when using ImageView.ScaleType properties.

How do I get my ImageButton to resize correctly for an asset image?

My app has an Activity that displays a vertically scrolling list of ImageButtons. I want each buttons image to (A) come from the assets folder and (B) retain it's aspect ratio as it scales. Unfortunately, my ImageButton doesn't size correctly when it's image comes from the assets folder.
ImageButton src set from drawable
The first screenshot is my test app where the images all come from my apps drawables. That's the "correct" aspect ratio for that image, which is what I want to keep (all of the image buttons have been given scaleType "fitXY" "centerCrop").
ImageButton src set from assets
The second screenshot is my test app where the images all come from my apps "assets" folder — as you can see, the images are stretched out to the full width of the screen as desired, but the original aspect ratio has been lost:
Activity code (MainActivity.java)
LinearLayout buttons = (LinearLayout) findViewById(R.id.buttons);
View button = layoutInflater.inflate(R.layout.snippet_imagebutton, null);
ImageButton imageButton = (ImageButton) button.findViewById(R.id.imageButton);
if (GET_IMAGE_FROM_ASSETS) {
InputStream s = assetManager.open("image.png");
Bitmap bmp = BitmapFactory.decodeStream(s);
imageButton.setImageBitmap(bmp);
} else {
imageButton.setImageResource(R.drawable.image);
}
TextView buttonText = (TextView) button.findViewById(R.id.textView);
buttonText.setText("Button text!");
buttons.addView(button,
new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
Button layout (snippet_imagebutton.xml)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:textColor="#FFF"
android:background="#88000000"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
Dodgy hack
I've found a dodgy hack which achieves what I want and illustrates the problem — the ImageButton will size correctly to match a scaled up image from the resources, but it won't size correctly to match a scaled up image from the assets. I'd prefer a "real" solution over the dodgy hack if there is one. :)
// to start with, scale the ImageButton based on an image in our
// resources that has the same dimensions as the image in our assets
imageButton.setImageResource(R.drawable.image);
// when we eventually render (we don't have width / height yet)...
imageButton.post(new Runnable() {
public void run() {
int height = imageButton.getHeight();
int width = imageButton.getWidth();
// replace our "resource" image with our "asset" image
imageButton.setImageBitmap(bmp);
// and force the ImageButton to keep the same scale as previously
imageButton.setLayoutParams(
new RelativeLayout.LayoutParams(width, height));
}
});
Summary
I want to get the images for these buttons from my apps "assets" folder. How do I fix my app so that the button images are all scaled properly (i.e. retain their original aspect ratio)?
I'm assuming this has something to do with the framework not actually knowing the width / height of the image before it renders the ImageButton to screen — so how do I fix that? I tried setting adjustViewBounds to "true" on both the RelativeLayout and the ImageButton itself, but that didn't seem to have any effect.
The aspect ratio is not kept when you give the scale type attribute as "fitXY". Try "center", "center_crop" or "center_inside" according to your needs. Check ImageViewScaleType as well.
From what I gather, AdjustViewBounds is actually the method that provides the exact functionality you need. However, as Roman Nurik explains here, AdjustViewBounds does NOT increase the ViewBounds beyond the natural dimensions of the drawable.
Without seeing how you allocated resources/assets, my suspicion would be that this is why you see a difference when loading from Resources and when loading from Assets. Your resource file is - presumably - being scaled up when you load it (since that is the default behavior for resources), so that the actual size of the drawable returned from /res is significantly larger than the bitmap you decode from /assets.
Overriding ImageButton (as Nurik suggests), is of course one option, but probably overkill.
Assuming I am correct about the problem, you should be able to fix it simply by setting your BitmapFactory.options correctly when you load the Assets file. You need to set inDensity and inTargetDensity correctly according to your device (get DisplayMetrics), and set inScaled to true.
Alternatively, you can always rescale the bitmap manually before loading it on the ImageButton. Just grab the screen width to determine how large you need to make it.
P.S.
Auto-scaling is obviously the elegant solution, but it does have a weakness (which applies equally to both resources and assets) - if the width of your display > bitmap witdh when scaled up, you'll likely still have the aspect ratio messed up. You can check this pretty easily by going to landscape mode and seeing whether the resource file still result in the right aspect ratio. If you have a large enough base image (or use different layouts according to the screen size/orientation), then this should not be a problem though. Just something to keep in mind.

Android AnimationDrawable scaling

I have an ImageView that initially has a Bitmap Image:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
By default that imageview scales the bitmap to fill the width that is what I want.
But the problem is that when I change the source of the ImageView to an AnimationDrawable, that is build by several images of the same size of the original, then animation isn't scaled at all and returns to the original.
How can I do that scale the animation drawable in the same way that is scaled the bitmap?
I dealt with this programmatically by using ImageView setPadding(). I calculated the difference between the ImageView height and width and what I wanted to display and set my own padding so that the usable size of the ImageView exactly matched my animation.
It's brute force and not very flexible but I've not seen any better solution posted and this issue has come up many times.

How to create an ImageView that fills the parent height and displays an Image as big as possible?

I have an ImageView that is defined in the following way:
<ImageView
android:id="#+id/cover_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#id/title"
android:layout_above="#id/divider"
android:adjustViewBounds="true"
android:src="#drawable/image_placeholder"
android:scaleType="fitStart"/>
Now after downloading a new bitmap I change the drawable. The image now appears in the top left corner of the ImageView. Is there a way to have the image fill up the whole height that is possible and then adjust the width of the view to enable scaling the image without changing the ascpect ratio?
The image fills up all the space on a standard screen but on a WVGA Resolution the image takes only about half of the actual height of the ImageView.
If I'm understanding you correctly, what you need to use is the centerCrop scaleType. fitStart scales the image proportionally, but neither the width nor height will exceed the size of the view, and the image will, as you said, have a top|left gravity.
Using centerCrop scales the image proportionally, but causes the shortest edge of the image to match the size of the view, and if there is additional data on the long side that does not fit, it is simply cropped off. The gravity is, of course, center. The below worked for me:
<ImageView
android:src="#drawable/image_placeholder"
android:id="#+id/cover_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
/>
You can change scale type to fitXY via call to
imageView.setScaleType(ScaleType.FIT_XY);
simply do it in xml like
android:scaleType="fitXY"
Basically the answer here is that there is no predefined value for what you are trying to achieve. The solution is to create a Matrix that fits to your needs and call setImageMatrix(matrix) on your ImageView.

Categories

Resources