Android - ProgressBar with level indicator flag and text in/out progress

Question

I have a very difficult problem here, have tried all did I can find but it still going nowhere.

I need something like this:

A progressBar with a text with the progress data inside of it, this text can be outside progress level if it doesn't fit on, but in if it does(get it). Also a flag with the progress percent, exactly under progress level(the real problem).

Sample:

https://dl.dropboxusercontent.com/u/7675841/orange.png

For more samples change "orange.png" by "red.png" and "green.png".

I did something like this: http://blog.mediarain.com/2011/04/android-custom-progressbar-with-rounded-corners/

Adding a TextView for the text in the progressBar:

<merge xmlns:android="http://schemas.android.com/apk/res/android" >

<RelativeLayout
    android:id="@+id/progressBar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp" >

    <ImageView
        android:id="@+id/track_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:minHeight="25dp" />

    <ImageView
        android:id="@+id/progress_drawable_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="2dp"
        android:contentDescription="@string/app_name"
        android:minHeight="25dp" />

    <TextView
        android:id="@+id/progress_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:textStyle="bold" />
</RelativeLayout>

And for set the text in/out the progress I did this:

double percent = (double) value / (double) max;
int level = (int) Math.floor(percent * 10000);
drawable.setLevel(level);
double pixelLevel = percent * progressDrawableImageView.getWidth();
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) txt
            .getLayoutParams();

    if (pixelLevel - 20 < bounds.width()) {
        params.leftMargin = (int) pixelLevel + 20;
    } else {
        params.leftMargin = (int) pixelLevel - bounds.width() - 10;
    }

    txt.setLayoutParams(params);

This works beautiful but, doesn't work for the percent flag. Or at least doesn't works on all screen sizes and densities.

The proyect: "same dropbox link"/RoundedProgressSampleCustom.zip

Thank You for help me.

PS: Sorry for can't post more than 2 links :c

Answer 1

Potential problem 1

It's quite difficult to determine what your actual problem is. I assume your percent flag is not position at the right place across all screens. I notice you're using DP for measurements in the XML, but PX for adjusting the params in code.

Try using DP for the measurements in code (such as 20 and pixel level). You can use the following

int valueInDP= (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, YOURVALUE, getResources().getDisplayMetrics());

Where YOURVALUE is the value you wish to convert to DP.

---

Potential problem 2

If you're not seeing anything at all, your issue may lie with this line

progressDrawableImageView.getWidth();

as there appears to be issues getting imageView widths in onCreate(). This may or may not be relevant to you, but it's difficult to tell. See this link to get a work around: How to get the width and height of an Image View in android?

If the positioning is not the issue, you'll have to edit your question to be more specific.