CODEWITHSUNDEEP
androidandroid-progressbar
Sal Aldana
Sal Aldana

Reputation: 1235

Android Custom ProgressBar with Left and Right Track Images

I'm porting an iOS App to Android and one of the features in the iOS App is a custom UISlider that uses a Left and Right Track Image (in the picture below) but so far I can't seem to replicate this same behavior on the Android side.

enter image description here

From the image you can see that there is a White image used for the Right Track Image and then the Left Track Image will either be a Red or Green Image (based on how close the person is to a goal). Below is the XML for the ProgressBar (by the way I can't seem to find out if the ProgressBar or SeekerBar would be the best choice here as there's no interaction and the bar doesn't change after it's displayed since it's more like a Bar Graph type of image)

<ProgressBar
            android:id="@+id/MTDMainBar"
            android:indeterminate="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxHeight="44dip"
            android:minHeight="44dip"
                style="?android:attr/progressBarStyleHorizontal"
                android:max="100"
                android:progress="50"
                android:background="@drawable/whitetrack"
                android:indeterminateDrawable="@drawable/greentrack"/>

But when I do this, the Green Track Image fills up the entire Bar instead of just the progress side of the bar. I've also tried the progressDrawable but got the same results so I'm a bit lost on what to try next. Any help on what the right setting combination would be for this type of behavior?

-----New Information-------------

Okay, so I'm about halfway there now, but one thing that's bothering me is that the ProgressBar doesn't seem to fill the TableRow that it's inside unless I hardcode the width value which I know I don't want to really do since Android devices can vary in screen width.

Below is the screenshot of what I got so far as far as the Android display enter image description here

And below is the code that I've been using

//this is the code in the Fragment Class
@Override
public void onActivityCreated (Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);


    Drawable greentrack = getResources().getDrawable(R.drawable.green_progress_clip);
    greentrack.setLevel(35);

    Drawable whitetrack = getResources().getDrawable(R.drawable.white_progress_clip);
    whitetrack.setLevel(100);

    MTDProgressbar = (ProgressBar)getActivity().findViewById(R.id.MTDMainBar);
    MTDProgressbar.setProgressDrawable(greentrack);
    MTDProgressbar.setProgress(35);
    MTDProgressbar.setMax(100);

    MTDBackgroundbar = (ProgressBar)getActivity().findViewById(R.id.MTDBackgroundBar);
    MTDBackgroundbar.setProgressDrawable(whitetrack);
    MTDBackgroundbar.setProgress(100);
    MTDBackgroundbar.setMax(100);
}

And this is my XML data for the Progress Bars

<TableRow
            android:id="@+id/MTDRow"
            android:layout_width="match_parent"
              android:layout_height="55dip">
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
        <ProgressBar
                android:id="@+id/MTDBackgroundBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxHeight="44dip"
            android:minHeight="44dip"
            android:paddingLeft="10dip"
            style="?android:attr/progressBarStyleHorizontal" />

        <ProgressBar
            android:id="@+id/MTDMainBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dip"
            style="?android:attr/progressBarStyleHorizontal"
            android:maxHeight="44dip"
            android:minHeight="44dip"/>

        </RelativeLayout>
              </TableRow>

Upvotes: 1

Views: 1407

Answers (1)

Khantahr
Khantahr

Reputation: 8528

I'm pretty sure you can't do this with built-in UI elements, you'll have to make your own custom UI element, probably extending ProgressBar.

Upvotes: 1

Related Questions