Warped ProgressBar spinner in Android layout

Question

I have a progress spinner with the below layout:

<ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" >

</ProgressBar>

It should look like:

However on some ginger bread devices it looks like:

I can not work out why on old devices it seems to look broken?

EDIT Complete layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="fill_parent"
        android:layout_height="434dp"
        android:layout_weight="0.45" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@color/background" >

        <ImageView
            android:id="@+id/left"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.10"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:src="@drawable/ic_arrowleft" />

        <ImageView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.10"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:src="@drawable/ic_arrowright" />

        <ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp" >

        </ProgressBar>

        <TextView
            android:id="@+id/grabit"
            android:layout_width="0dp"
            android:layout_height="46dp"
                        android:layout_weight="0.50"

            android:layout_gravity="center"
            android:background="@color/selected"
            android:gravity="center"
            android:text="GRAB IT"
            android:textColor="#fff"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

Answer 1

Instead of using padding, use margins. So like this:

<ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp" >

</ProgressBar>

EDIT: The issue is this in the horizontal linear layout:

android:layout_height="50dp"

The progress bars in gingerbread were bigger which means that you are forcing it to squish itself hence the warping. Instead use wrap_content.