Develop Reference

Xamarin Android, How do you go about rotating a Vector Drawable?

Edit: see my own answer, I have added more detail as I have managed to get an animation working through XMLs, I cannot see why the code I have isn't doing the same thing.
I'm trying in Xamarin Android (not Forms) to display a couple of Vector Drawables and have one of the rotate on the other. The idea is a timer, a single hand going around a clock. I'm after the hand to appear to do a couple of full rotations then stop at a random angle. So it could stop at say 3 o'clock or 10 o'clock when it is done rotating.
I would have thought what I am trying to do would be done programmatically rather than via XMLs however I cannot find any good information to start me off on this. I'm not that familiar with base Android (I'm quite familiar with Xamarin Forms).
I can get both the face and the hand to display in an ImageView control. This I have done with both a layer-list.xml and a LayerDrawable. I have tried creating a RotateDrawable from the hand with a fromRotation and a toRotation set then applying that to LayerDrawbale. It does draw but not rotated.
The same applies in the layer-list xml, both draw, the hand is without rotation.
I have tried searching here and google, I cannot find anything solid so far to get me started. just snippets of XMLs. I feel I'm missing something very fundamental.
Any help is massively apricated.
This is the xml for the layerlist
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:drawable="#drawable/Clock"/>
<item>
<rotate
android:drawable="#drawable/Needle"
android:pivotX="50%"
android:pivotY="1%"
android:fromDegrees="0"
android:toDegrees="1080"
/>
</item>
</layer-list>
The code for the setting the layer-list to a Imageview.
ImageView clockDisplay = FindViewById<ImageView>(Resource.Id.ThreePlayers);
Drawable clock = VectorDrawableCompat.Create(Resources, Resource.Drawable.Clock, null);
clockDisplay.SetImageDrawable(clock);
/*
I have also used the following to no avail.
RotateDrawable clockRotate = new RotateDrawable();
clockRotate.Drawable = needle;
clockRotate.FromDegrees = 180;
clockRotate.ToDegrees = 180;
clockDisplay.SetImageDrawable(clockRotate);
*/
Cheers
Andy.

Edit: I've changed this answer completely from what it was.
from the suggestions in the comments of the main post, I have got the rotation working by rotating the image view.
I have created a test program here
that animates an ImageView with an AnimationSet and OhectAnimator, one using a Spring Animator and one that attempts to Animate the VectorDrawable directly in C#
The 1st two work as expected and is good enough for the project I am working on as all I need is rotation.
However is it not possible to Animate a VectorDrawable in C# without having animate the ImageView control?
If I creating a static animation in XMLs I could manipulate different layers of the VectorDrawable and Animate them Separately, surely this is possible to do in C#?
I'm starting to think it is not possible to do programmatically.|
Any advice?
Thanks.
Andy.

Android complex seekbar

I need to create a seekbar that has custom background and custom thumb image. The problem is that background is kind of complex and i can't really create nice 9patch out of it.
Seekbar should have 3 values (0,1,2) and each value is represented by an image. Thumb should be centered around image of current value. Picture shows the seekbar with value "1" selected:
Problems I had were:
to create a 9patch from background and keep edge and central image from moving / scaling.
create a thumb that will always be in right scale compared to images representing different values.
How can I do this?
Edit
In short: I'm having troubles to make sure seekbar fills entire width of the screen (regardless of screen size), but again to make sure "ring" (thumb) will always fit perfectly around each "value" image.

I am not quite sure I understand your problem, but you can create a bitmap xml to avoid resizing on your background pictures:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/mydrawable"
android:tileMode="disabled"
android:gravity="top" >
</bitmap>
If you are having troubles with arranging the items/pictures, you can always play with a relative layout's diferent params.

Create a pattern along the bottom edge of a view

I would like to have a pattern along the edge of a view. For this particular case, I would like it to be a jagged edge (like tearing parchment paper or tinfoil out of a roll). I would prefer a more general solution - perhaps at some point I would like waves along the top of a view, or a binder coil down the side. I would prefer to have some kind of repeating image rather than stretching an image.
Edit:
I would like a the pattern to occur just around the edge of the view (perhaps only on one edge). For example, a tear mark on the bottom or top of a receipt. The tear should not repeat up or down the image, just at the bottom edge.

Create a drawable (pattern_tile.xml) with the root element of a <bitmap>. Like this for instance:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:src="#drawable/bgnoise_lg"
android:tileMode="repeat" >
</bitmap>
And the drawable image used in the code above is:
Then, in your XML, you set it like you set the usual background using this attribute:
android:background="#drawable/pattern_tile"
Oh. Almost forgot, I put these two files, in the drawable-nodpi folder. I don't want Android to ever scale the image for me.
Obviously, since your question is a little vague, you will have to use your own image instead of the example I have posted, play around with it a bit till you get the result that suits your needs.
NOTE: Such a thing is typically done when you have patterns that should repeat instead of filling up the screen or stretching. So make sure the image you use is such a pattern that can repeat and not look out of place.

Android gradient emboss effect

I am trying to achieve from code the following: (can't post images unfortunatelly)
A rectangle with rounded corners, with an emboss effect (the light comes from top left corner).
In the middle there is a circle engraved in the rectangle. Imagine a water surface, and a drop of water hits the surface. It creates a dent in the surface. That circle is also painted with some linear gradient.
The problem is I could only use the EmbossMaskFilter from Android to raise the surface, to make it closer to the user eye, but I don't know how to implement the opposite.
Anyone can help me with that?
Thank you very much.

Use a composite drawable, or drawables in layers.
To create a drawable with rounded corners and a gradient within, use something like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="10dp"/>
<gradient android:startColor="#color/gradientstart" android:endColor="#color/gradientend" android:angle="315"/>
</shape>
Create two such drawables and put them on top of each other to create the required effect.

Unless you use a pretty good number of layer-list items as a drawable you probably won't get the effect you are looking for easily with XML drawables. A better solution would be to create a 9-patch image. See how it works at draw9patch.com, which is a tool to create 9 patch images from a standard images.
NinePatch documentation: here.
In case, you still really want to use xml drawables you can still achieve the effect (although performance might take a hit) using a layer-list with multiple gradients stacked ontop of each other.

Is it possible to have a SeekBar's thumb image extend outside the bar?

I have set negative paddings on my custom seekbar so that the round thumb image can go outside the bar, but the thumb isn't rendered out there, is there anyway to force the thumb to be drawn outside those bounds?
Sorry guys, I'm new to Android development, and have been tasked with fixing an existing application. The problem is that we have a custom rounded looking track bar, which consists of two rounded 'end cap' images and a 1 px background that is tiled to create the seekbar. As far as I can tell there was never one image that could be set as the background of a normal SeekBar, which is why a custom one was created.
The thumb is a circle and needs to 'fit' into the end caps - the three pieces of the bar are in a relative layout. Right now I'm kind of unclear as to how the 1 px background png gets stretched as the seekbar bg, otherwise I would try to tack on the two endcaps onto that drawable some how ... ?
Please let me know if this was unclear and I'll try to post any followup info. Thanks in advance for any advice!!
Oh, I'm using Android 2.1 if that's relevant to anyone's interests :)
This is what it looks like when the thumb all the way over - outside of the seekbar. Ideally what I need is for the thumb to be shown as 'inside' the endcap image :-/

I was having the same problem, my thumb is very big length wise and it kept being cut off. Make sure that you set the offset property AFTER you set the drawable for your thumb, like this:
seek.setThumb(Main.app.getResources().getDrawable(R.drawable.thumb));
seek.setThumbOffset(15);
This will set the correct offset when your thumb is very long.

Try to change the thumb offset property, after that it will not go off from the seek bar

I just ran into this issue. I was able to get satisfactory results by using android:paddingLeft and android:paddingRight within the XML.