Develop Reference

How to format/size VectorDrawable for adaptive icon in android

I am trying to create an adaptive icon for an app using two VectorDrawables for background and foreground. However the foreground vector, which was created from an svg made in Illustrator, cannot be sized or placed properly in the icon.
Foreground vector for future reference
I sized the vector viewportheight and viewportwidth to 108dp x 108dp according to the specification in the Adaptive icon guidelines, however this has only caused the foreground to be offset.
<vector android:height="108dp" android:viewportHeight="108"
android:viewportWidth="108" android:width="108dp"
xmlns:aapt="http://schemas.android.com/aapt" xmlns:android="http://schemas.android.com/apk/res/android">
...
</vector>
However when the viewportheight and viewportwidth are set to smaller values (eg. 50) the vector appears in the correct position but is too large.
<vector android:height="108dp" android:viewportHeight="50"
android:viewportWidth="50" android:width="108dp"
xmlns:aapt="http://schemas.android.com/aapt" xmlns:android="http://schemas.android.com/apk/res/android">
...
</vector>
I am new to working with android and so I am not sure what other factors may be causing this. There was a another similar question however the cause for the offsetting effect was not addressed.

Wanting to minimize my app size I attempted using the same vector for a notification as well as the icon and hit exactly the same problem.
I tried the "wizard":
Right-click the res folder and click New > Image Asset
This then lets me scale my vector on top of the background vector, but centered.
Looking at the generated vector files for the icon it nests my vector path inside a group tag with translateX and translateY attributes, like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportWidth="52.173912"
android:viewportHeight="52.173912">
<group android:translateX="14.086957"
android:translateY="14.086957">
<path.../>
</group>
</vector>
Try that directly in your xml if you want to avoid generating files, and deleting the generated png files afterwards etc.
That may work for you - in my case I can't use the new icon foreground vector as a notification as it is too small. So I appear to need copies of my scalable vector graphic with different sizes!
It would be ideal if we could scale the foreground/background parts of an adaptive icon in the adaptive icon file itself - perhaps somebody knows how to do that already?

android:pivotY doesnt add top-padding to my android vector drawable

I have compactTextView with compoundDrawable.
I want to add top padding to that compoundDrawable which is fed by vector image (I imported svg into android studio)
I saw this post on how to add padding to a vector drawable
but when i try this, no padding is added:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="13dp"
android:height="8dp"
android:autoMirrored="true"
android:viewportHeight="8.11"
android:viewportWidth="13.44">
<group
android:pivotX="0"
android:pivotY="12"
android:scaleX="1"
android:scaleY="1">
<path
android:fillColor="#FF000000"
android:pathData="M6.71,8.12l-6.71,-6.7l1.42,-1.42l5.29,5.3l5.29,-5.3l1.42,1.42z"/>
</group>
</vector>
do I need to add anything else?

The linked solution works by scaling down the path inside your VectorDrawable.
In the other example the viewPortWidth and viewportHeight were 24.
The pivotX and pivotY are the origin for the transform. It's equivalent to transform-origin in CSS. So thus setting the scaleX and scaleY to 0.5, results in their icon scaling down from 24x24 to 12x12, with the centre at the pivot point (12,12).
Thus you end up with a 12x12 icon in the middle of a 24x24 VectorDrawable. Thus creating a padding of 6 around the entire thing.
In your icon you have the scale attributes set to 1. So no scaling will happen, and you won't create any padding.
Are you sure you want to create padding space in your icon? The normal way to introduce padding is via your layout. For instance with android:layout_marginTop or android:paddingTop. I recommend you consider that approach first.
If you really do want to adjust your VectorDrawable. Then what you want to do to create padding only at the top, is to scale the shape down towards the bottom of the icon.
So have your pivot point at the bottom of the icon:
android:pivotX="0"
android:pivotY="8.11"
and scale down by an appropriate amount
android:scaleX="0.5"
android:scaleY="0.5"
Here we are scaling down toward the bottom left of the icon, so we are therefore also going to create padding on the right. Because we are also scaling in the X direction. You could counter that by reducing the width and viewportWidth.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="7dp"
android:height="8dp"
android:autoMirrored="true"
android:viewportWidth="6.72"
android:viewportHeight="8.11">
<group
android:pivotX="0"
android:pivotY="8.11"
android:scaleX="0.5"
android:scaleY="0.5">
<path
android:fillColor="#FF000000"
android:pathData="M6.71,8.12l-6.71,-6.7l1.42,-1.42l5.29,5.3l5.29,-5.3l1.42,1.42z"/>
</group>
</vector>
You could also prevent the extra padding on the right by leaving scaleX at "1", but that will result in your icon having the appearance of being squashed vertically.
The translation approach
Another approach would be just to move the icon vertically downwards, to create space at the top, instead of scaling it in size. This has the advantage that you can more explicitly set the padding you want.
You do that by using the translateY attibute. Obviously that means that the height of the VectorDrawable has to change also. So you have to handle that by adjusting the viewportHeight.
In the example below, I have added a vertical padding of 4, mening the viewport height of the icon goes from 8.11 to 12.11.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="13dp"
android:height="12dp"
android:autoMirrored="true"
android:viewportWidth="13.44"
android:viewportHeight="12.11">
<group
android:translateY="4">
<path
android:fillColor="#FF000000"
android:pathData="M6.71,8.12l-6.71,-6.7l1.42,-1.42l5.29,5.3l5.29,-5.3l1.42,1.42z"/>
</group>
</vector>
If you do this, you may also need to adjust the android:width and/or android:height.
You can choose to either:
increase the android:height as well to match the extra padding (ie to "12"), or
keep the height at 8, and adjust the width down to compensate (eg "9").

android create drawable that is intersection between circle and rectangle

I would like to create an android xml drawable. That is the intersection between a circle and a rectangle.
Basically, i would like to have a rectangle. And then on the corner of this rectangle, draw a circle.
I would like to have the intersection of these two shapes to be used for a background.
This circle should have a radius slightly less than the height of the rectangle. So the intersection is not just 1/4 of the circle.
Is this something that can be created in a XML drawable in android?
Here is a very poorly drawn image using a trackpad..
The rectangle is what I would like to have for my background image. The shaded area should be able to have some color that I can change manually in the xml.

I would use a <vector> drawable here.
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="80dp"
android:viewportWidth="48"
android:viewportHeight="80">
<path
android:pathData="M48 0 a80 80 0 1 0 0.1 0z"
android:fillColor="#caf"/>
</vector>
You can then apply this to your layout using the android:background attribute:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_rect_intersection"
...>
You can even tint it (to get different colors) using android:backgroundTint on your root view.

Understanding Android's VectorDrawable properties

I need help understanding some of the properties of VectorDrawable that is defined by XML.
When i import a new vector asset using Android Studio, It generates something like:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#000000"
android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z" />
</vector>
By default the width, height, viewportHeight and viewportWidth are being set to some default Material design value.
Since we are dealing with vectors and not pixel images. My questions are:
why is it required to set a size (width, height, etc)?
If i need to use the same vector xml for multiple sizes, how to override this 24dp value without creating multiple vector xml's which of course defeats the whole purpose!

Adding #dimen in xml vector gives error
Error:Error: Width (0) and height (0) cannot be <= 0

VectorDrawables can be used in places where you would previously have used a png. If the VectorDrawable didn't have a width and height you would be creating a whole new problem, if you didn't define the size of the VectorDrawable as part of the original xml, you would have to make sure it was defined every time you wanted to use it.
This would make using a VectorDrawable a lot different to using other drawables, for example using "wrap_content" would not work, because you are relying on the 'content' to define what size things should be. That means you wouldn't be able to just replace a png with a VectorDrawable like you can now, it would cause parts of your app to break.
If you want to make your VectorDrawable a different size for different device configurations you can define it by using a reference to resources.
<vector ...
android:width="#dimen/vector_size"
android:height="#dimen/vector_size"
.../>
Then defining this in res/values:
<resources>
<dimen name="vector_size">24dp</dimen>
</resources>
You can then specify vector_size as a different value for different device configurations in the usual way.
If you want to use the same VectorDrawable with multiple sizes on the same device, that's a bit more difficult at the moment and you may be best to create multiple versions. If doing this you may consider moving the pathData to a string resource:
<path ...
android:pathData="#string/vector_path_name"/>
This way, even though you have multiple VectorDrawables, they all refer to the same pathData that defines their shape and if you change that string, you'll be updating all of the versions.

The size defined in XML is only the "intrinsic" size for the drawable. You can draw it at any size you want. If you intend to draw the same vector at multiple sizes, you should inflate a separate instance of VectorDrawable for each size, and call setBounds(0,0,desiredWidth,desiredHeight) on each. You may already be used to having to call setBounds for many usages.

viewportHeight and viewportWidth define the resolution of image and height and width defines how much space it will take on screen when rendered.
All you need to know is:
if you want to display an high quality image on small area like 54x54 then you should get a high quality image like 380x380 or 512x512 then set its width and height to 54x54, otherwise your image wont have smooth corners and it wont look good

how to show dotted border to table layout

I am new in android, want to show border in tablelayout.
can any one please help me, it is very critical for me.

Try setting a ShapeDrawable as the background of the elements you want a border on. You can define a ShapeDrawable in an XML file in your res/drawables folder. In particular, the stroke element has the dashWidth and dashGaps parameters that let you make a dashed line:
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
You can also just set a repeating dots image as the background of the entire table, then set a solid background and margin on the cells (see this trick, which is written about solid borders but I'm sure you can fake with a 2x2 repeating bitmap of a checkerboard pattern).