Android Vector drawable from psd has empty preview - android

I was trying to add a vector drawable to Android studio
Using the vector asset in Android studio, I've imported a psd file, it but it seems like there is a rendering problem as the preview and the result xml file are empty, please check the
output xml screenshot.

In your screenshot there is no pathdata in the file. Hence, nothing is drawn on screen. I am showing contents of a VectorDrawable xml file. Copy the contents into a blank xml file in android studio and see the shape drawn in blue on screen.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="600dp"
android:height="600dp"
android:viewportWidth="800.0"
android:viewportHeight="800.0">
<path
android:pathData="M 162 8
q -07 00 -41 26
q -34 27 -50 64
q -25 59 -19 117
q 07 70 53 121
q 57 63 151 62
q 87 -01 140 -66
q 46 -55 48 -142
q 01 -56 -34 -105
q -38 -52 -77 -70
l -29 -11
q 16 -01 31 -02
q 59 -01 119 -02
"
android:strokeLineCap="round"
android:strokeColor="#f00f"
android:fillColor="#00000000"
android:strokeWidth="32"/>
</vector>

Related

Make an arrow shape both side with xml

I want to make a button shape like this
Is there a way to do this with XML?
Actually I am looking for like this
It is not exactly what you are looking for, because it is not with realized with a XML. However with the new MaterialButton it is very simple to obtain it:
Just define the Button in your layout:
<com.google.android.material.button.MaterialButton
app:cornerRadius="0dp"
android:paddingLeft="24dp"
android:paddingRight="12dp"
.../>
Then just use the ShapeAppearanceModel to define a custom shape.
float size = getResources().getDimension(R.dimen.cutout_size); //18dp
TriangleEdgeTreatment triangleEdgeTreatment = new TriangleEdgeTreatment(size,true);
CutCornerTreatment cutCornerTreatment = new CutCornerTreatment(size);
button.setShapeAppearanceModel(button.getShapeAppearanceModel()
.toBuilder()
.setLeftEdge(triangleEdgeTreatment)
.setTopRightCorner(cutCornerTreatment)
.setBottomRightCorner(cutCornerTreatment)
.build());
Using more buttons (use button.setBackgroundTintList(..) or app:backgroundTint="..." in xml to change the backgroundColor) you can obtain something like:
I have achieved this by vector.
#KinjalShah Please look into this.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="138.25dp"
android:height="23dp"
android:viewportWidth="138.25"
android:viewportHeight="23">
<path android:pathData="M132.53,22.48l-132.27,0l5.36,-10.95l-5.36,-10.94l132.27,0l5.36,10.94z">
<aapt:attr name="android:fillColor">
<gradient
android:endX="137.8946"
android:endY="11.535"
android:startX="0.2646"
android:startY="11.535"
android:type="linear">
<item
android:color="#3b0b7b"
android:offset="0" />
<item
android:color="#6244A5"
android:offset="1" />
</gradient>
</aapt:attr>
</path>
</vector>
You can make drawable for this, this is below code which exactly you want, for the process how i have created this, you can check here in the link https://stackoverflow.com/a/57443999/7216511
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="1870"
android:viewportHeight="490"
android:width="187dp"
android:height="49dp">
<path
android:pathData="M0 245l0 -245 935 0 935 0 0 245 0 245 -935 0 -935 0 0 -245z"
android:fillColor="#F99E3F" />
<path
android:pathData="M1 245l0 -245 934 0 935 0 0 245 0 245 -935 0 -934 0 0 -245z"
android:fillColor="#E4CFBA" />
<path
android:pathData="M4 378c6 -136 6 -117 0 -260l-5 -118 935 0 936 0 0 245 0 245 -936 0 -935 0 5 -112z"
android:fillColor="#D5D5D5" />
<path
android:pathData="M4 378c6 -136 6 -117 0 -260l-5 -118 935 0 936 0 0 50c0 28 -5 50 -10 50 -7 0 -7 6 0 19 6 12 10 92 9 195l-1 176 -934 0 -935 0 5 -112zm1811 -57l34 -69 -35 -76 -35 -76 -879 0c-484 0 -880 2 -880 5 0 3 15 36 34 73l34 68 -33 72 -34 72 879 0 880 0 35 -69z"
android:fillColor="#E5DBCF" />
<path
android:pathData="M4 378c7 -138 7 -128 0 -265l-6 -113 936 0 936 0 0 50c0 28 -5 50 -10 50 -7 0 -7 6 0 19 13 25 13 227 0 252 -7 13 -7 19 0 19 5 0 10 22 10 50l0 50 -936 0 -936 0 6 -112zm1811 -58l35 -70 -34 -75 -35 -75 -880 0c-485 0 -881 3 -881 8 1 4 16 36 34 72l34 65 -34 67c-19 37 -34 70 -34 73 0 3 396 5 880 5l880 0 35 -70z"
android:fillColor="#EEEEEE" />
</vector>

changing vector drawable color

I converted the png file to SVG and got it from http://inloop.github.io/svg2android/ to find the vector path information.
I have been trying to support from api level 21 to get the right resolution for all screen sizes by using vector drawables. (My app`s minSdk is 21)
The problem is that the text is white and the background color is transparent, but I am trying to change it using the fillColor attribute or strokeColor, but somehow not working well.
how do I achieve this? I want text`s color is white and other background is transparent.
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="386.000000dp"
android:height="149.000000dp"
android:viewportWidth="386.000000"
android:viewportHeight="149.000000"
>
<group
android:translateY="149.000000"
android:scaleX="0.100000"
android:scaleY="-0.100000"
>
<path
android:strokeColor="#FFFFFF"
android:strokeWidth="3"
android:pathData="M0 745 l0 -745 1930 0 1930 0 0 432 0 432 -45 -72 c-85 -138 -151 -202 -209 -202 -65 0 -85 40 -87 175 -2 140 -18 161 -77 97 -46 -50 -153 -224 -155 -252 -1 -18 -7 -20 -37 -18 l-35 3 2 80 c2 44 5 91 9 105 5 24 5 23 -17 -5 -44 -60 -135 -147 -171 -166 -49 -25 -112 -25 -138 1 -29 29 -33 61 -17 138 l14 70 -60 -44 c-32 -24 -63 -44 -68 -44 -5 0 -6 -19 -3 -42 11 -86 -57 -158 -148 -158 -39 0 -54 5 -73 25 -14 13 -25 31 -25 39 0 24 48 74 100 103 l48 27 -31 57 -31 56 -54 -44 c-30 -25 -65 -50 -78 -55 -20 -10 -23 -16 -18 -52 10 -84 -58 -156 -148 -156 -39 0 -54 5 -73 25 -14 13 -25 31 -25 39 0 24 48 74 100 103 l49 27 -26 46 -26 46 -81 -81 c-99 -100 -170 -138 -266 -143 -55 -3 -70 0 -100 20 -96 65 -67 247 51 325 33 22 56 28 110 31 63 4 70 2 95 -23 22 -22 25 -32 21 -62 -11 -64 -79 -113 -184 -134 -70 -13 -79 -28 -44 -70 16 -20 28 -24 68 -23 67 1 142 43 229 129 59 59 72 78 78 114 7 48 52 101 84 101 27 0 55 -34 48 -58 -4 -10 -17 -29 -31 -42 l-24 -23 32 -58 c18 -32 34 -59 37 -59 3 0 36 23 73 51 55 40 73 61 92 104 35 79 83 106 119 66 21 -23 15 -49 -19 -81 l-25 -23 32 -56 c17 -31 33 -58 34 -60 2 -2 33 18 69 43 67 48 101 88 91 104 -7 11 60 26 74 17 15 -9 12 -70 -7 -163 -16 -75 -16 -83 -1 -98 21 -21 45 -13 106 35 64 51 160 179 158 211 -1 18 6 27 25 34 15 5 35 6 44 2 16 -6 17 -16 11 -99 l-7 -92 49 75 c65 101 114 142 166 138 62 -5 77 -33 83 -164 5 -106 14 -144 33 -144 20 0 78 62 130 139 47 69 58 80 78 76 l22 -5 0 310 0 310 -1930 0 -1930 0 0 -745z m499 358 c-30 -38 -44 -42 -145 -43 l-101 0 -12 -62 c-7 -35 -15 -74 -18 -87 l-6 -24 79 6 c44 3 88 9 97 13 23 8 21 -8 -4 -40 -19 -24 -26 -26 -99 -26 l-79 0 -12 -57 c-20 -98 -18 -115 16 -132 24 -12 42 -12 100 -3 38 6 80 14 93 18 13 4 22 2 22 -4 0 -6 -10 -22 -22 -36 -26 -29 -94 -46 -189 -46 -122 0 -138 23 -111 163 l19 98 -23 -5 c-12 -3 -30 -9 -40 -13 -17 -6 -16 -4 2 28 13 22 29 35 46 37 23 3 27 10 38 65 6 34 14 73 17 86 5 22 4 23 -28 16 -19 -4 -47 -14 -62 -22 -16 -8 -31 -12 -34 -10 -6 7 24 64 39 74 7 4 90 11 183 14 94 3 187 6 209 7 35 2 37 1 25 -15z m2587 -21 c-18 -34 -91 -92 -117 -92 -40 0 -31 56 10 65 15 3 47 19 71 35 24 16 46 28 48 26 2 -2 -3 -18 -12 -34z m-2037 -47 c25 3 57 9 70 12 23 6 24 5 17 -42 -4 -26 -10 -54 -13 -62 -4 -10 6 -8 36 8 51 26 129 23 162 -7 98 -87 40 -283 -101 -342 -22 -9 -57 -13 -101 -10 l-67 4 -17 -84 c-9 -46 -15 -98 -13 -115 3 -31 2 -32 -37 -32 -39 0 -40 1 -43 35 -2 20 11 100 28 179 16 79 30 147 30 150 0 3 -14 -11 -31 -32 -86 -104 -211 -116 -282 -26 l-24 31 -25 -44 c-14 -23 -31 -61 -39 -83 -7 -22 -17 -44 -21 -49 -11 -14 -48 24 -48 49 0 23 67 132 95 155 13 10 12 17 -4 48 -10 21 -27 63 -37 96 l-18 58 23 19 c34 27 61 25 61 -6 0 -31 39 -135 50 -135 15 0 61 67 75 107 10 30 19 39 40 41 63 8 50 -45 -35 -141 -28 -30 -50 -59 -50 -64 0 -5 10 -19 23 -30 60 -55 102 -53 172 9 60 53 100 113 109 163 4 22 9 48 12 58 4 14 -1 17 -35 17 -37 0 -71 19 -71 40 0 5 -3 15 -6 24 -5 13 0 13 32 5 20 -6 58 -8 83 -4z m769 -95 c2 -17 -6 -34 -22 -49 -25 -23 -27 -24 -45 -7 -18 16 -21 16 -50 1 -44 -22 -115 -116 -162 -212 -37 -76 -43 -83 -70 -83 -18 0 -32 6 -36 16 -3 8 4 65 17 126 12 61 22 132 23 157 1 25 6 49 12 53 17 13 65 9 71 -6 3 -8 -1 -50 -9 -93 -8 -43 -14 -79 -12 -81 1 -2 13 14 26 35 31 50 106 131 144 155 19 12 44 17 70 16 34 -3 40 -6 43 -28z" />
<path
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:pathData="M1163 894 c-48 -24 -59 -42 -77 -134 -21 -112 -22 -109 20 -126 88 -37 184 44 184 156 0 52 -24 98 -56 110 -32 13 -33 13 -71 -6z" />
<path
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:pathData="M1995 930 c-32 -13 -75 -65 -90 -106 -7 -22 -10 -40 -5 -42 22 -8 93 22 125 52 60 57 39 125 -30 96z" />
<path
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:pathData="M2329 656 c-41 -28 -53 -48 -36 -65 28 -28 86 5 90 53 3 38 -11 41 -54 12z" />
<path
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:pathData="M2639 656 c-41 -28 -53 -48 -36 -65 28 -28 86 5 90 53 3 38 -11 41 -54 12z" />
</group>
</vector>
Thanks in advance for any help!
Use this class
private class VectorDrawableUtils {
Drawable getDrawable(Context context, int drawableResId) {
return VectorDrawableCompat.create(context.getResources(), drawableResId, context.getTheme());
}
Drawable getDrawable(Context context, int drawableResId, int colorFilter) {
Drawable drawable = getDrawable(context, drawableResId);
drawable.setColorFilter(ContextCompat.getColor(context, colorFilter), PorterDuff.Mode.SRC_IN);
return drawable;
}
}
And call it like this
new VectorDrawableUtils().getDrawable(mContext,R.drawable.x,R.color.black);
It's possible to make it so, however, you have to manually change your vector.
Currently, first path contains all letters and rectangle background.
To make all letter white you can use should extract letter in separate path and set fillColor for it. And so on.
BTW, why don't you use custom font for the purpose of text drawing? I think it is much more flexible and better in terms of performance.
Change Fill color if you want to change inside color
If you want change stroke color then change it's color

Android - SVG file import

I want to use svg drawable with Android Studio. I use drawable->New->Vector Asset->Local File, but it doesn't import my svg file. I try this file with svg2android it throws some warnings.
Warning #1: stroke-width not found on path one or more times. Defaulting all instances to 1.
Warning #2: transforms on path are not supported, use option Bake transforms into path
Generated xml file is below:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportWidth="100"
android:viewportHeight="100">
<path
android:strokeColor="#66899a"
android:strokeWidth="1"
android:pathData="M 0 -44 C 3.31370849898 -44 6 -24.3005289926 6 0 C 6 24.3005289926 3.31370849898 44 0 44 C -3.31370849898 44 -6 24.3005289926 -6 0 C -6 -24.3005289926 -3.31370849898 -44 0 -44 Z" />
<path
android:strokeColor="#e1d85d"
android:strokeWidth="1"
android:pathData="M 0 -44 C 3.31370849898 -44 6 -24.3005289926 6 0 C 6 24.3005289926 3.31370849898 44 0 44 C -3.31370849898 44 -6 24.3005289926 -6 0 C -6 -24.3005289926 -3.31370849898 -44 0 -44 Z" />
<path
android:strokeColor="#80a3cf"
android:strokeWidth="1"
android:pathData="M 0 -44 C 3.31370849898 -44 6 -24.3005289926 6 0 C 6 24.3005289926 3.31370849898 44 0 44 C -3.31370849898 44 -6 24.3005289926 -6 0 C -6 -24.3005289926 -3.31370849898 -44 0 -44 Z" />
<path
android:strokeColor="#4b541f"
android:strokeWidth="1"
android:pathData="M 0 -44 C 24.3005289926 -44 44 -24.3005289926 44 0 C 44 24.3005289926 24.3005289926 44 0 44 C -24.3005289926 44 -44 24.3005289926 -44 0 C -44 -24.3005289926 -24.3005289926 -44 0 -44 Z" />
Does android support fully svg? If yes, how can I import this file? Also, I want to set background drawable programmatically. Is it possible without using R.drawable.svgXml? Can I generate bitmap from xml?
Does android support fully svg?
Obviously not, otherwise it would not show you those warnings that state "X not supported".
You have to change the SVG if you want to use it.
Can I generate bitmap from xml?
See here How to get a Bitmap from a drawable defined in a xml?

How to make border of LinearLayout in android as per following design

I have uses shape drawable to get rounded coreners but adding a semicircle in between seems tricky.
you can use vector asset studio to draw a custom shape and use it as background for your layout
https://developer.android.com/studio/write/vector-asset-studio.html
You can use Vector Drawable to achieve your end result. I used potrace to convert your image into svg format which is included at the bottom.
Use the Android Studio to create a vector drawable from this svg file.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="271.000000pt" height="263.000000pt" viewBox="0 0 271.000000 263.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,263.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M225 2546 c-40 -17 -84 -63 -101 -103 -12 -27 -14 -228 -14 -1140 0
-1093 0 -1107 20 -1149 12 -24 39 -54 62 -70 l41 -29 456 -3 c251 -2 471 0
489 3 23 4 32 11 32 25 0 11 7 20 15 20 8 0 19 16 25 39 14 54 79 124 142 152
74 33 191 33 265 0 61 -27 125 -92 142 -144 7 -21 17 -37 22 -37 5 0 9 -18 9
-40 0 -40 7 -49 25 -31 6 6 151 11 345 13 l335 3 36 24 c20 14 47 41 60 60
l24 35 3 1105 c1 608 0 1121 -3 1139 -8 42 -59 100 -110 123 -36 17 -73 19
-392 19 l-353 0 0 -35 c0 -24 -5 -35 -15 -35 -8 0 -24 -20 -36 -45 -25 -53
-74 -99 -138 -128 -36 -16 -66 -21 -136 -21 -79 -1 -97 3 -147 27 -90 44 -148
127 -148 211 l0 26 -462 0 c-361 -1 -470 -4 -493 -14z m920 -93 c13 -44 28
-67 70 -109 182 -177 521 -113 592 112 l17 54 335 0 c375 0 383 -1 428 -69
l23 -34 -2 -1113 -3 -1112 -25 -27 c-51 -55 -54 -55 -399 -55 l-319 0 -7 32
c-19 86 -84 160 -180 205 -52 24 -73 28 -150 28 -82 0 -97 -3 -157 -33 -84
-41 -143 -105 -164 -179 l-15 -53 -460 0 c-497 0 -487 -1 -539 55 l-25 27 -3
1111 c-2 1096 -2 1112 18 1145 11 18 34 41 52 52 32 19 52 20 465 20 l432 0
16 -57z"/>
</g>
</svg>

Android Optimal Buffer Size

In java there is an optimal buffer size of 32 Kb which is based solely on the cpu architecture being used. On Android phones does the Dalvik VM dynamically know the proper cache of the cpu to get the largest buffer size independent of the many different phones out there? If so how would I figure that out at runtime?
Say I want to optimize a audio recording activity by making the buffer the largest it can be and also the fastest. I know you can get the minimal size for it but what about the optimal size?
Maybe it depends on what device you have or mind.
However, experimentally, 8K < buffer size < 32K does work well and there are significant performance improvements under 8K. Somewhat interesting is that some data with buffer > 64K showed poorer performance than data with under 64K buffer
(I've tested on several android devices and tried to read 20MB binary file with various buffer size.)
Here's exp result and you'd better to paste them to spreadsheet if you wanna convert data in pretty form. header means buffer size and units are millisecond
graph: http://fb.com/photo.php?fbid=468345876512381
128 256 512 1K 2K 4K 8K 16K 32K 64K 128K 256K 512K 1M 2M 4M 8M 16M
Galaxy S 4047 3060 269 155 100 65 64 52 51 45 47 50 49 43 44 46 45 58
Optimus LTE 1178 617 322 172 101 65 47 42 41 35 36 39 44 61 56 51 72 60
HTC EVO 3971 1884 941 480 251 141 95 69 56 50 48 55 50 49 48 48 48 47
Galaxy S2 750 383 210 123 74 50 41 37 35 34 34 37 39 44 46 44 45 44
Galaxy Nexus 2272 1216 659 341 187 108 70 52 41 38 38 45 44 54 56 66 68 58
Galaxy Note 1549 799 404 220 127 75 58 54 52 56 52 45 44 62 43 39 44 46
InputStream in = openFileInput(FILE_NAME);
startTime = System.currentTimeMillis();
while (in.read(buffer) > 0) {
readCount++;
}
elapsedTime = System.currentTimeMillis() - startTime;

Categories

Resources