How to center a circular progress bar after rotating it with an animation in Android?

Question

Before rotation animation it's great, but I don't like where the circle beggins, I'm getting this:

http://s3.postimg.org/ptnap4h8h/cnocorrido.png

After applying rotation animation I'm getting this:

I have one circular progress bar which I had to rotate it in order for it to start from the bottom and end at the bottom

Circular progress bar:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="7.0"
            android:useLevel="true">
            <gradient
                android:startColor="#fb0000"
                android:endColor="#00FF00"
                android:centerColor="#fbf400"
                android:type="sweep" />
        </shape>
    </item>
</layer-list>

It has a text view(answerCountdown) in the middle of the circle that shows the seconds left. That's working perfectly.

layout.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">

    <ProgressBar
        android:id="@+id/barTimer"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="120dp"
        android:layout_height="131dp"
        android:indeterminate="false"
        android:indeterminateOnly="false"
        android:max="100"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:layout_gravity="center_horizontal"
        android:layout_below="@+id/gameCountDown"
        android:layout_alignParentStart="false"
        android:layout_alignParentEnd="false"
        android:layout_alignWithParentIfMissing="false"
        android:layout_alignParentRight="false"
        android:layout_alignParentBottom="false"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:id="@+id/answerCountdown"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="47dp"
        android:layout_below="@+id/gameCountDown"
        android:layout_alignParentStart="false"
        android:layout_alignParentEnd="false"
        android:layout_alignWithParentIfMissing="false"
        android:layout_alignParentRight="false"
        android:layout_alignParentBottom="false"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="false"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

But after I apply a rotation animation It's not centered, it goes to the left or right depending on the angle you rotate it, the code on the count down Timer

 Animation an = new RotateAnimation(0.0f, 90.0f, 250f, 273f);
    an.setFillAfter(true);
    barTimer.startAnimation(an);

The textView is already centered perfectly, is there any way to "center after rotation" without having to enter margin values on the layout?....I just wanna work it out with one layout file for the moment........

Answer 1

Try this

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@android:color/holo_blue_bright">

    <ProgressBar
        android:id="@+id/barTimer"
        android:progressDrawable="@drawable/circular_progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="120dp"
        android:layout_height="131dp"
        android:layout_gravity="center"
        android:indeterminate="false"
        android:indeterminateOnly="false"
        android:max="100"
        />

    <TextView
        android:id="@+id/answerCountdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="jfi"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</FrameLayout>

Answer 2

I beleive your constructor is off:

Animation an = new RotateAnimation(0.0f, 90.0f, 250f, 273f);

The 3rd and 4th parameters represent the rotation pivot points and should look more like the following

Animation an = new RotateAnimation(0.0f, 90.0f, .5f, .5f);

The above means: Rotate from 0 to 90 degrees with the X and Y pivot points at wherever 50% of the image is.

Source: Android Documentation: RotateAnimation(float, float, float, float)