android 竖向的progress bar

http://android-dev-examples.blogspot.jp/2014/09/android-custom-vertical-progressbar.html

Android custom vertical progressbar

Vertical gradient progress

Layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="20dp">
 <ProgressBar
  style="@android:style/Widget.ProgressBar.Horizontal"
  android:layout_centerInParent="true"
  android:layout_width="15dp"
  android:layout_height="match_parent"
  android:max="100"
  android:progress="33"
  android:progressDrawable="@drawable/progress_drawable" />
</RelativeLayout>

progress_drawable :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:id="@android:id/background">
  <color android:color="#777" />
 </item>
 <item android:id="@android:id/progress">
  <clip
   android:clipOrientation="vertical"
   android:gravity="bottom">
   <shape>
    <gradient
     android:startColor="#00FF00"
     android:centerColor="#FFFF00"
     android:endColor="#FF0000"
     android:angle="90" />
   </shape>
  </clip>
 </item>
</layer-list>

Stylish vertical ProgressBar example 1

Layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="20dp">
 <ProgressBar
  style="@android:style/Widget.ProgressBar.Horizontal"
  android:layout_centerInParent="true"
  android:layout_width="wrap_content"
  android:layout_height="match_parent"
  android:max="100"
  android:progress="80"
  android:progressDrawable="@drawable/progress_drawable" />
</RelativeLayout>

progress_drawable :

<?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>
   <gradient
    android:startColor="#777"
    android:centerColor="#CCC"
    android:endColor="#FFF" />
   <corners android:radius="10dp" />
  </shape>
 </item>
 <item android:id="@android:id/progress">
  <clip
   android:clipOrientation="vertical"
   android:gravity="bottom">
   <shape>
    <gradient
     android:startColor="#32A6FF"
     android:centerColor="#0090FF"
     android:endColor="#3232FF" />
    <corners android:radius="10dp" />
   </shape>
  </clip>
 </item>
</layer-list>

Vertical ProgressBar with horizontal lines

Note :
Lines are not showing, when progress is 0.

Left pic - 0 progress.
Right pic - 66 progress.

Layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <ProgressBar
  style="@android:style/Widget.ProgressBar.Horizontal"
  android:layout_centerInParent="true"
  android:layout_width="wrap_content"
  android:layout_height="200dp"
  android:max="100"
  android:progress="66"
  android:progressDrawable="@drawable/progress_drawable" />
</RelativeLayout>

progress_drawable :

<?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="#AAA" />
   <corners android:radius="10dp" />
  </shape>
 </item>
 <item android:id="@android:id/progress">
  <layer-list>
   <item>
    <clip
     android:clipOrientation="vertical"
     android:gravity="bottom">
     <shape>
      <solid android:color="#0090FF" />
      <corners android:radius="10dp" />
     </shape>
    </clip>
   </item>
   <item>
    <clip
     android:clipOrientation="vertical"
     android:gravity="fill">
     <layer-list>
      <item>
       <shape android:shape="line">
        <stroke
         android:width="2dp"
         android:color="#333" />
       </shape>
      </item>
      <item android:top="100dp">
       <shape android:shape="line">
        <stroke
         android:width="2dp"
         android:color="#333" />
       </shape>
      </item>
      <item android:bottom="100dp">
       <shape android:shape="line">
        <stroke
         android:width="2dp"
         android:color="#333" />
       </shape>
      </item>
     </layer-list>
    </clip>
   </item>
  </layer-list>
 </item>
</layer-list>

Stylish vertical ProgressBar example 2

Layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <ProgressBar
  style="@android:style/Widget.ProgressBar.Horizontal"
  android:layout_centerInParent="true"
  android:layout_width="48dp"
  android:layout_height="400dp"
  android:max="100"
  android:progress="66"
  android:progressDrawable="@drawable/progress_drawable" />
</RelativeLayout>

progress_drawable :

<?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>
   <gradient
    android:startColor="#777"
    android:centerColor="#CCC"
    android:endColor="#FFF" />
   <corners android:radius="10dp" />
   <stroke
    android:width="1dp"
    android:color="#AAA" />
  </shape>
 </item>
 <item android:id="@android:id/progress">
  <layer-list>
   <item>
    <clip
     android:clipOrientation="vertical"
     android:gravity="bottom">
     <layer-list>
      <item
       android:left="2dp"
       android:top="2dp"
       android:right="2dp"
       android:bottom="2dp">
       <shape>
        <gradient
         android:startColor="#0000FF"
         android:endColor="#CCC" />
        <corners android:radius="10dp" />
       </shape>
      </item>
      <item
       android:right="26dp"
       android:left="2dp"
       android:top="2dp"
       android:bottom="2dp">
       <shape>
        <gradient
         android:startColor="#32A6FF"
         android:endColor="#3232FF" />
        <corners android:radius="10dp" />
       </shape>
      </item>
     </layer-list>
    </clip>
   </item>
   <item>
    <clip
     android:clipOrientation="vertical"
     android:gravity="fill">
     <layer-list>
      <item>
       <shape android:shape="line">
        <stroke
         android:width="1dp"
         android:color="#333" />
       </shape>
      </item>
      <item android:top="200dp">
       <shape android:shape="line">
        <stroke
         android:width="1dp"
         android:color="#333" />
       </shape>
      </item>
      <item android:bottom="200dp">
       <shape android:shape="line">
        <stroke
         android:width="1dp"
         android:color="#333" />
       </shape>
      </item>
     </layer-list>
    </clip>
   </item>
  </layer-list>
 </item>
</layer-list>