I was wondering how can I make toolbar like this
as you can see, there is an arc on the toolbar and it's archor the views to it , I tried to use an image for this , but it doesn't right I think and the result was bad
could you help me to do so ?
For the toolbar background use following drawable ,
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="8dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#3083af"
android:pathData="M24 24v-24h-24v24a20 36 0 0 1 24 0z"/>
</vector>
Related
I want to create the shape rectangle as shown below the Image.
what am I supposed to do?
with best regards.
Using <vector>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="8dp"
android:viewportWidth="24.0"
android:viewportHeight="50.0">
<path
android:fillColor="#8CCC13"
android:pathData="M24 24v-24h-24v24a20 36 0 0 1 24 0z" />
</vector>
see below Output :
I want to move the arrow a little to the right.
You can edit your icon to move it a little to the right.
If you use Raster image, just use image editor, which you like and move it.
If you use Vector image, you can wrap your path data with group and add scale and pivot to the image:
Initial vector file:
<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="#FF000000"
android:pathData="M8,5v14l11,-7z" />
</vector>
Image moved to the right:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group
android:pivotX="-30"
android:scaleX="0.95"
android:scaleY="0.95">
<path
android:fillColor="#FF000000"
android:pathData="M8,5v14l11,-7z" />
</group>
</vector>
FAB now looks in a next way:
You can move your image to any side using pivotX and pivotY.
No corresponding attribute.
Only possible via editing drawables.
Way to alter vectors on Android ref.
Is it possible to make this shape for background of components?
I recommend using a <vector> drawable for this.
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="8dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFff0000"
android:pathData="M24 24v-24h-24v24a20 36 0 0 1 24 0z"/>
</vector>
Playing around with the first two numbers after the "a" (i.e a20 36) will let you control the exact shape of the curve.
You should use a nine patch for this image. You can use AndroidAssetStudio to generate nine patch from any source created by Roman Nurik.
I want to set the color code in vector drawable from colors.xml file of res folder.
You can simply use
android:fillColor="#color/colorRated"
But it may not work for some low android version device. Thats why usually i use direct xml color.
android:fillColor="#9ec8e6"
So, finally it looks like:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="24"
android:viewportHeight="24"
android:width="48dp"
android:height="48dp">
<path
android:pathData="M23.7 12A11.7 11.7 0 0 1 12 23.7 11.7 11.7 0 0 1 0.30000019 12 11.7 11.7 0 0 1 12 0.30000019 11.7 11.7 0 0 1 23.7 12Z"
android:fillColor="#9ec8e6" />
</vector>
Pro-grammatically,
DrawableCompat.setTint(myImageView.getDrawable(), ContextCompat.getColor(context, R.color.your_color));
or through xml use fillColor
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">
<path
android:fillColor="#color/your_color"
android:pathData="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
Note: Use hard-coded color(i.e #000) instead of, #color/your_color as sometimes, they don't work on lower devices.
You need to use android:tint="#color/some_color" in order to fill the color on vector drawable
Lets assume you have a ImageView where you want to use the vector, you can do something like that
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bg_vector"
android:tint="#color/some_color"/>
I am creating drawable in xml using the vector. I am able to draw a rectangle using the path but when I am trying to draw a completely vertical or horizontal line its not showing.
Here is my code
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:strokeWidth="1"
android:strokeColor="#c1ae1e"
android:pathData="M0 0,H24,V24,H0,V0"/>
<path
android:strokeWidth="3"
android:strokeColor="#4c4c4c"
android:fillColor="#36352c"
android:pathData="M12 0,L12 24"/>
<path
android:strokeWidth="3"
android:strokeColor="#4c4c4c"
android:fillColor="#36352c"
android:pathData="M0 12,L24 12"/>
</vector>
And here is the preview output-
Try combining it into one path. I'm not sure why, but having a completely horizontal or vertical line with only two points will not render. Since I had to make a cross shape, I was able to get away with combining both the vertical or horizontal lines like so:
<path
android:strokeColor="#FF000000"
android:strokeWidth="0.5"
android:pathData="M14,0 l0,28 M0,14 l28,0"/>
This will also happen if you make an arc that calculates to be a straight like (not something most people would do, but I've seen it while changing arc values, and might be related as to why the lines do not show)
Give this a try:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:strokeWidth="1"
android:strokeColor="#c1ae1e"
android:pathData="M0 0,H24,V24,H0,V0"/>
<path
android:strokeWidth="3"
android:strokeColor="#4c4c4c"
android:fillColor="#36352c"
android:pathData="M12 0,L12 24 M0 12,L24 12"/>
</vector>