web-dev-qa-db-ja.com

Androidでプログレスバーをカスタマイズする方法

私はProgressBarを表示したいアプリに取り組んでいますが、デフォルトのAndroidのProgressBarを置き換えたいです。

それではどうやってProgressBarをカスタマイズできますか？

そのためにはグラフィックやアニメーションが必要ですか。

私は次の記事を読みましたが、それをうまく動かすことができませんでした：

カスタムプログレスバーAndroid

javaandroiduser-interfacecustom-controlsandroid-progressbar
138
user2446494

ProgressBarをカスタマイズするには、プログレスバーの背景と進行の属性またはプロパティを定義する必要があります。

customprogressbar.xmlフォルダーにres->drawableという名前のXMLファイルを作成します。

custom_progressbar.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <!-- Define the background properties like color etc -->
    <item Android:id="@Android:id/background">
    <shape>
        <gradient
                Android:startColor="#000001"
                Android:centerColor="#0b131e"
                Android:centerY="1.0"
                Android:endColor="#0d1522"
                Android:angle="270"
        />
    </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <item Android:id="@Android:id/progress">
    <clip>
        <shape>
            <gradient
                Android:startColor="#007A00"
                Android:centerColor="#007A00"
                Android:centerY="1.0"
                Android:endColor="#06101d"
                Android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list>

今度はcustomprogressbar.xmlのprogressDrawableプロパティを設定する必要があります（drawable）

これはXMLファイルまたはActivity（実行時）で行うことができます。

XMLで次の操作を行います。

<ProgressBar
    Android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    Android:progressDrawable="@drawable/custom_progressbar"         
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content" />

実行時には以下を実行してください

// Get the Drawable custom_progressbar                     
    Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
    progressBar.setProgressDrawable(draw);

編集：修正されたXMLレイアウト

264
user2446474

あなたのxmlに

<ProgressBar
        Android:id="@+id/progressBar1"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        style="@style/CustomProgressBar" 
        Android:layout_margin="5dip" />

そしてres/values/styles.xmlでは：

<resources> 
        <style name="CustomProgressBar" parent="Android:Widget.ProgressBar.Horizontal">
          <item name="Android:indeterminateOnly">false</item>
          <item name="Android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
          <item name="Android:minHeight">10dip</item>
          <item name="Android:maxHeight">20dip</item>
        </style>       
    <style name="AppTheme" parent="Android:Theme.Light" />
</resources>

そしてcustom_progress_bar_horizontalはあなたのカスタムプログレスバーを定義するdrawableフォルダに格納されたxmlです。詳しくはこちら のブログ をご覧ください。

これがお役に立てば幸いです。

31
Gunaseelan

このような複雑なProgressBarの場合、

enter image description here

ClipDrawableを使用してください。

注：この例ではProgressBarを使用していません。私は ClipDrawable を使用して、画像をAnimationでクリッピングすることでこれを達成しました。

このDrawableの現在のレベル値に基づいて別のDrawableを切り取るDrawable。子のDrawableがレベルに基づいて幅と高さで切り取られる量と、コンテナ全体のどこに配置されるかを制御するための重力を制御できます。 setLevel()を使用してドロウアブルのレベルを上げることによってMost often used to implement things like progress bars。

注：レベルが0の場合はドロウアブルは完全に切り取られて見えず、レベルが10,000の場合は完全に表示されます。

この2つの画像を使用して、これをCustomProgressBarにしました。

scall.png

scall.png

ballon_progress.png

ballon_progress.png

MainActivity.Java

public class MainActivity extends ActionBarActivity {

private EditText etPercent;
private ClipDrawable mImageDrawable;

// a field in your class
private int mLevel = 0;
private int fromLevel = 0;
private int toLevel = 0;

public static final int MAX_LEVEL = 10000;
public static final int LEVEL_DIFF = 100;
public static final int DELAY = 30;

private Handler mUpHandler = new Handler();
private Runnable animateUpImage = new Runnable() {

    @Override
    public void run() {
        doTheUpAnimation(fromLevel, toLevel);
    }
};

private Handler mDownHandler = new Handler();
private Runnable animateDownImage = new Runnable() {

    @Override
    public void run() {
        doTheDownAnimation(fromLevel, toLevel);
    }
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    etPercent = (EditText) findViewById(R.id.etPercent);

    ImageView img = (ImageView) findViewById(R.id.imageView1);
    mImageDrawable = (ClipDrawable) img.getDrawable();
    mImageDrawable.setLevel(0);
}

private void doTheUpAnimation(int fromLevel, int toLevel) {
    mLevel += LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel <= toLevel) {
        mUpHandler.postDelayed(animateUpImage, DELAY);
    } else {
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

private void doTheDownAnimation(int fromLevel, int toLevel) {
    mLevel -= LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel >= toLevel) {
        mDownHandler.postDelayed(animateDownImage, DELAY);
    } else {
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

public void onClickOk(View v) {
    int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;

    if (toLevel == temp_level || temp_level > MAX_LEVEL) {
        return;
    }
    toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;
    if (toLevel > fromLevel) {
        // cancel previous process first
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;

        mUpHandler.post(animateUpImage);
    } else {
        // cancel previous process first
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;

        mDownHandler.post(animateDownImage);
    }
}
}

activity_main.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:paddingLeft="16dp"
Android:paddingRight="16dp"
Android:paddingTop="16dp"
Android:paddingBottom="16dp"
Android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal">

    <EditText
        Android:id="@+id/etPercent"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:inputType="number"
        Android:maxLength="3" />

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Ok"
        Android:onClick="onClickOk" />

</LinearLayout>

<FrameLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center">

    <ImageView
        Android:id="@+id/imageView2"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:src="@drawable/scall" />

    <ImageView
        Android:id="@+id/imageView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/clip_source" />

</FrameLayout>

clip_source.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:clipOrientation="vertical"
    Android:drawable="@drawable/ballon_progress"
    Android:gravity="bottom" />

複雑なHorizontalProgressBarの場合は、clip_source.xmlのcliporientationを次のように変更するだけです。

Android:clipOrientation="horizontal"

完全なデモは からここ からダウンロードできます。

30
Jaydipsinh Zala

プログレスバーの色をカスタマイズする、つまりスピナータイプの場合は、それぞれのJavaファイルにxmlファイルと開始コードが必要です。

Xmlファイルを作成してprogressbar.xmlという名前を付けます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    tools:context=".Radio_Activity" >

    <LinearLayout
        Android:id="@+id/progressbar"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" >

        <ProgressBar
            Android:id="@+id/spinner"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" >
        </ProgressBar>
    </LinearLayout>

</LinearLayout>

以下のコードを使用して、さまざまな予想される色でスピナーを取得します。ここでは、スピナーを青色で表示するために16進コードを使用します。

Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner);
spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
                Android.graphics.PorterDuff.Mode.MULTIPLY);
9
user4125837

進行状況バーには、確定進行状況バー（固定期間）と不確定進行状況バー（期間が不明）の2種類があります。

両方の種類のプログレスバーのドロアブルは、ドロアブルをxmlリソースとして定義することによってカスタマイズできます。プログレスバーのスタイルとカスタマイズに関する詳細は、 http://www.zoftino.com/Android-progressbar-and-custom-progressbar-examples .

固定プログレスバーまたは水平プログレスバーのカスタマイズ：

以下の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"
        Android:gravity="center_vertical|fill_horizontal">
        <shape Android:shape="rectangle"
            Android:tint="?attr/colorControlNormal">
            <corners Android:radius="8dp"/>
            <size Android:height="20dp" />
            <solid Android:color="#90caf9" />
        </shape>
    </item>
    <item Android:id="@Android:id/progress"
        Android:gravity="center_vertical|fill_horizontal">
        <scale Android:scaleWidth="100%">
            <shape Android:shape="rectangle"
                Android:tint="?attr/colorControlActivated">
                <corners Android:radius="8dp"/>
                <size Android:height="20dp" />
                <solid Android:color="#b9f6ca" />
            </shape>
        </scale>
    </item>
</layer-list>

不確定プログレスバーのカスタマイズ

以下のxmlは、循環プログレスバーのカスタマイズ用の描画可能なリソースです。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/progress"
        Android:top="16dp"
        Android:bottom="16dp">
                <rotate
                    Android:fromDegrees="45"
                    Android:pivotX="50%"
                    Android:pivotY="50%"
                    Android:toDegrees="315">
                    <shape Android:shape="rectangle">
                        <size
                            Android:width="80dp"
                            Android:height="80dp" />
                        <stroke
                            Android:width="6dp"
                            Android:color="#b71c1c" />
                    </shape>
                </rotate>           
    </item>
</layer-list>
6
Arnav Rao

Androidでプログレスバーをカスタマイズする最も簡単な作成方法：

  1. ダイアログを初期化して表示する：

    MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
progressdialog.show();

  2. メソッドを作成します。

    public class MyProgressDialog extends AlertDialog {
      public MyProgressDialog(Context context) {
          super(context);
          getWindow().setBackgroundDrawable(new ColorDrawable(Android.graphics.Color.TRANSPARENT));
      }

      @Override
      public void show() {
          super.show();
          setContentView(R.layout.dialog_progress);
      }
}

  3. レイアウトXMLを作成します。

    <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
  xmlns:tools="http://schemas.Android.com/tools"
  Android:layout_width="match_parent"
  Android:layout_height="match_parent"
  Android:background="@Android:color/transparent"
  Android:clickable="true">

    <RelativeLayout
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:layout_centerInParent="true">

      <ProgressBar
         Android:id="@+id/progressbarr"
         Android:layout_width="@dimen/eightfive"
         Android:layout_height="@dimen/eightfive"
         Android:layout_centerInParent="true"
        Android:indeterminateDrawable="@drawable/progresscustombg" />

      <TextView
         Android:layout_width="wrap_content"
         Android:layout_height="wrap_content"
         Android:layout_centerHorizontal="true"
         Android:layout_below="@+id/progressbarr"
         Android:layout_marginTop="@dimen/_3sdp"
         Android:textColor="@color/white"
         Android:text="Please wait"/>
    </RelativeLayout>
</RelativeLayout>

  4. 形状progresscustombg.xmlを作成し、res/drawableを配置します。

    <?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="20"
       Android:useLevel="false" >
        <size
            Android:height="@dimen/eightfive"
            Android:width="@dimen/eightfive" />

        <gradient
            Android:centerY="0.50"
            Android:endColor="@color/color_green_icash"
            Android:startColor="#FFFFFF"
            Android:type="sweep"
            Android:useLevel="false" />
    </shape>

</rotate>
4
Jaydeep Dobariya

HotstarのようなカスタムProgressBarを作成します。

  1. レイアウトファイルに進捗バーを追加し、indeterminateDrawableをdrawableファイルに設定します。

activity_main.xml

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_centerVertical="true"
    Android:layout_centerHorizontal="true"
    Android:id="@+id/player_progressbar"
    Android:indeterminateDrawable="@drawable/custom_progress_bar"
    />
  1. Res\drawableに新しいxmlファイルを作成します

custom_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
    <rotate  xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:duration="2000"
    Android:fromDegrees="0"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toDegrees="1080" >

    <shape
        Android:innerRadius="35dp"
        Android:shape="ring"
        Android:thickness="3dp"
        Android:useLevel="false" >
       <size
           Android:height="80dp"
           Android:width="80dp" />

       <gradient
            Android:centerColor="#80b7b4b2"
            Android:centerY="0.5"
            Android:endColor="#f4eef0"
            Android:startColor="#00938c87"
            Android:type="sweep"
            Android:useLevel="false" />
    </shape>

</rotate>
4
Rajesh Shetty

カスタムドロアブルを使用する場合：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fromDegrees="0"
Android:toDegrees="360"
Android:drawable="@drawable/my_drawable"
Android:pivotX="50%"
Android:pivotY="50%" />

（res/drawable progress.xmlの下に追加してください）。 my_drawableはxml、pngです

それからあなたのレイアウト使用で

<ProgressBar
        Android:id="@+id/progressBar"
        Android:indeterminateDrawable="@drawable/progress_circle"
...
/>
1
Evgenii Vorobei

これをコードで実行したい場合は、次のようになります。

pd = new ProgressDialog(MainActivity.this);
pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
TextView tv = new TextView(this);
tv.setTextColor(Color.WHITE);
tv.setTextSize(20);
tv.setText("Waiting...");
pd.setCustomTitle(tv);
pd.setIndeterminate(true);
pd.show();

TextViewを使用すると、テキストの色、サイズ、およびフォントを変更することができます。それ以外の場合は、通常どおりsetMessage（）を呼び出すだけで済みます。

1
Flot2011