Image in ImageView showing up smaller than expected (Android) - android

I have this animation/code where a tap on the photo enlarges it to the full screen while the rest of the screen turns black. When I use this banana stock photo the size turns out large enough. However, when I pull images from the web using an API the images turn out very small I tried checking the size of the image and it does not seem to be naturally that small. The water bottle image is actually h:89 and w:273 pixels when downloaded from the source.
//pulling the image and finding its sizes
Glide.with(getContext()).load(currentFood.getImageUrl()).into(ivFullScreen);
int ih=ivFullImage.getMeasuredHeight();//height of imageView = 1440
int iw=ivFullImage.getMeasuredWidth();//width of imageView = 2464
int iH=ivFullImage.getDrawable().getIntrinsicHeight();//original height of underlying image = 3332
int iW=ivFullImage.getDrawable().getIntrinsicWidth();//original width of underlying image = 4442
Toast.makeText(getContext(), "view height: " + ih + " view width: " + iw + " image height: " + iH + " image width: " + iW, Toast.LENGTH_LONG).show();
The Toast showed that the `ivFullImage` size is h:1440 and w:2464 and the image's size is h:3332 and w:4442.
XML:
<LinearLayout android:id="#+id/llFullScreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:alpha="0.0">
</LinearLayout>
<ImageView android:id="#+id/ivFullImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bananas1"
android:scaleType="centerInside"
android:visibility="invisible"
/>

Just try to add android:adjustViewBounds="true" attribute to your ImageView :
<ImageView android:id="#+id/ivFullImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bananas1"
android:scaleType="centerInside"
android:adjustViewBounds="true" />
More info : ImageView

If the emulator/device size is too big it might be natural for the image to look small. Even though, I can see that you're adding the image statically from the XML with android:src="#drawable/bananas1", and not dynamically from the code. If you want to download an image from the internet and add it what you can do is call your ImageView of your layout from your code and then get the image you want to add from the URL you have
ImageView mImage = (ImageView) findViewById(R.id.ivFullImage);
//get the image from the url using the library you have, convert to bitmap
mImage.setImageBitmap(yourImageInBitmap);
Also, in your XML, you need to define the width and height of your ImageView to adjust to the dimensions of the image you're going to insert by saying
android:layout_width="wrap_content"
android:layout_height="wrap_content"

Related

Resize the image user inputted into the ImageView

So I have an ImageView which will retrieve the image from the database to show it on the program. However, I want the image retrieved to be resized to a specific height and width (thus it shall not fill the whole screen)
I want it's width to be 150dp, whereas its height to be 230dp.
However, the image that is in the database may be null, and as such, we can not set the ImageView's height and width, else there will be empty space on the layout.
So, how can I resize the image?
Following are my current codes:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_gravity="center"
android:id="#+id/Img" />
use scale type fitXY
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:scaleType="fitXY"
android:layout_gravity="center"
android:id="#+id/Img" />
If you're open to use Picasso, you can easily resize your image like this:
Picasso
.with(context)
.load(image)
.resize(150, 230)
.into(imageView);
There are many other possibilities, you can check it here:
https://futurestud.io/tutorials/picasso-image-resizing-scaling-and-fit
First create values in your dimens.xml file:
<dimen name="imageview_width">150dp</dimen>
<dimen name="imageview_height">230dp</dimen>
Then, in your code where you handle the images received from the db:
if(image != null){
imageview.getLayoutParams().height = (int) getResources().getDimension(R.dimen.imageview_height);
imageview.getLayoutParams().width = (int) getResources().getDimension(R.dimen.imageview_width);
imageview.setimagedrawable(img); // or any way that suits you.
}
This way you can translate the dp values to pixel values and can change the imageview size programmatically after it was inflated from xml.
Im not sure to understand your needs. But if you want a view to resize to 150x230 you need to use rajahsekar's answers. But if you also want your Imaview to take no place if the Image is null in DB you can set programatically :
imageView.setVisibility(View.GONE)

Is it possible to display original image in android without fit to device views?

I have an Image of size 1000px*1200px and i want it to be displayed without being scaled!.
I have searched in stackover flow and google i am not getting good one.
I want full image without scaled,
I have tried like this
Step1:-
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
/>
Step2:-
I have tried with scaleType also
add a scaleType to your ImageView
<ImageView
android:scaleType="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image" />
But this is also not working,
In sclate type i have tried with all possible properties (matrix,fitXY like this).
is there any possibility there for doing to dispaly original image in android?
Plz help me on this
You can try this approach,first get image from drawable and create a bitmap of it.Then get width and height of bitmap, resize your image view and then display image in it.It will create imageview with your original image size.
See below code -
BitmapDrawable bitmap = (BitmapDrawable) this.getResources().getDrawable(R.drawable.icon);
int bitmapHeight= bitmap .getBitmap().getHeight();
int bitmapWidth = bitmap .getBitmap().getWidth();
Now you have dimension of your original image.
Re-size image view -
ImageView imageView = (ImageView) findViewById(R.id.my_image_view);
imageView.getLayoutParams().height = bitmapHeight;
imageView.getLayoutParams().width = bitmapWidth;
and in last step set bitmap to your image view -
imageView.setImageBitmap(bitmap);
Hope it will help you.
EDITED
Use below code after resize image view -
replace - `imageView.setImageBitmap(bitmap);`
by
imageView.setImageResource(R.drawable.icon);
By your comments, I think what you need is a library like PhotoView.Hope it can help you
Although I would highly condemn such UX but whatever works for you.
1) Use the following link to make a two dimensional scroll.
Two dimensional scrolling... a suggestion that needs feedback
2) Add an imageview to the same and set your image dimensions for the imageview in px at runtime.
as far as i understand your question is that u want natural size of image without ImageView tag modifying it. This worked for me
<LinearLayout
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/image_here"
android:orientation="horizontal|vertical"/>
let me know in the comments.
Make your image layout width and height to wrap content. Make scaleType centre. Check your device width and height through device manager then give image height and width in %
After many trails i have find a solution for above question.
Here is the code:
MainActivity:-
public class MainActivity extends ActionBarActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView imageView = (ImageView) this.findViewById(R.id.imageview);
}
}
activity_main.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="#+id/ScrollView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none"
xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView android:id="#+id/HorizontalScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/imageview"
android:src="#drawable/desert"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:adjustViewBounds="true">
</ImageView>
</HorizontalScrollView>
</ScrollView>
This is working perfectly for my requirement.
Hope this helps to others.

ImageView re-size while setting Image after Cropping

I follow this http://www.androidhub4you.com/2012/07/how-to-crop-image-from-camera-and.html to crop image.
I have 4-5 ImageView in a collage frame.In All Imageview i have set a default image.On click on particular imageview, I am selecting Image from gallery then crop the Image. Now I have to set the cropped Image in my ImageView. So after setting the cropped Image my ImageView get re-size, and because of it other ImageView's size also differ. I want while i am setting the cropped image in Imageview my ImageView must not re-size.
The size of resulted cropped Image may different so I took the ImageView Size before cropping, And after cropping I am scaling result bitmap as the same size of my Image view.
Coding sample is given blow.
I am getting height and width of my Imageview like this
viewhight = tempView.getMeasuredHeight();
viewWidth = tempView.getMeasuredWidth();
After cropping Image I scaled Image according to height and width of my view like this
Bitmap photobitmap1 = Bitmap.createScaledBitmap(photobitmap, viewWidth,viewhight, true);
After this i changed it into drawable like this and set it on my Imageview.
Drawable drawble = new BitmapDrawable(getResources(),photobitmap1);
tempView.setBackground(drawble);
but on setting the hight and width of my view get resized and because of this near Image view also get resized why I don't know.because i converted my imageview in the same size of view.
I also tried this to scale bitmap :
Bitmap photobitmap1 = Bitmap.createScaledBitmap(photobitmap, (viewWidth-30), (viewhight-30), true);
and this to set bitmap :
tempView.setImageBitmap(photobitmap1);
tempView.setBackgroundColor(Color.TRANSPARENT);
but nothing worked.
my xml code is like this:
<LinearLayout
android:id="#+id/fst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/frame"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="85dp"
android:paddingRight="85dp"
android:paddingTop="10dp"
>
<ImageView
android:id="#+id/viw_1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="2.5dp"
android:layout_weight="1"
android:background="#drawable/rec"
/>
<ImageView
android:id="#+id/viw_2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="2.5dp"
android:background="#drawable/rec"
/>
</LinearLayout>
can any one help me please .....
Are you setting a fixed height and width for the imageview in the XML ?
Example:
<ImageView
android:layoutWidth="60dp"
android:layoutHeight="60dp" />

Why do I need to wrap an ImageView into a FrameLayout?

Here is a simple layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/companyIcon"
android:layout_width="wrap_content"
android:layout_height="40dp" <!-- notice I've limited a height -->
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/companyName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/companyIcon"
android:layout_marginLeft="3dp"
android:layout_centerVertical="true"
android:textStyle="bold"
android:textColor="#20526d" />
</RelativeLayout>
The height of an image I will set by setImageBitmap() is more that 40dp.
Using this layout I have an extra space between ImageView and TextView, where did it come from?
But after I wrap the ImageView with FrameLayout I don't have this unnecessary extra space:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/image_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/companyIcon"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_alignParentLeft="true" />
</FrameLayout>
<TextView
android:id="#+id/companyName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_container"
android:layout_marginLeft="3dp"
android:layout_centerVertical="true"
android:textStyle="bold"
android:textColor="#20526d" />
</RelativeLayout>
And the result:
Can you guys explain why shall I put ImageView into FrameLayout to have things as intended? Thank you very much.
The height of an image I will set by setImageBitmap() is more that 40dp. Using this layout I have an extra space between ImageView and TextView, where did it come from?
Since the android:layout_height="40dp" with a android:scaleType="fitStart", the image is getting scaled down (and to the left/start) to fit the height, so this "extra space" is actually the original width of the image, since your android:layout_width="wrap_content". I recreated your layout with my own image that is larger than 40dp. When you select the ImageView, you can see that its bounds stretch to the image's original width.
To further prove this, if I set android:scaleType="center", no fit is applied and you can see the ImageView's original width.
Can you guys explain why shall I put ImageView into FrameLayout to have things as intended?
It appears that since your FrameLayout uses android:layout_width="wrap_content", it gets the correct scaled down width from your ImageView after it gets scaled due to android:adjustViewBounds="true". It is strange that the ImageView itself uses android:layout_width="wrap_content", but shows the original image's width, and not the scaled width. My hunch is that the height and width of ImageViews get set before the scaling is applied, so the ImageView gets the original image's width, but the parent FrameLayout gets the scaled width of it's ImageView child after the scaling is applied. This may not be true, but it appears that way to me.
However, you can solve the unscaled width issue (without using a FrameLayout) by using android:maxHeight="40dp" on the ImageView. You can then set android:layout_height="wrap_content" so your images can be smaller than 40dp if the image is smaller.
<ImageView
android:id="#+id/companyIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:adjustViewBounds="true"
android:maxHeight="40dp"
android:scaleType="fitStart" />
This applies to almost all the view but answer is written considering specifically ImageView
Guideline to set Height and Width
Choose one of this three options only.
Set both height and width to "WRAP_CONTENT"
Set both height and
width to "FILL_PARENT"
Set both height and width to "FIXED SIZE"
*Avoid using mixture of them say Width=WRAP_CONTENT and Height=FILL_PARENT
Guideline to set SCALETYPE for ImageView
What does ScaleType do?
It scale the image you set to the ImageView, It doesn't scale
ImageView so when you set it to fitStart it will scale your image and
show on the right but your imageView will remain same in terms of
height and width as what you have specified.
As if you are using WRAP_CONTENT for height and width you don't need to specify ScaleType cause your ImageView is automatically going to be as big as your image.
As if you are using FILL_PARENT for height and width you will have option to show the image in Center,Start,End or in Full view.. so based on that you can choose your ScaleType.
As if you are using FIXED_SIZE fpr height and width you should opt for scaletype=FITXY.
Guideline to set Image into ImageView
As if you are setting image statically in XML then you have one image on your hand so you can create image of the size you wish as per your layout design and just move on with WRAP_CONTENT.
As if you are setting image at runtime after downloading it from somewhere, that time download the image and create bitmap of the size you prefer and then set it to ImageView
Specific to your case
You can see that your image is quite stretched and the text is not readable that's because you have downloaded and set image as it is but in smaller height and width.. rather you should have done like,
Set ImageView height and width to WRAP_CONTENT in XML file
<ImageView
android:id="#+id/companyIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
Download image in your required size say 50X100, for example see this code
class LoadPics extends AsyncTask<Void, Bitmap, Bitmap> {
String urlStr;
ImageView iv;
int width, height;
public LoadPics(ImageView iv, String url, int width, int height) {
this.iv = iv;
this.urlStr = url;
this.width = width;
this.height = height;
}
#Override
protected Bitmap doInBackground(Void... params) {
try {
InputStream in = null;
try {
URL url = new URL(urlStr);
URLConnection urlConn = url.openConnection();
HttpURLConnection httpConn = (HttpURLConnection) urlConn;
httpConn.connect();
in = httpConn.getInputStream();
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
BitmapFactory.Options o = new BitmapFactory.Options();
o.inJustDecodeBounds = true;
int scale = 2;
if (o.outHeight > width || o.outWidth > height) {
scale = 2 ^ (int) Math.ceil(Math.log(width
/ (double) Math.max(o.outHeight, o.outWidth))
/ Math.log(0.5));
}
if (scale <= 1 && o.outHeight > 150) {
scale = 5;
}
BitmapFactory.Options o2 = new BitmapFactory.Options();
o2.inSampleSize = scale;
Bitmap b1 = BitmapFactory.decodeStream(in, null, o2);
b1 = Bitmap.createScaledBitmap(b1, width, height, true);
loader.addToCache(urlStr, b1);
publishProgress(b1);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
#Override
protected void onProgressUpdate(Bitmap... values) {
super.onProgressUpdate(values);
iv.setImageBitmap(values[0]);
}
}
And call this method with your arguments,
new LoadPics(ivUser,imgURL,100,50).execute();
try to replace android:scaleType="fitStart" with this android:scaleType="fitXY"
Edit
in your image view you should set the width of imagView to wrap-content this will take the size of image. If you hard-code the imageView's width (as you have done it by giving the width to 40dp) then this will not look so good in other android mobile devices.
Still if you want to do so then Try to load image of lesser in resolution. if this image is 200X100 in resolution, then try to load the image of 100X50 in your ImageView
If you do android:scaleType="FIT_END", without the FrameLayout, does that put the Subway image near the "Subway" text? I wonder, because you have android:layout_alignParentLeft="true" in there. I'm thinking that the ImageView's original size before the scaling is what is throwing off the layout without a FrameLayout.
It probably doesn't matter too much, but it does take some processing to scale and resize the image for what you want it to do. If it is viable for what you want to do, I'd simply resize the image myself instead of relying on XML. If I wanted to cater to multiple sizes, I would have a couple of different layouts made. This of course may be overkill for your purpose, I do not know.
Extra space came in first image because u set match parent in image container layout. but second u used wrap content in FrameLayout which is image container.
my suggession to do these thing Create linear layout insider relative layout and apply layout_weight propert so ratio will be same in both view.
try to set the scale type to center_inside.

Scale Imageview nicely

The idea is to either display a photo or - if none is defined - a small icon symbolizing it.
I have defined the following ImageView in the layout:
<ImageView
android:id="#+id/imgPic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#+string/strImgPic"
android:paddingRight="10dip"
android:paddingTop="10dip"
android:saveEnabled="false"
android:src="#drawable/pic_icon" />
So the ImageView is pre-initialized with the 'icon' PNG.
The code to load it:
try {
imgURL = vinfo.getString("mainpic_url");
if (imgURL.length() > 1) {
imgURL = getString(R.string.urlPicsFull) + imgURL;
ImageView imgPic = (ImageView) findViewById(R.id.imgPic);
ImageDownloader img = new ImageDownloader();
img.download(imgURL, imgPic);
}
} catch (..) {
(..)
ImageDownloader() basically does nothing else than retrieving the image asynchronously. The problem however is that if there is NO image ( imgURL.length()==0 ) , the icon is displayed with a very large 'border' in the middle of an empty square in the layout.
I would like the image to be scaled down (or up) to the width of the parent view, but the icon to display as it is (about 90 dip wide and high).
Any suggestion on how to realize that?
Check out the android:scaleType tag of the ImageView. For your case if you add
android:scaleType="fitXY"
in your ImageView definition in the layout, and the image will be adjusted to your ImageView size. Something like this:
<ImageView
android:id="#+id/imgPic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#+string/strImgPic"
android:paddingRight="10dip"
android:scaleType="fitXY"
android:paddingTop="10dip"
android:saveEnabled="false"
android:src="#drawable/pic_icon" />
However this will not maintain the aspect ratio so the image may be distorted. If you do not want that, check the other values that the android:scaleType tag can take in the link provided.

Categories

Resources