I am developing a sort of ebook application and I am trying to display an image in the following two ways. When the screen is in portrait, I have the image horizontally fitted and vertically centered. When the screen is in landscape, I want the image to fill the screen horizontally with the aspect ratio maintained. Since the images that I am using are longer than they are wide, I have a ScrollView to allow viewing of the entire image.
How should I be scaling my ImageView to achieve this? I know that FIT_CENTER comes close to what I want to do, but since the image is narrower than it is tall, it does not fill the width. I tried FIT_XY with setAdjustViewBounds set to true but that still doesnt maintain my aspect ratio. Does anyone have any ideas?
Here is my code so far:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:isScrollContainer="true"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layout_gravity="center_vertical|clip_horizontal"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:id="#+id/Root">
<ScrollView android:id="#+id/ScrollView01"
android:tag="scroller"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|clip_horizontal">
<ImageView android:scaleType="fitCenter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imgView"
android:adjustViewBounds="true"></ImageView>
</ScrollView>
</LinearLayout>
http://i.stack.imgur.com/9J8IW.png
This is in portrait. It is exactly as I want it. The image fits the width of the screen and aspect ratio is maintained.
http://i.stack.imgur.com/Kw68o.png
This is in landscape. The image's aspect ratio is maintained and the scrollview works as needed, but I need the imageview to stretch the width of the screen
Related
I am trying to resize an image by keeping the aspect ratio. It should be just large enough to fill the screen width and if necessary some of the image should be off-screen.
here is a picture of what I want
I tried
android:adjustViewBounds
but when the image is larger than screen it fits image into imageView and not filling the width.
And I also don't want to use :
android:scaleType="centerCrop"
Here is my complete code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageBackgroundAboutFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/about_us_background"/>
</RelativeLayout>
Use android:scaleType="fitXY" with android:adjustViewBounds
UPDATE
I think you should do some trial and errors :
How to scale an Image in ImageView to keep the aspect ratio
Scale Image to fill ImageView width and keep aspect ratio
So many possible fix, but i dont really sure which one will work for you (my answer working for me but not for you - for example).
updtae your imageview like this..
remove scaleType and adjustViewBounds.. and make layout_height as match_parent
<ImageView
android:id="#+id/imageBackgroundAboutFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/about_us_background"/>
I have an ImageView that's displaying a rectangular image. I want to display a review of an image captured from a custom camera activity.
The issue is that the captured image is larger (in height) than the view and so is scaling by X to fit the Y.
As seen in the image, there's a white stripe along the right side of the image. What I want is for the image to fill the width of the view and just clip or hide the extra at the bottom.
I've tried a bunch of different configurations but can't seem to get it to work. Currently I have:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="true"
android:clipToPadding="true">
<ImageView
android:id="#+id/camera_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart" />
....
</FrameLayout>
The image is going to be cropped into the square view-port so it's important that the image be displayed from top|left, and fill the width.
One way I was able to get it to work was to put the ImageView into a ScrollView, but then I have to hide the scrollbars, and figure out how to disable scrolling.
According to Moradiya Akash answer, the image will fit your ImageView but no accuracy of aspect ratio. Steve Haley had an answer on maintaining the aspect ratio.
Make sure you're setting the image to the ImageView using android:src="..." rather than android:background="...". src= makes it scale the image maintaining aspect ratio, but background= makes it scale and distort the image to make it fit exactly to the size of the ImageView
.
More here
Chnage your code like this. It may help you.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="true"
android:clipToPadding="true">
<ImageView
android:id="#+id/camera_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
....
</FrameLayout>
change the tag in your image view "fitStart" to "fitXY"
android:scaleType="fitXY"
I have a simple application with ImageView
I need image to take all width and scroll y if it doesnt fit.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="center"
android:id="#+id/myPic"
android:contentDescription="#string/page_label" />
</RelativeLayout>
Everything is perfect, but when i switch to landscape image wont take all width, there are blank spaces (left, right).
only ImageView.ScaleType CENTER_CROP helps, but it cuts piecies from top and bottom.
Is it possible make it work the same way in landscape?
scaletype fitCenter for the ImageView does the trick. It scales the picture to full width, and allows height to be scrolled while still maintaining aspect ratio.
I'm trying to display a photo with so that it fills the display vertically, and is scrollable horizontally. My photos are of arbitrary dimensions, but always in landscape aspect ratio.
I placed an ImageView inside a HorizonalScrollView, and it almost works, except the aspect ratio is off. The ImageView is resized to fit exactly vertically, but the image is horizontally stretched or compressed.
I've tried every combination of values for scaleType and adjustViewBounds, and nothing works.
Can it be done with pure XML or do I have to resize my views in Java?
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image_photo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/panoramic_1" />
</HorizontalScrollView>
Thanks in advance...
The problem is the:
android:scaleType="fitXY"
It scales in X and Y independently, so that imageview matches the maximum visible width and height.
Change to:
android:scaleType="centerInside"
This will keep the original aspect.
More info here: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I need to remove the black borders appears around the pictures in android screen.
My pcture are full blade but I always get a kind of black borders both in portrait or landscape orientation. I tried to change parameters but unsuccessfully.
this is my xml layout code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<ImageView
android:src="#drawable/map"
android:id="#+id/fullmap"
android:layout_height="fill_parent" android:layout_width="fill_parent"> </ImageView>
</LinearLayout>
Can someone help me to find the error? Pictures are bigger than the screen 480x320 - 800x480 - 1280x800
Thank you
If by black border you mean the empty space around your picture left and right in landscape then you need to set ScaleType in you imageView Tag.
The first one will stretch the image and not preserve aspect ratio
android:scaleType="fitXY"
this one will zoom in to the image till all the sides are filled and it preserves aspect ratio.
android:scaleType="centerCrop"