How to graphically show a quantity in Android?

Question

I am working on a app where I want to show a quantity in a rectangle. The following is what I need. I have 2 values, say totalMoney and spentMoney. I want to show the remaining money (i.e. totalMoney - spentMoney) in a rectangle box in 2 colors.

Like this:

|======================| 
|///////////|          |
|////50%////|          |   
|///////////|          |
|======================|

This rectangle will be in a custom View, in collaboration with other components like textview etc.

How do I get this in Android? I am working on Android 2.2.

Answer 1

You need a ProgressBar.

Here is an example of a custom one.

    <ProgressBar style="?android:attr/progressBarStyleHorizontal"
      android:layout_width="fill_parent"
   android:layout_height="7dip"
  android:id="@+id/pop1000Bar"
  android:max="1000"
  android:progress="500"
  android:progressDrawable="@drawable/progressbarlayers"
  >
  </ProgressBar>

progressbarlayers is an xml file that defines how I want the progress bar to look. Here is how mine is set up.

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="5dip" />
        <gradient
                android:startColor="#ff9d9e9d"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:angle="270"
        />
    </shape>
</item>

<item
    android:id="@android:id/progress"
>
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="#A9F505"
                android:endColor="#FFF700"
                android:angle="270" />
        </shape>
    </clip>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
        <size android:height="3dip"/>



            <gradient
                    android:startColor="#80ffd300"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:angle="270"
            />
        </shape>
    </clip>
</item>
<item
    android:id="@android:id/progress"
>
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="#A9F505"
                android:endColor="#FFF700"
                android:angle="270" />
        </shape>
    </clip>
</item>

</layer-list>

It comes out looking like this:

But you can make it look like whatever you need it to.

EDIT: There are many ways you could achieve getting text on to them. If your parent layout is a RelativeLayout you can just stack a TextView on top of the progress bar and call setText on the text view each time the progress is updated. Probably what is a better approach is subclass ProgressBar to draw it on there for you. Here is an example of that. They just made a new View that extends ProgressBar, and override the onDraw to draw some text to the canvas each time as well as painting the bars and background.