I'm trying to adjust the all_inclusive svg image to my rectangular button. The shape itself is rectangular as well but the vector asset is square (24x24) with white spaces above and under the shape. These spaces force the shape itself to be very small. How to make the all inclusive svg rectangular by deleting that padding on top and on bottom?
In this picture the image is set to fit the guidelines on the left, top and right side:
<ImageView
android:id="#+id/imgInfinity"
app:srcCompat="#drawable/ic_infinity"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="0.75"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="0.75"
app:layout_constraintEnd_toEndOf="0.25" />
Things that did not work:
pivot vector asset with a group -> I just cant figure out the dimensions without messing up the original shape. Same storty with scaleX/Y or translateX/Y. I got it to work on my other buttons with simpler shapes though.
adjusting android:viewportheight or android:height -> it deshapes the picture to a weird form
crop svg online --> as Googles original SVG pathData is already 580 characters long, cropping tools only make it to large for android to deal with (above 1000 charactes)
crop svg picture with word and extract from zip file-> it doesnt compress svg images so it stays rectangular with the white spaces above and under.
Set a seperate horizontal guideline for the top of the picture. It does the trick but one or multiple guidelines for each image gets very messy. There must be a better way, right?..
ACCEPTED SOLUTION (edit with InkShape):
Install InkShape
Open SVG
Click on picture once to select it
Go to File-> Document Properties and click 'Resize pager to drawing or selection' (this button is hidden on the first tab, click +Resize page to content to show the option);
Save
extract pathData and (viewport)width/heights from saved file.
The viewportHeight attribute defines the size of the "canvas" that the path is drawn on (i.e., it defines what the coordinates in the path data actually "mean").
The height attribute defines the intrinsic size of the drawable.
The original vector has 6.5 units (in the viewport) of white space at the top and the bottom. That means that you can look for any pathData command that uses a capital letter, and subtract 6.5 from the y coordinate. That leaves you with this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="13dp"
android:viewportWidth="24.0"
android:viewportHeight="13.0">
<path
android:fillColor="#FF000000"
android:pathData="M18.6,0.12c-1.44,0 -2.8,0.56 -3.77,1.53L12,4.16 10.48,5.5h0.01L7.8,7.89c-0.64,0.64 -1.49,0.99 -2.4,0.99 -1.87,0 -3.39,-1.51 -3.39,-3.38S3.53,2.12 5.4,2.12c0.91,0 1.76,0.35 2.44,1.03l1.13,1 1.51,-1.34L9.22,1.7C8.2,0.68 6.84,0.12 5.4,0.12 2.42,0.12 0,2.54 0,5.5s2.42,5.38 5.4,5.38c1.44,0 2.8,-0.56 3.77,-1.53l2.83,-2.5 0.01,0.01L13.52,5.5h-0.01l2.69,-2.39c0.64,-0.64 1.49,-0.99 2.4,-0.99 1.87,0 3.39,1.51 3.39,3.38s-1.52,3.38 -3.39,3.38c-0.9,0 -1.76,-0.35 -2.44,-1.03l-1.14,-1.01 -1.51,1.34 1.27,1.12c1.02,1.01 2.37,1.57 3.82,1.57 2.98,0 5.4,-2.41 5.4,-5.38s-2.42,-5.37 -5.4,-5.37z"/>
</vector>
Then, once the whole shape has been moved "up" by 6.5 units, you can subtract 11 (6.5 * 2) from both the viewport and the intrinsic height.
The end result is a 24x13dp shape, which should scale much better in wide views.
Update using Inkscape version 1.1:
Unfortunately, the latest version of Inkscape (1.1) no longer will import a vector drawable file directly, so the original answer is not 100% correct. That answer will probably work with other editors that can handle vector drawable files.
Here is an update to that answer that works with later versions of Inkscape to remove all padding from a vector drawable.
Convert vector drawable to scaled vector graphic (SVG):
Open Alex Lockwood's Shape Shifter site
Drag the vector drawable file from Android Studio to Shape Shifter.
Export the image as an SVG to a local file
Now that we have an SVG file, we can edit it with Inkscape:
Install Inkscape if not already installed.
Open SVG file in Inkscape.
Click on the image to select it.
Resize the image to the selection (Shift+Ctrl+R or Edit->Resize Page to Selection). You can also specify an alternate size if you desire some padding.
Save the image as an SVG file.
The image is now cropped in an SVG file. We need to convert it back to a vector drawable.
In Android Studio import the SVG file as a vector drawable. (File->New->Vector Asset) Asset Type = "Local file (SVG, PSD).
Once imported, the vector drawable no longer has any padding.
Use an image editor that can handle SVG files to crop the image. I used InkScape but there are others. Once the image is cropped, you can import it into Android Studio as an XML file.
Here's the new update on this topic:
https://code.google.com/p/android/issues/detail?id=202019
It looks like using android:scaleType="fitXY" will make it scale correctly on Lollipop.
From a Google engineer:
Hi, Let me know if scaleType='fitXY' can be a workaround for you , in
order to get the image look sharp.
The marshmallow Vs Lollipop is due to a special scaling treatment
added into marshmallow.
Also, for your comments: " Correct behavior: The vector drawable
should scale without quality loss. So if we want to use the same asset
in 3 different sizes in our application, we don't have to duplicate
vector_drawable.xml 3 times with different hardcoded sizes. "
Even though I totally agree this should be the case, in reality, the
Android platform has performance concern such that we have not reach
the ideal world yet. So it is actually recommended to use 3 different
vector_drawable.xml for better performance if you are sure you want to
draw 3 different size on the screen at the same time.
The technical detail is basically we are using a bitmap under the hook
to cache the complex path rendering, such that we can get the best
redrawing performance, on a par with redrawing a bitmap drawable.
I was trying to expand my shape but only from one side.
What I have:
https://imgur.com/NboRnFw
What I want to have:
https://imgur.com/eTQpA75
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="368dp"
android:height="257dp"
android:viewportWidth="368"
android:viewportHeight="257">
<path
android:pathData="M0,6H348C359.046,6 368,14.954 368,26V243H0V6Z"
android:fillColor="#E7C9FF"/>
</vector>
How can I do this in Android Studio? Is there some kind of image scaling to achieve that? I don't want to change the resource code of this shape.
For something like this, its better yo use 9 patch images. You wouldn't achieve this result any other way since changing width height ratio will make the image distorted.
You can specify the area which expands by giving it 1 pixel order, very easy to set up and there is a built in editor in Android Studio.
Make a PNG from your SVG first, then in Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click Create 9-patch file.
https://developer.android.com/studio/write/draw9patch
It takes literally a few seconds to create a 9 patch. You can also use this online editor to build a nine patch without Android Studio.
(I was trying to make your drawable into a 9 patch but it had a white background which was causing issue.)
Is there any tool to convert Vector Drawable to SVG? I lost my original svg file and now I would like to reduce the size of the image. Currently, I have,
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="1200dp"
android:height="1200dp"
android:viewportHeight="1200"
android:viewportWidth="1200">
I would like to make it 180x180. Thanks in advance.
Look at this Shapeshifter
Shapeshifter tool can import VectorDrawable XML file and export back to SVG file
Have a look at this Convert VectorDrawable to SVG
The Vector Drawable format is pretty similar to SVG. With just a few modifications you can turn your xml drawable back to SVG
Credits to this guy who made this python script that coverts xml drawables back to SVG https://gitlab.com/Hyperion777/VectorDrawable2Svg
I have a few buttons in my app where I have applied circular PNG images on them but the edges gets pixelated. I don't know how to nine patch a circular image. If anybody knows a different way of doing it?
you can use following code to have circle image:
add this on drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#2085c226"/>
<stroke android:width="2sp" android:color="#85c226" />
</shape>
then in your code
android:background="#drawable/name_of_xmlfile"
One reason why android may try to scale your images is if you don't have them ready for your screen density. Make sure that you have your png image in res/drawable-xxhdpi, res/drawable-xhdpi, res/drawable-mdpi - all screen densities you are planning to support.
Note that xxhdpi is not mentioned in android documentation and the folder is not created by default but you need it if you are planning to support xxhdpi screens.
You didn't provide enough information e.g screen shot? code? but any ways you should use nine patch images if you are not providing separate image in each drawable directory. For further detail Go to This link. Hope this will help you.
I have one big image named panel_bck.jpg to use in different resolutions to decrease apk size. The image format is JPG and it's size is 1.9MB. I put it to default drawable folder only. But when I set the background in code, the BitmapFactory can't find the image at
drawable/panel_bck.jpg
and the result is all black background. I tested this case with other images(PNG files, JPG files) and there is no problem with them. Only question is that a limitation exist for the drawable size or what is the problem? How can I solve this?
If your image very big resoulation you will set drawable-xxhdpi directory only.
I had a problem like yours trying to maka a big image fit into a too small ImageView and I fixed my problem by using this line in the layout xml file:
android:adjustViewBounds="true"
I don't know if it can ba applied to an activity background though.
You should use 9patch image. You can create 9patch image by using the tool called draw9patch located in sdk/tools. First create a large resolution image and give to draw9patch it will create a 9patch image with extension .9.png add that image in drawable it will solve you problem.
See following links for detail
http://developer.android.com/tools/help/draw9patch.html
http://codesignature.com/how-to-design-9-patch-buttons-for-android-using-adobe-photoshop-for-all-pixel-densities-and-states/