What's the difference between CENTER_INSIDE and FIT_CENTER scale types?
Asked Answered
B

3

172

I can't tell the difference between ImageView.ScaleType.CENTER_INSIDE and ImageView.ScaleType.FIT_CENTER.

CENTER_INSIDE

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

FIT_CENTER

Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.

Can someone illuminate the difference between the two?

Bicknell answered 5/7, 2012 at 23:34 Comment(1)
They are identical except that, if it happens that the box is actually BIGGER than the image, CENTER_INSIDE will NOT expand the imageYttrium
M
163

FIT_CENTER is going to make sure that the source completely fits inside the container, and either the horizontal or vertical axis is going to be exact.

CENTER_INSIDE is going to center the image inside the container, rather than making the edges match exactly.

so if you had a square box that was 10" x 10" and an image that was 8"x8", the CENTER_INSIDE would be directly in the middle of the box with 2" between the source and the destination container.

With the FIT_CENTER, that same image from the example above, would fit the entire container, because the sides are equal, and one axis is going to match the destination. With FIT_CENTER, if you had a box that was 5" x 10", and an image that was 5" x 7", the image would be proportionally scaled, so one of the axis's would fit, but would still center the image inside the destination.

They are similar, but one is made so that the source will fill the destination as much as possible, while the other just centers the image inside the destination.

Hope that clarifies a little

Mccahill answered 5/7, 2012 at 23:47 Comment(8)
Note that center/centerInside, etc. don't actually centre the image, as far as I can tell. At least in the case when the image is smaller than the view. I could be wrong.Nikolos
it sounds that FIT_CENTER is (almost) always more favorable.Tine
It depends on what you are going for. If you want something centered exactly in the middle, then CENTER_INSIDE is going to be a better fit. Again, it all depends on what you are doing :)Mccahill
This still doesn't make sense because FIT_CENTER states that At least one axis (X or Y) will fit exactly. Doesn't this imply that both do the same thing?Viscountess
No, not at all. There is the potential that they could, but it depends on the size of the image. Read my answer again, it should explain. Center inside won't always have one of the axis line up.Mccahill
Basically, the documentation isn't clear that CENTER_INSIDE doesn't scale UP (only DOWN)Karinkarina
@Livven how is my answer misleading?Mccahill
@Karinkarina It ignores the scenario where the image is larger than the view box, in which case CENTER_INSIDE does scale it down, and thus becomes unnecessarily complicated as well. The other answers explain this correctly and much more succinctly.Holcman
T
282

Here's a graphical illustration of the difference between CENTER_INSIDE and FIT_CENTER.


Image used (100 × 100):

Android_Robot_100.png


Small image view (75 × 50):

CENTER_INSIDE:

CENTER_INSIDE for small image view

FIT_CENTER:

FIT_CENTER for small image view

Both CENTER_INSIDE and FIT_CENTER shrink the image.


Large image view (300 × 200):

CENTER_INSIDE:

CENTER_INSIDE for large image view

FIT_CENTER:

FIT_CENTER for large image view

CENTER_INSIDE does not enlarge the image, FIT_CENTER does.


The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

Telling answered 10/10, 2013 at 2:38 Comment(0)
M
163

FIT_CENTER is going to make sure that the source completely fits inside the container, and either the horizontal or vertical axis is going to be exact.

CENTER_INSIDE is going to center the image inside the container, rather than making the edges match exactly.

so if you had a square box that was 10" x 10" and an image that was 8"x8", the CENTER_INSIDE would be directly in the middle of the box with 2" between the source and the destination container.

With the FIT_CENTER, that same image from the example above, would fit the entire container, because the sides are equal, and one axis is going to match the destination. With FIT_CENTER, if you had a box that was 5" x 10", and an image that was 5" x 7", the image would be proportionally scaled, so one of the axis's would fit, but would still center the image inside the destination.

They are similar, but one is made so that the source will fill the destination as much as possible, while the other just centers the image inside the destination.

Hope that clarifies a little

Mccahill answered 5/7, 2012 at 23:47 Comment(8)
Note that center/centerInside, etc. don't actually centre the image, as far as I can tell. At least in the case when the image is smaller than the view. I could be wrong.Nikolos
it sounds that FIT_CENTER is (almost) always more favorable.Tine
It depends on what you are going for. If you want something centered exactly in the middle, then CENTER_INSIDE is going to be a better fit. Again, it all depends on what you are doing :)Mccahill
This still doesn't make sense because FIT_CENTER states that At least one axis (X or Y) will fit exactly. Doesn't this imply that both do the same thing?Viscountess
No, not at all. There is the potential that they could, but it depends on the size of the image. Read my answer again, it should explain. Center inside won't always have one of the axis line up.Mccahill
Basically, the documentation isn't clear that CENTER_INSIDE doesn't scale UP (only DOWN)Karinkarina
@Livven how is my answer misleading?Mccahill
@Karinkarina It ignores the scenario where the image is larger than the view box, in which case CENTER_INSIDE does scale it down, and thus becomes unnecessarily complicated as well. The other answers explain this correctly and much more succinctly.Holcman
L
62

They are the same if the image is bigger than the container. If the image is smaller then the container CENTER_INSIDE will NOT scale the image up while FIT_CENTER will.

Lau answered 18/6, 2013 at 13:46 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.