Android UI design automatic ImageView re-size - android

An ImageView gets an image and wraps the content so if the image has dimensions like 100x100, the ImageView has the same dimensions. I want to specify only the layout_height of this ImageView and when it matches the image to re-size properly the layout_width of the ImageView.
Here is an example:
image size = 100x100;
ImageView's layout_height = 200;
ImageView's layout_width should become 200 not 100.
Is this possible?

You'd need to create a custom ImageView and override onMeasure to make the view always square.
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
SQUARE_DIMENSION = this.getMeasuredHeight(); // whatever height you want here
this.setMeasuredDimension(SQUARE_DIMENSION, SQUARE_DIMENSION);
}

Related

Does android scale images appropriately when we set a different height than was calculated?

So to make an image square the following code works:
public class SquareImageView extends ImageView {
...
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
setMeasuredDimension(width, width);
}
...
}
So my question is:
If I understand correctly we have to call super.onMeasure so that the object can figure out its width and height. But when we pass in the setMeasuredDimension the width both as height and width to make the image square does the Android scale the image?
Any kind of such changes are they scaled properly? Or the best approach is to already have the resource square e.g. from some photo editing tool

Measuring an ImageView after loading an image

Im trying to find a way to measure an ImageView after an image has been loaded into it using Glide or Picasso (or anything really). Basically, im trying to layout other views on top of the image in certain positions, but need the final ImageViews dimensions to do so accurately.
Im not sure what the best layout to use to try and do this would be, but im currently using this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/viewingImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>
and loading the image into viewingImageView. These are both inside a root FrameLayout as well but I dont think that matters.
This is my latest attempt, but as commented, using .getWidth() and .getHeight() on the ImageView return 0. The width/height of the resource returns the size of the original image.
Glide
.with(this)
.load(entry.getImageUrl())
.asBitmap()
.into(new SimpleTarget<Bitmap>() {
#Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
mImageView.setImageBitmap(resource);
int width = mImageView.getMaxWidth(); //prints 0
int height = mImageView.getMaxHeight(); //prints 0
int resw = resource.getWidth(); //returns original image width
}
});
So how can I get the image loaded and then measure the ImageView (or its wrapping FrameLayout) after the image has been loaded? Or if possible, measuring the dimensions of the finally laid out image would be better, as I know the image doesnt always fill the entire ImageView depending on scale types. I'm open to any solutions, the above is only what ive tried so far.
You should wait for the view to be drawn, you can use OnGlobalLayoutListener like this
ViewTreeObserver vto = mImageView.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
this.mImageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
// Get the width and height
int width = mImageView.getMeasuredWidth();
int height = mImageView.getMeasuredHeight();
}
});
Create a custom class with image view.
Use this onMeasure in the image view we can get the height and width
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mNeedsInitialScale) { // Set by setImage when a new image is set
// The measured width and height were set by super.onMeasure above
setInitialScale(getMeasuredWidth(), getMeasuredHeight());
mNeedsInitialScale = false;
}
}

How to square a custom view when layout_height and layout_width are set to have different magnitudes?

As per my understanding when user specifies a views height/width in pixels/dp, the view receives EXACTLY spec mode. EXACTLY spec mode means that the view must use this size. Suppose I want to make sure my view remains a square. How can that be achieved if the user sets different values for layout_height and layout_width.
Override onMeasure for your custom view, determine what the smallest dimension is, and set both your width and height to that minimum dimension.
Something like:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int specWidth = MeasureSpec.getSize(widthMeasureSpec);
int specHeight = MeasureSpec.getSize(heightMeasureSpec);
int lesserDimension = (specWidth > specHeight)?specHeight:specWidth;
setMeasuredDimension(lesserDimension, lesserDimension);
}

use setLayoutParams() but it doesn't work

I create a custom view-MyImageView-to draw a bitmap in it,i use setLayoutParams() to set my view's width and height,but it doesn't work,i use log to track my view's width and height,i found that both of them are 0,why the width and height are not both 300? here's part of my main activity code:
myCanvas=new MyImageView(CanvasTest3Activity.this,Path);
LinearLayout.LayoutParams p=new LinearLayout.LayoutParams(300,300);
myCanvas.setLayoutParams(p);
here's part of my MyImageView 's code:
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int parentwidth=MeasureSpec.getSize(widthMeasureSpec);
int parentHeight=MeasureSpec.getSize(heightMeasureSpec);
int mywidth=(int)(parentHeight*0.5);
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),mywidth);
}
You need to get the parent View and use the add method to add your view + your view params. Something like:
"ParentViewInstance.add(this_is_my_child_view, this_is_the_layout_params_for_my_child_view)"
This means that the type of the LayoutParams of your child view, should be the same type as the ParentView LayoutParams. Take a look at this answers for code samples.

How to change the size of a bitmap contained in an ImageView without affecting surrounding view's position in Android?

I have an ImageView that contains a bitmap. Now the bitmap can change size within a known range. This makes the surrounding views to relocate which I want to prevent. I've tried setting margins and padding for the ImageView but without success. Any ideas?
Thanks,
Christian
Try putting your ImageView and other UI elements into a FrameLayout and setting each item's android:layout_gravity to place them.
Try this:
imageView = new ImageView(context)
{
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
setMeasuredDimension(knownMaxWidth, knownMaxHeight);
}
};
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

Categories

Resources