I have an vector drawable I imported from an SVG asset. Sometimes, I have to adjust the size. Usually I update width and height. What I can't work out is how viewportwidth and height also impact the svg. It seems changing these dimensions can push the svg out of view within the visible area.
What do these units of measurement represent ? What is it's relationship with width and height respectively ? The documentation from Google is, (as usual), woefully inadequate. Could someone please elaborate ?
The viewportWidth and viewPortHeight define the area of the document that the content of the VectorDrawable is drawn within. They are equivalent to the width and height fields of an SVG viewBox. Research how an SVG viewBox works if you need further explanation.
So imagine your shape is a rectangle that is 100 wide and 100 height. Your viewportWidth and viewPortHeightshould normally both be set to 100. So that Android knows the dimensions of the underlying shapes.
The width and height attributes tell Android what the default ("intrinsic") rendering size of the VectorDrawable should be. You can think of these like the width and height of a PNG or GIF (or SVG for that matter).
So the contents of your VectorDrawable could be defined over an area of 100x100. But if your width and height are 24x24, the contents will be scaled down from 100x100 to 24x24.
So that's why fiddling with the viewportWidth and viewPortHeight messes with the VectorDrawable. So for instance, if you change them to 50x50, you would end up with one corner of the shape scaled down to 24x24 - instead of the whole shape.
Let's assume that the apple inside the canvas is your main vector drawable.Then h and w which are the height and width of the canvas respectively. So finally that h and w will be your drawable's viewportHeight and viewportWidth respectively
Viewportwidth/Viewportheight are the dimensions of the canvas for the SVG paths and the width/height are the actual intrinsic dimensions of the entire drawable.
Simply viewportWidth is like width of Frame and width like width of the picture inside that frame.
Related
I am making a layer-list at the moment. I would like one of the two following:
For my layer-list to scale to fit the view which it is assigned to, imageview/view src or background. So for example if I was to set width and height both to 20dp on the imageview/view, my layer-list would scale to fit the imageview/view dimensions
For my imageview/view to scale depending on the dimensions of the layer-list.
I do not wish to manually set height and width in both my layer-list and imageview/view. How is this accomplished?
In my app, I have a feature where you can put a frame around an image.
I use setBackground(Drawable) to apply the image of the frame to an ImageView. When the ImageView is clicked, I want to blow the content area (the image contained in the frame) up to the size of the screen. For this, I need to know the difference between the entire view and the content area, i.e. the thickness of the border.
Is there a way to get the size of the content area? (Accessing View.getWidth() for the ImageView gives content + border. I'm trying to get the border / padding.)
You can use:
Rect padding = new Rect();
view.getBackground().getPadding(padding);
int contentWidth = view.getWidth() - padding.left - padding.right;
int contentHeight = view.getHeight() - padding.top - padding.bottom;
If your background is a nine patch, the getPadding method will return the insets of the drawable
Here's an alternative approach:
The horizontal and vertical borders of the 9patch frame should not be stretched vertically and horizontally, respectively. Therefore you have constant width of the vertical border and height of the horizontal border. You can open the 9patch with any image editor that supports measuring and measure those lengths.
Use those values as margin or padding of the content view. Providing a single 9patch for all DPIs should work as the system would stretch it for higher DPIs but your padding/margin would be in DPs, so it should be the same size as the frame.
I have an ImageView in my layout. Its width and height are both set to fill_parent. The scaleType is set to fitCenter. I am in landscape mode. So if I have a square src image, when scaled up it will display me two borders, on the left and on the right, which perfectly suits me. But how can I get the dimensions of these borders ? The dimensions of the bitmap won't help for sure, and the dimensions of the ImageView are equal to the screen's.
I have asked for intrinsicwidth but it seems to give me the width of the drawable before it has scaled up.
I have tried adjustViewBounds but the ImageView still fills all the parent.
Any idea ?
Thanks
make a RectF to represent the original picture size, scale it with a matrix into a new RectF, then use this to find your dimensions.
See my answer here Get drawable displayed size after scaling
on how to calculate displayed size for FIT_CENTER scaleType.
And for the calculating the border dimensions just substract calculated value and divide by 2 from the imageView dimesnsions.
I have several images I lazyload into a ListActivity. Now the thing is that the images have different aspect ratios.
I would like all images to display with the same width set in xml (to fit into my layout), while taking as much space hightwise as they need.
Is there a way to do that in xml?
Thanks!
I think you want android:scaleType="fitCenter"
From the sdk docs at http://developer.android.com/reference/android/graphics/Matrix.ScaleToFit.html#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.
So, I think if you set a width on the imageview but set the height to wrap_content you should get what you want with the scaleType fitCenter.
I want to scale an image in an ImageView in the following way. The ImageView has some dimensions Width (W) and Height (H). The image I'm putting into the image view could be smaller or bigger than WxH. I want it to scale while preserving aspect ratio to fill WxH space.
It seems like the closest thing to what I want is android:scaleType="centerInside", but what I'm seeing is that if the image is smaller than WxH, it will put a small-unscaled version of that image in the center of the ImageView (like the documentation says), but I want it to scale it to "fit", while showing the entire image, and stretching it to the maximum possible size of the container without cropping anything. In other words, stretch preserving aspect ratio until either the width or the height bumps into the edge of the container (ImageView).
This seems like an obvious thing to want to do, but I can't get it to work this way!!!
From the Android docs...
public static final Matrix.ScaleToFit 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.
The XML attribute for this is...
android:scaleType="fitCenter"