dwinnbrown
dwinnbrown

Reputation: 3999

Android - Circular progress bar not working

I am trying to create an indeterminate progress bar to signify loading in my app. However after trying countless xml layouts and different bits of code, I can't seem to get anything working. This is my main fragment's xml file:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.example.dwinnbrown.xxx.FirstFragment">

    <!-- TODO: Update blank fragment layout -->
        <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

    <ProgressBar
        android:id="@+id/prgrsbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:max="500"
        android:progress="0"
        android:indeterminate="true"
        android:progressDrawable="@drawable/circular" />


</FrameLayout>

And my circular.xml file:

<shape
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="7.0">

    <gradient
        android:centerColor="#007DD6"
        android:endColor="#007DD6"
        android:startColor="#007DD6"
        android:angle="0"
        android:type="sweep"
        android:useLevel="false" ></gradient>
</shape>

However the output appears like this - am I missing something?

enter image description here

Upvotes: 1

Views: 5037

Answers (2)

I'll get to the progress bar, but there are another thing to improve first:

FrameLayout is meant for children that are stacked on top of each other, but it doesn't support aligning the views inside it.

So an easy start would be to use a Relativelayout as a root view and then you can align the Progressbar in the middle of the view easily.

Now, to the progressbar, I haven't done your usecase myself. But I would recommend you to strip it down to the essensitals first to see that it's dispalyed, so:

<ProgressBar
    android:id="@+id/prgrsbar"
    android:layout_width="150dp"
    android:layout_centerInParent="true"
    android:layout_height="150dp"/>

This should show you a simple progressbar that simply keeps on spinning in a circle. If it doesn't there's a problem elsewhere.

After that you can build up with adding the min / max values to see that it becomes straight

And lastly, add the drawable, which I only guess, could be the problem here and we can look on exactly why that fails, but then we have found the root cause and can easily search on the error. :)

Edit:

I looked online a bit and from what I found the drawable should look something similar to this (untested though): How to set color to secondary drawable in progress bar

Upvotes: 0

Bill
Bill

Reputation: 4646

Android already has a circular progress bar built in, try this:

<ProgressBar
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:indeterminate="true"
    android:id="@+id/prgrsbar"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

You can use progressBarStyleSmall instead of progressBarStyleLarge if it is too big, or customize it yourself.

Upvotes: 2

Related Questions