Android ProgressBarのスタイルカラーを変更する

(プログレスバーは カスタム画像 )

(プログレスバーは カスタムカラー )

I. 画像の背景を変更する。

1. 自作の画像を2枚（下記）作成し、プロジェクトの/res/drawableディレクトリに配置しました。

（背景画像 prgs_bg.png）

（進捗状況画像 prgs_progress.png）

2. また、/res/drawable ディレクトリに以下の内容の barbgimg.xml ファイルを新規に作成します。

<?xml version="1.0" encoding="UTF-8"? >                
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >                 
<! -- Set background color image resource -->                   
<item                  
    android:id="@android:id/background"                
    android:drawable="@drawable/prgs_bg" />     
                                       
<! -- Set progress bar color image resource -->                   
<item                  
    android:id="@android:id/progress"                
    android:drawable="@drawable/prgs_progress" />  
                
</layer-list>  

3. レイアウトファイルでProgressBarを定義する際に、android:progressDrawable="@drawable/barbgimg"属性を追加してください。

II. 背景を別の色に変更する。

1. /res/drawable ディレクトリに、以下の内容の barcolor.xml ファイルを追加します。

<?xml version="1.0" encoding="UTF-8"? >              
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">              
<! -- Set the background color (black) -->                 
<item android:id="@android:id/background" >                
<shape>  
    <corners android:radius="5dip" />                 
        <gradient android:startColor="#000000"                
              android:endColor="#000000" />                
</shape>               
</item>                                  
  
<! -- Set the progress bar color (white) -->                 
<item android:id="@android:id/progress" >                
<clip>                 
    <shape>                  
        <corners android:radius="5dip" />                  
    <gradient android:startColor="#ffffff"                 
           android:endColor="#ffffff" />                 
    </shape>                
</clip>               
</item>              
  
</layer-list>  

2. レイアウトファイルでProgressBarを定義する際に、android:progressDrawable="@drawable/barcolor"属性を追加してください。
詳細な注意事項
gradient main body gradient startColor start color, endColor end color , angle angle to start gradient (value can only be a multiple of 90, left to right gradient at 0, bottom to top gradient at 90, and so on the counterclockwise).

stroke ボーダー幅 ボーダー幅、カラー ボーダーカラー。

corners rounded radius 半径、直角の場合は0。

<shape>
   <! -- solid -->
   <solid android:color="#ff9d77"/>
   <! -- gradient -->
   <gradient
       android:startColor="#ff8c00"
       android:endColor="#FFFFFF"
       android:angle="270" />
   <! -- Stroke -->
   <stroke
       android:width="2dp"
       android:color="#dcdcdc" />
   <! -- rounded corners -->
   <corners
       android:radius="2dp" />
   <! -- borders -->
   <padding
       android:left="10dp"
       android:top="10dp"
       android:right="10dp"
       android:bottom="10dp" />
</shape>

solid：ソリッド、つまり塗りつぶしの意味
android:colorは塗りつぶしの色を指定します。
gradient: グラデーション
android:startColor と android:endColor はそれぞれ開始色と終了色です。 ndroid:angle はグラデーションの角度で、45の整数倍である必要があります。
また、グラデーションのデフォルトモードは android:type="linear" つまり線形グラデーションですが、放射状グラデーションとして android:type="radial" 、放射状グラデーションは半径を指定する必要があります android:gradientRadius=" ;50" を指定することができます。

ストローク：ストローク
android:width="2dp" はストロークの幅、android:color はストロークの色です。
として設定することで、ストロークを破線にすることもできます。
android:dashWidth="5dp" 
android:dashGap="3dp"
android:dashWidthは'-'などの横線の幅、android:dashGapは区切りの間隔を示します。

コーナー：角丸
android:radiusは角の半径で、値を大きくすると角が丸くなります。
また、4つの角を異なる角度に設定するには、次のようにします。
コーナー 
        android:topRightRadius="20dp" 右上コーナー
        android:bottomLeftRadius="20dp" 右下コーナー
        android:topLeftRadius="1dp" 左上角
        android:bottomRightRadius="0dp" 左下隅
 />
ここで、bottomLeftRadiusは左下ではなく右下であることに注意してください。ちょっと鬱陶しいですが、使用には影響しませんので、間違えないようにだけ覚えておいてください。

padding: スペーシング
これは言わずもがな、XMLレイアウトファイルでよく使われるものです。

簡単に言うと、それだけです。具体的な使用例としては、セレクタでボタンの背景として使用し、以下のコードでボタンの全体状態、フォーカスを得たときの状態、押されたときの状態をそれぞれ定義しています。

main.xml:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TestShapeButton"
    android:background="@drawable/button_selector"
    />

button_selector.xml:
<?xml version="1.0" encoding="utf-8"? >
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <! -- gradient -->
            <gradient
                android:startColor="#ff8c00"
                android:endColor="#FFFFFF"
                android:type="radial"
                android:gradientRadius="50" />
            <! -- Stroke -->
            <stroke
                android:width="2dp"
                android:color="#dcdcdc"
                android:dashWidth="5dp" 
                android:dashGap="3dp" />
            <! --rounded corners -->
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:startColor="#ffc2b7"
                android:endColor="#ffc2b7"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#dcdcdc" />
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>       
        <shape>
            <solid android:color="#ff9d77"/>
            <stroke
                android:width="2dp"
                android:color="#fad3cf" />
            <corners 
                android:topRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

円形のプログレスバー

1. 画像リソースファイルの定義

<?xml version="1.0" encoding="utf-8"? >  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromDegrees="0"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:toDegrees="360" >  
  
    <shape  
        android:innerRadiusRatio="3"  
        android:shape="ring"  
        android:thicknessRatio="8"  
        android:useLevel="false" >  
  
        <gradient  
            android:centerColor="#FFFFFF"  
            android:centerY="0.50"  
            android:endColor="#FFFF00"  
            android:startColor="#000000"  
            android:type="sweep"  
            android:useLevel="false" />  
    </shape>  
  
</rotate>  

2. レイアウトファイルの定義

<ProgressBar
        android:id="@+id/color_progressBar2"
	android:indeterminateDrawable="@drawable/color_progress2"
	android:layout_height="wrap_content" 
	android:layout_width="wrap_content"/>

3. 効果について