How to Add a Simple Bar Graph to the Bottom of a ListView Item in Android?

Question

I am using a custom XML layout listview_goal_item.xml to represent how I want my ListView items to appear. This XML layout is fed to the adapter as such:

cursor_adapter_goals = new SimpleCursorAdapter(this,
            R.layout.listview_goal_item,
            matrix_cursor_goals, listview_fields, listview_columns);

Everything works great, I can easily understand how to display all the information in listview_fields (the string array for my values) and listview_columns (the string array for the target widgets in my custom ListView layout) because there's a direct fixed relationship between these items.

I would like to display a fixed "progress" bar graph for each goal item in the ListView. This bar graph would be a simple visual representation of where the user is based on the percentage they've achieved their goal, 75% would mean the bar graph would take up 3/4's of the ListView's width, 50% 1/2 the width, etc. This is where I am confused.

How should I approach this? Should I create some kind of dynamic 9 patch image? Should I create a simple table with a row that sizes dynamically with a contrasting color on a black table background?

If you could push me in the right direction, both programmatically and in the required XML, I would be much appreciative!

Answer 1

Add a ProgressBar to the bottom of your item layout, here is one that I use to have as the entire background of a list view item (as an element of a FrameLayout, the other element being a layout with the rest of the list item, TextViews etc):

 <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:progressDrawable="@drawable/progress_timer" />

Change the layout_* etc according to your needs.

Notice the drawable used. The drawable referenced is just a layer-list with items with the needed id's for the progressbar drawable. Also please notice that the background is set to transparent:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:id="@android:id/background"
    android:drawable="@android:color/transparent"/>
<item android:id="@android:id/secondaryProgress">
    <scale
        android:drawable="@color/..."
        android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
    <scale
        android:drawable="@color/..."
        android:scaleWidth="100%" />
</item>
</layer-list>

In your code you just treat this like any ProgressBar:

ProgressBar progressBar = (ProgressBar) convertView.findViewById(R.id.progressBar);

When updating:

progressBar.setMax(100); //100 for example for percent
progressBar.setProgress(20); //20% done