I am developing an Android app. In my application, I need zoom image features like in Facebook. So, I used this library - https://github.com/chrisbanes/PhotoView. But I am having problem with showing full image when the image is first loaded.
This is how I set PhotoViewAttacher to ImageView
photoViewAttacher = new PhotoViewAttacher(imageView);
photoViewAttacher.setZoomable(true);
photoViewAttacher.update();
This is the xml layout of imageview
<ImageView
android:id="#+id/item_details_image"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
What I am trying to do is I want the image to show fit to the screen if the image is bigger then screen size. No matter how big it is. But image can be smaller than screen size. I just want to show full image at initial. But the above code gives me this result.
As you can see in the screenshot, it cannot show the whole image. It showing only partially. If I want to see other area of image, I want to scroll or swipe because the image does not fit to screen initially. So that I tried to change the XML to show the whole area of image initially. This is the XML I changed to.
<ImageView
android:id="#+id/item_details_image"
android:scaleType="centerInside"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
As you can see I changed the height from match_parent to wrap_content. Scale type as well. When I changed to that, it shows the full image initially like this.
It shows full image but smaller. It is totally ok for me. That is what I want to have. The problem is with zoom feature. When I zoom up, the image cannot go bigger than the image height. See the screenshot below.
As you can see above, it is not showing full image when I zoom up. ImageView height is not changing.
<ImageView
android:id="#+id/item_details_image"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
You Need to match_parent both height or width
Related
I am using an Imageview to show an image. If I set the image in background then its taking full widths and height under status bar and navigation bar. like as in below screen.
And the image is streching.
<ImageView
android:id="#+id/imgLoginImageSlider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/slider2" />
In the second case if I set image using Glide then this same image not taking full widths and height. There is some space in top and bottom of the image. Like in below image.
Glide.with(context).load(model.getDrawable_img()).into(holder.binding.imgLoginImageSlider);
But I want to set the image using programmatically, How to do then. Any help? Thanks in advance. Image should not be streach.
Adding this property to the ImageView will fix your issue
android:scaleType="centerCrop"
Learn more about this here
I am trying to scale an image inside an ImageView, but I want the image to get cropped if it goes outside the view boundaries. This is what it looks like. The image just gets rendered outside the View boundaries. I have tried all the different forms of android:scaleType and android:adjustViewBounds but none of them work to keep the image inside those boundaries. Basically what I want to have as an end result is an image that can zoom in and zoom out but when you zoom in, the image gets cropped to fit in the space. Maybe this is one of those things that is just not possible?
android:layout_width="wrap_content"
android:layout_height="wrap_content"
means that the view will adjust its size in acordance with the content. If you want the image to crop, specify those, e.g.
android:layout_width="40dp"
android:layout_height="40dp"
scaleX and scaleY is scalling the image. Removing both will solve your problem. Also give it a fixed height and width.
Edit these lines
android:layout_width="50dp"
android:layout_height="50dp"
And remove these lines
android:scaleX="2"
android:scaleY="2"
Let's say I have a 512x512 Image.
I want to display a banner at the bottom of my screen which shows the bottom of this image. It has to use the whole width of the screen and respect the ration aspect.
The problem is that I'm always failing in displaying the bottom of my main image. What I see is the center of my image...
<ImageView
android:id="#+id/banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/myImage"
android:scaleType="fitCenter" />
Any idea on how to do this ?
I dont know why this is happening: After loading the image with the Ion library, my image shows two white bars below and above image. I don't want to have that.
My ImageView is displayed in a listview item. My adapter code looks like this:
if (node.getImageUrl() != null) {
ivImage.setVisibility(View.VISIBLE);
Ion.with(ivImage)
.placeholder(R.drawable.anne_eli_icons_set_up_anne_eli_logo_530px)
//.error(R.drawable.error_image)
//.animateLoad(android.R.anim.cycle_interpolator)
.animateIn(android.R.anim.fade_in)
.load("http://app.anne-eli.at/" + node.getImageUrl().getUrlBig());
} else {
ivImage.setVisibility(View.GONE);
}
My imageview layout like this:
<LinearLayout ...
<ImageView
android:id="#+id/fragment_appointment_list_item_article_iv_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/anne_eli_icons_set_up_anne_eli_logo_530px"
android:background="#color/gray1" />
</LinearLayout>
Any ideas?
change your imageview layout to this one:
<LinearLayout ...
<ImageView
android:id="#+id/fragment_appointment_list_item_article_iv_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" <!-- this line added , also your can use other value too like cropCenter ... -->
android:src="#drawable/anne_eli_icons_set_up_anne_eli_logo_530px"
android:background="#color/gray1" />
</LinearLayout>
I think it may be whatever value "gray1" is, but it looks very white because it's lighter than the image in the background. Remove the background attribute in the xml and it'll be invisible.
Likewise, without setting a scaleType on the ImageView, it's going to default to center. This will attempt to resize the image so it fits to the center of the ImageView without cropping. The ImageView is bound to the width of it's container. The image provided is much wider than that, so it shrinks the image to fit. This means the tops and bottoms will be shrunk as well, and the image becomes smaller than the height of the container. If you want the image to be near the top, you can try setting the scaleType to fitStart instead.
I have an image like this used as background in a RelativeLayout:
This image is used as background for all the levels of my game. Every level is drawn onto the blue area.
I want to keep fixed the aspect-ratio of the blue area, changing the size of the red edges to avoid to show to the user unused pixels of their screen. The green area must be fixed to 80dp for all phones. Then I must add a View (a GLSurfaceView) in my layout in such a way that it fit perfectly the blue area. Thus all levels of my Android game will be perfectly the same in all Android device.
How can I solve this problem?
The real image that I use is a little more complex. You can look it here:
Real image
I would use a FrameLayout for the middle part of the screen(blue), add an ImageView, containing the BackgroundImage you want to display, and put the GLSurfaceView on top of it.
Since the aspect ratio is always the same, you could set the ImageViews sclaing to fit xy and the image should always look the same.
Lets assume you are using a simple SurfaceView, the xml code id use to put a ImageView begind it would look like this
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<SurfaceView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
As i dont know how you build your View i cant post the code that does the job, but just add a FrameLayout instead of your GLSurfaceView to your View, with the Same Dimensions, the GLSurfaceView would have.
To that FrameLayout first add the ImageView, then the GLSurfaceView. Both with height and width set to match_parent.
To Figure out the size of your SurfaceView...
Retrieve Display Dimensions
Substract Green Bar Dimensions
Calculate the size of the Blue View, get the Height/Width (whatever is bigger) calculate the missing Dimension
Set the Red Views to Occupie the empty space.
So you would have to do this programmatically :)