I have an ImageView which needs to have a maximum height of 150dp and a width that matches the parent. However, what I need is for the actual image to be cropped, so the picture is as wide as the ImageView, but centered and cropped so the top and bottom of the picture aren't visible (sort of a preview). What I have currently:
<ImageView
android:adjustViewBounds="true"
android:background="#fafafa"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxHeight="150dp"
android:id="#+id/articlepreviewimage"
android:src="#mipmap/ic_launcher"
android:layout_below="#+id/naslovclanka"
android:layout_centerHorizontal="true"
/>
Also, it's crucial that the image stays in its' original proportions, so no putting it as background, no scaling etc. I just need it to fill up the width of the ImageView and show the center of the picture in that ImageView.
The way its' currently done, it scales the image so it fits into the height or width, but doesn't cut away anything. How to do this?
take a look at android:scaleType="centerCrop"
There are also a lot of other scale types that might fit what you what.
Try doing the following:
<ImageView
android:id="#+id/yourimageId"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:adjustViewBounds="true"
android:layout_gravity="center_vertical"
android:clickable="true"
android:scaleType="fitXY"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:maxHeight="150dp"/>
Related
I've an imageview with an icon on background, instead of generating all diferent sizes of icons for diferent sizes of screen i'm using only a big one and resizing it to fit the size I want.
If I set the layout_height to any value android automatically resize the width to keep aspect ratio (what is good) but the placeholder keeps the original width and the new resized icon is centered in the space it was supposed to fit
To demonstrate the situation i took this print
both left and right icons have the same dimension in original file
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:foregroundGravity="left"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_right_thumb" />
setting only the imageview height and is it possible to make it resizes keeping gravity on left? (as in the print bellow)
It is quite simple.
Set your parent layout height as desired and its children height to "match_parent"
You can use "dimen.xml" files to control different sized screen dimensions, for now i have put a static value of "64dp" android:layout_height="64dp"
<RelativeLayout
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="64dp">
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/ic_right_thumb" />
</RelativeLayout>
The answer was pretty easy... there is an property on ImageView that tells android how to deal when it needs to scale the image:
android:scaleType
so setting it properly i've
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/ic_left_thumb"
/>
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitEnd"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_right_thumb" />
In this way, instead of fitting the icon at the center of the spaceholder, it's is going to adjust to the edges
How can I get an ImageButton that has a fixed height and is only as wide as it needs according to the ratio of its source image?
I tried the following:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="8pt"
android:minWidth="0pt"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/list_download"
android:background="#android:color/black"
android:padding="0pt"/>
I set background to black just to see the boundaries of it exactly, and here is the outcome.
I have seen some solutions that suggest to use negative paddings but it is not an elegant solution. There should be a better one.
I tried similar configurations on an ImageView too, but it also had extra padding. So it's not an ImageButton specific problem (i.e. it is not related to this nine-patch issue).
EDIT: If I change scaleType from fitCenter to fitStart, then the outcome is like this. So there is somehow a minimum width.
It's because you've set a limited height. That limits the image height, but when Android calculates the width of the content (the original unrezised image), it's wider.
You'll get the image without the black "padding" on the side if you use wrap_content for the height as well.
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="0pt"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/list_download"
android:background="#android:color/black"
android:padding="0pt"/>
So, if you want the picture to be a specific size, you could resize it in your drawable folder to the size you want.
you just need use android:scaleType="fitXY" and set padding 0dp.
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:padding="0dp"/>
you can put it in a Frame like so :
<FrameLayout
android:layout_width="wrap_content"
android:background="#android:color/black"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/list_download"
android:scaleType="fitCenter"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_width="8dp"/>
</FrameLayout>
it will be much easier to play with it like so
i have this little layout i defined to inserted in every page of my app:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#null"
android:src="#drawable/sa_info"
android:layout_alignParentRight="true"/>
i've sa_info.png that is 118x118 but i want it to look much smaller on the screen. if i try to set width and height of the imagebutton to the desired size (lets say 48dp) the resulting image when i run the app is cropped to the center:
so the only way i have to get the desired result is scale the image itself to the desired resolution.
what i'm doing wrong, is there a better way to do this?
Try adding
android:scaleType="fitCenter" -> http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
android:adjustViewBounds="true" -> Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.
i have an imageView on screen and i want to put another imageview that will appear in the bottom of the imageView (It is just like a little line), i align the line with the main imageView the problem is that it left a little margin between the main imageView and the line,
In the emulator it align perfect but in the device it let a little margin like paddingbottom and i dont know why
this is the screen
http://s2.subirimagenes.com/otros/previo/thump_8473957photoscreen.jpg
The white zone with the text "Manolo" should be on the bottom but there is a little margin
And there is the Code(is all in a linearLayout vertical)
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/inferior"
android:layout_below="#+id/superior"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/imageView1"
android:layout_alignBottom="#+id/imageView1"
android:layout_centerHorizontal="true"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:src="#drawable/fondonombretransparencia" />
Try using the 'adjustViewBounds' parameter as stated in here:
<ImageView
(...)
android:adjustViewBounds="true" />
If set to true, the ImageView will adjust its bounds to preserve the aspect ratio of its drawable. This might solve the padding difference between your emulator and the physical device.
I want to diplay an image so that it takes up a minmum width of the screen and should scale in its aspect ratio (the image width might be smaller or larger than the minimun width) I also want to have a fixed size border around this image. This is my xml section for it:
<ImageView
android:id="#+id/detailed_view_boxArt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"
android:layout_alignParentLeft="true"
android:layout_below="#id/detailed_view_heading"
android:padding="10dp"
android:layout_marginLeft="5dp"
android:scaleType="centerInside"
android:background="#000"/>
This however does not produce what I want...the problem is that it does not scale the image horizontally far enough (ie. the 10px padding that I have seems a lot more on the right and left)
How would I produce the result that I want?
to set minimum width and heidht use the attributes android:minHeight="100dip" and android:minWidth="200dip".
to set the Border check my post.
Try this (I emphasized the important part):
<ImageView
android:id="#+id/detailed_view_boxArt"
*android:layout_width="match_parent"*
*android:layout_height="wrap_content"*
*android:adjustViewBounds="true"*
*android:scaleType="centerCrop"*
android:layout_alignParentLeft="true"
android:layout_below="#id/detailed_view_heading"
android:padding="10dp"
android:layout_marginLeft="5dp"
android:background="#000"/>