Android - set a ProgressBar to be a vertical bar instead of horizontal?

user_418714 0
Viewed 51574

I am trying to use a ProgressBar as a metering like display. I thought it was going to be an easy task and thought that ProgressBar had a property to set to be vertical, but I'm not seeing anything.

Additionally I'd like to be able to show ruler like indicator along the side of the bar to clearly indicate the current level.

Pointers appreciated - Thanks!

android
15 Answers

Creating the progress bar (I converted my code from c# to java so might not be 100% correct)

ProgressBar progBar = new ProgressBar(Context, null, Android.resource.attribute.progressDrawable);
progBar.progressDrawable = ContextCompat.getDrawable(Context, resource.drawable.vertical_progress_bar);
progBar.indeterminate = false;

vertical_progress_bar.xml 

<?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>
          <solid android:color="@color/grey" />

          <corners android:radius="20dip" />
        </shape>
      </item>
      <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/vertical_progress_bar_blue_progress"
            android:scaleHeight="100%"
            android:scaleGravity="bottom"/>
      </item>
    </layer-list>

vertical_progress_bar_blue_progress.xml

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

  <corners
      android:radius="20dip" />

  <solid android:color="@color/ProgressBarFourth" />

</shape>

What's going to make your bar vertical is the scaleHeight and scaleGravity attributes in vertical_progress_bar.xml.

It ends up looking something like this:

enter image description here

user_45493270

Simple and Easy way:

Just add a view to a LinearLayout and scale it.

enter image description here

<LinearLayout
        android:layout_width="4dp"
        android:layout_height="300dp"
        android:background="@color/md_green_50"
        android:orientation="vertical">
    <View
            android:id="@+id/progressView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="top"
            android:layout_weight="1"
            android:background="@color/md_green_500"
            android:scaleY="0.0" />
</LinearLayout>

Set View's pivotY to zero:

progressView.pivotY = 0F

Now you can fill the progress using scaleY between 0F and 1F:

progressView.scaleY = 0.3F

Bonus: Animate progress using animate():

progressView.animate().scaleY(0.3F).start()
user_58091440

Add this to the xml code android:rotation="90" android:transformPivotX="0dp" So this is how your Progress Bar xml should look

<ProgressBar
    android:id="@+id/progressBar6"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rotation="90"
    android:transformPivotX="0dp"
    tools:layout_editor_absoluteX="101dp"
    tools:layout_editor_absoluteY="187dp" />
user_113999040

Here is a simple solution, just rotate your progress bar 

android:rotation="270"
Admin1

enter link description here

**Check this link out, I was trying to use a similar thing and also you can use stepper for your requirement, few projects are available on Github about HOW TO USE STEPPER IN ANDROID STUDIO **

user_102682690
Related