Question

So I have this task to create a horizontal scrolling array of image buttons that are basically photo avatars of users. These avatars aren’t constrained by aspect ratio or size, and so I’ve been playing with ways to scale them and format them. I’ve gotten them scaling via the scaletype=”fitCenter” and using static width and height. But what I really want them to do is to butt up against one another. Currently if an image is taller than it is high, you get the kind of letterboxing but on the sides vs. the top (blank areas). I’ve tried all the different scaling values, wrapping each imagemap within a linearlayout, etc., but nothing I try seems to get rid of those (while displaying the entire image to scale). Is there any way to do this?

Answer 1

Just to reiterate what I think you’re doing, you have three image scenarios:

1. Square image
2. Landscape image (wider than tall)
3. Portrait image (taller than wide)

Laying out a row of fixed-size ImageViews (or ImageButtons) using FIT_CENTER works great for what you need if all the images were either square or landscape, because the scaling will always make the image stretch to the horizontal bounds of the view (the largest dimension). However, with portrait images, the scaling causes the view to be inside the bounds of your fixed-size view so that the entire image height can be visible.

If you need to maintain the aspect ratio of the image, there really is no ScaleType to help with this because the logic would be circular (fit the view to the image, while simultaneously fitting the image to the view). The solution is to adjust the size (specifically, the width) of each ImageView to match what the image will be scaled to. Here’s a sample of a factory method you might use to generate the ImageView to fit the image you want to put inside it. You could also modify this slightly to reset parameters on an existing ImageView if you like:

private ImageView getImageViewForThumbnail(Bitmap thumbnail) {
    float viewHeight = //Your chosen fixed view height
    float scale = ((float)thumbnail.getHeight()) / viewHeight;
    float viewWidth = thumbnail.getHeight() / scale;

    ImageView view = new ImageView(this);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams((int)viewWidth, (int)viewHeight);
    view.setLayoutParams(params);
    view.setScaleType(ScaleType.FIT_XY);
    view.setImageBitmap(thumbnail);

    return view;
}

You’re basically just calculating what the aspect width of the ImageView should be to match the fixed height you’ve chosen for all of them.

HTH