Develop Reference

Image with same resolution not fit on layout imageview

Problem: trying to give multi device support screen for a simple layout but in Nexus 6 its creating the problem,means not showing fit.
It's side is cutting down where as per as docs for nexus-6 resolution is 1440*2560 and image should be in drawable-xxxhdpi .so i keep a image with resolution of 1440*2560.
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:id="#+id/imv" />
</RelativeLayout>
if i ll give match_parent so obvious it will stretch the image.
Please help me to get out of it.
Here is screen shots of screen -
http://s10.postimg.org/43od5j5h5/screen_shot_layout.png

Set the width of the Image to fill_parent (you can set margins if you want a bit smaller imageView or you could also just set a fixed width)
Use android:adjustViewBounds to keep aspect ratio
Set height to wrap_content (it will take whatever it takes to maintain aspect ratio)
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon"
android:id="#+id/imv"
android:scaleType="fitCenter" />

If you want to fit the image on the imageview, replace android:src with android:background in the ImageView in the xml code.

Try to use these lines of code in the layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:scaleType="fitXY"
android:id="#+id/imv" />

How to Fit the Downloaded Images into the ImageView (to Eliminate the Need for Scrolling)

My app gets the album cover images from an Internet source. The image dimensions are varying from 200*200 to 400*400, therefore making scrolling necessary on some smaller devices. The layout resource codes and layout view are below.
The ImageView is the view with the red borders.
All I need is to make downloaded image to fit the imageView, so that the users won't have to scroll vertically to see the view below. How can I accomplish that? Thanks in advance...
<LinearLayout
android:id="#+id/llayoutAlbumCover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="top|center" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/albumCover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="3sp"
android:scaleType="fitCenter"
android:src="#drawable/loading" >
</ImageView>
</FrameLayout>
</LinearLayout>

use imgview.setScaleType(ScaleType.FIT_XY);
Through xml also you use like this
<ImageView
android:id="#+id/albumCover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="3sp"
android:scaleType="fitXY"
android:src="#drawable/loading" >
</ImageView>
PS:: I know this is what you wanted, but for images where you care about aspect ratio, this will stretch it out.

You can set scale, for example imageView.setScaleType(ScaleType.fitCenter)
Samples: http://etcodehome.blogspot.com/2011/05/android-imageview-scaletype-samples.html

Using android:scaleType="fitCenter" guarantees at least one axis will be fitted in the view. Use android:scaleType="centerInside" instead. The dimensions will be equal or smaller then your view. For more options please check ImageView.ScaleType

Image in background without resizing the parent layout

I've got a linear layout with layout_height set to wrap_content, so that the layout height is depending of the number of text lines in it.
The problem (that has driven me crazy all morning) is that I want to set an image as background of the layout, but to be sure the image can be used whatever the layout size, I've made the image quite big in height. The goal is for the image to be cropped in height if the layout is small. But I can't manage to do that: whatever I try, the layout is resizing according to the image height.
So, how can I set an image as background of something, but cropping itself so that it doesn't reisze parent layout (of course, I don't know the parent layout size because it depends on the text inside).
As english is not my first language, hope my question is clear...
Thank you in advance.
Edit: some code sample and screenshots:
This is the original card, without the image in background.
This is the code with the image view added:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout
... and the result is my card is stretched to the height of my image. But I don't want that. I want the card the same size. But I cannot reduce image height, because, the card can have more text and be more tall, and so my image will have to be taller.

This is code for a Linear Layout that will be in center and adapt the size of text inside.
I have tested it .
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvInfo"
android:textColor="#ffffff"
android:background="#drawable/toast_frame"
android:gravity="center" />
</LinearLayout>
Give it a try it should work. Here I am using an Image that is small enough to fit the smallest size. Android will automatically strech it. I use 9patch Images for such cases. To know more about 9patch visit this Link from developer.android.com
Simple online tool to generate 9patch
Also check this SO Answer
I have uploded toast_frame.9.png file here so that you can test it with the code I have given above
**EDIT **
change
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
to
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/drill_background_img">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
I hope this will work.

I don't think you can crop the image when using it as "background" attribute for any view.
Image will always be stretched to fill the whole background. Normally for background you should use Nine Patches. Get familiar with it and maybe you can change your functionality or UI spec to use them instead of normal images.
The only way I know of cropping the image is in the ImageView and it's image set by "src", not "background".
I would generally avoid using fixed size images in the components that can change size. You also have to remember that in Android almost everything change size when you think about different orientations, screen sizes, screen densities.

I think that background is always resized to fit container size. But you can use FrameLayout or RelativeLayout and ImageView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
...your content here...
</LinearLayout>
</RelativeLayout>

Stretching ImageView to fill screen height inside of Horizontal Scroll View

I've read all there is to read in terms of supporting different screen desnities. And, I have supplied proper variations of the images being display to appropriate folders. However, I am bewildered by something.
The documentation for ImageView says that setting android:layout_width and android:layout_height to "fill_parent"/"match_parent" will result in the image stretching to fill the screen. (This seems necessary since not all screen densities offer the same size/pixel count screens and I don't want those extra few pixels to result in padding on the bottom of the screen)
This seems to work any other time, but is not working for me when the ImageView is placed inside of a Horizontalscrollview and the width of the image is longer than that of the screen.
My code below:
(The activity is set to landscape in my manifest)
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/hscrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dp"
android:fadingEdge="none"
android:scrollbars="none"
android:overScrollMode="never" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dp"
android:fadingEdge="none"
android:scrollbars="none"
android:overScrollMode="never" >
<ImageView
android:id="#+id/MapImageView"
android:src="#drawable/map"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</RelativeLayout>
</HorizontalScrollView>
Edit: I replaced :src with :background to no effect.
This is the effect I get on devices like tablets. Ideally I want the image to fill the entire screen, like it does, below, on a phone with typical 480x800 resolution or the like.

Try using android:scaleType="fitXY" in your ImageView.

This is working for me:
<ImageView
android:id="#+id/main_imageView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="42dp"
android:alpha="0.5"
android:src="#drawable/img_alchemy2" />
It is a portrait image that fills the screen in portrait mode, and in landscape it fills it vertically without stretching it horizontally.

Extra Padding On Top Of My Images

I have a LinearLayout (Horizontal) that I am using to display 3 ImageViews. When I first add the ImageViews the last one is shrunk because the images are too big to fit 3 across. Here is what my designer screen looks like:
Notice the third image is shrunk.
To fix this issue I set the following attributes on each ImageView.
width: 0dp
weight: 1
Here is how my images look after setting those attributes:
The problem I am running into is even though the images have been shrunk there is still space at the top and bottom as shown by the blue rectangle in the following image:
My question is, why is this extra padding there and how can I get rid of it?
Thank you
UPDATE - adding my layout file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#color/app_background_color"
android:contentDescription="#string/game_image_button"
android:gravity="center"
tools:context=".EasyActivity" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
</LinearLayout>
</RelativeLayout>

ImageViews support different ScaleTypes, the default is FIT_CENTER. here are the other options. FIT_CENTER means its going to start out with height and width equal to your image (what your images looked like in the first screen shot before you added weight). What I believe happened is that it then resized the width of the image based on your layout_weight, and maintained the image's aspect ratio by shrinking it to fit the new width. It left the height to be the original height and centered the result.
I think one of the other scale types would do what you want. Maybe CENTER or CENTER_INSIDE

You can use the following code
<Imageview.....
android:adjustViewBounds="true"
..../>