android - Needle rotating about its pointer head -


enter image description herei have needle image need rotate when given value changes. values obtained random.

i created image in xml imageview.

      <relativelayout     android:id="@+id/relativelayout1"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_centerhorizontal="true"     android:layout_centerinparent="false" >      <imageview         android:id="@+id/meter_image"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignparenttop="true"         android:layout_centerhorizontal="true"         android:layout_centerinparent="true"         android:layout_margintop="54dp"         android:src="@drawable/gauge_meter" />      <imageview         android:id="@+id/meter_needle_image"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_aligntop="@+id/meter_image"         android:layout_centerhorizontal="true"         android:layout_margintop="14dp"         android:src="@drawable/meter_needle" /> </relativelayout> 

i rotated using following code rotates not @ bottom axis

 rotateanimation rpmneedledeflection = new rotateanimation((float) (0.5f), (float) (90), 130, 0);       rpmneedledeflection.setduration(500);       rpmneedledeflection.setfillafter(true);       rpmarrowview.startanimation(rpmneedledeflection); 

i still figuring out how rotation works , in case need set angle based on speed. right given value how make turn around bottom of needle , around axis?

edit: needle 31* 113 , bottom image 224*224

to solve issue, have 2 options:

option 1:

resize needle image same size background image, meaning 31 113, 224 224. when this, make sure don't scale image size (this result in weird stretched needle image). want create transparent image 224x224, , copy paste needle image in original size (31x113) new transparent image, needle's base circle in center of 224x224 transparent image, , correctly aligned "imaginary" background. save , export image png format, , use image needle image.

all need make sure 2 images aligned each other. shouldn't difficult since should both same size. when rotate needle image, desired result.

option 2:

let's can't resize image - perhaps because used other parts of programs, or other reason. 2nd option position image, , use pivot points make sure correctly positions via code.

to this, you'll want centre image horizontally, , vertically, you'll want align needle's base directly in centre of background.

as far positioning goes, require try , error perfect, seems you've got part nailed. you're missing pivot point rotate around. lets see how can calculate it:

math time!

i'm going guess diameter equal width of image, since widest part. means horizontal centre of needle @ half width of image:

final int pivotx = rpmarrowview.getmeasuredwidth() / 2; 

the vertical centre of image should same, except bottom of image:

final int pivoty = rpmarrowview.getmeasuredheight() - rpmarrowview.getmeasuredwidth() / 2; 

now, before animate, make sure set pivot point:

rpmarrowview.setpivotx(pivotx); rpmarrowview.setpivoty(pivoty); 

then animate:

rpmarrowview.animate().rotation(somedegree).setduration(someduration) 

and that's it! might require bit more tweaking positioning perfect, that's gist of it.

hope 1 of these options helps you.


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -