[Android]Progressbarで進捗などを可視化する

画像を読み込んでいる時、相手や自分のHPを示す時、など進捗の度合いや読み込みを示す時に、Progressbarを使うのが便利です。
今回、横長のProgressbarを使いたかったので、簡単に実装方法をまとめます。

最後に私のgithubでProgressbarのプロジェクトを公開しておきます。ご活用ください。

(2020/02/15追記)
沢山読んでいただきありがとうございます。
Kotlin版のソースコードも追記しておきました。

レイアウトを作る

activity_main.xml

 <ProgressBar
     android:id="@+id/ProgressBarHorizontal"
     style="?android:attr/progressBarStyleHorizontal"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:background="@drawable/progress_bg"
     android:max="100"
     android:progress="86"
     android:progressDrawable="@drawable/progressbar" 
 />

　こんな感じでProgressbarを作成します。
横長のPrigressbarはstyle="?android:attr/progressBarStyleHorizontal"という部分で指定できます。

　ですが、このままだと表示されない部分は透過されるので全体がどれくらいなのかがわかりません。
そこで、android:backgroundで背景をグレーなどにすることによって見ることができます。
背景を作りましょう。

drawable/progress_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="ring"
        android:thickness="5dp"
        android:useLevel="false">
        <solid android:color="@color/blue_grey_400" />
    </shape>
</layer-list>

他にもボタンを設置して、押したらバーの進捗が変わるようにしてみるといいですね。
今回は適当にandroid:onClick = "hogeButton"という形で書いてみます。
押すとバーを50%にするようにしてみます。特に深い意味はありません笑

アクティビティに処理を書く

java

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private  ProgressBar progressBar;
    private int percent;

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

        percent = 81; //初期状態を81%にします。

        progressBar = (ProgressBar)findViewById(R.id.ProgressBarHorizontal);
        progressBar.setMax(100);
        progressBar.setProgress(percent);
        progressBar.setMin(0);
    }

    public void hogeButton(View v){
        percent = 50;
        progressBar.setProgress(percent);
    }

Kotlin

MainActivity.kt

class KotlinMainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var percent = 81

        ProgressBarHorizontal.max = 100
        ProgressBarHorizontal.progress = percent
        ProgressBarHorizontal.min = 0

        hogebutton.setOnClickListener {
            percent = 0
            onHogeProgressChanged(percent)
        }

        .
        .
        .

これで完成です。うまく行きましたか？

アニメーションを実装する

やはりアニメーションを入れて動いた方がアプリとしてのクオリティも上がりますよね。
というわけで実装しようと思います。

アニメーション入れるだけは至って簡単

そんなに難しいことではありません。

MainActivity.java

progressBar.setProgress(percent,true);

MainActivity.kt

ProgressBarHorizontal.setProgress(percent,true)

これだけなんです。()内に値を入れて、trueかflaseを入れるだけなんです。
true = アニメーションあり
flase = アニメーションなし

ObjectAnimatorを使ってもっとスムーズなアニメーションにする

setProgressのアニメーションって、結構早いんですよね。めっちゃスピーディ。
自分で指定したいなって思ったので、ObjectAnimaterクラスを作って綺麗なアニメーションにします。

MainActivity.java

    public void hogeButton(View v){
        percent = 50;
        onHogeProgressChanged(pacent);
    }

   private void onHogeProgressChanged(int percentage){
        Animator animation = ObjectAnimator.ofInt(progressBar,"progress",percentage);
        animation.setDuration(500); // 0.5秒間でアニメーションする
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();
   }

MainActivity.kt

   hogeButton.setOnClickListener {
        percent = 0
        onHogeProgressChanged(percent)
   }

    private fun onHogeProgressChanged(percentage: Int) {
        val animation = ObjectAnimator.ofInt(ProgressBarHorizontal, "progress", percentage)
        animation.duration = 500
        animation.interpolator = DecelerateInterpolator()
        animation.start()
    }

こんな感じです。
setInterpolatorメソッドでDecelerateInterpolatorを指定してあげることで、変化の速さが最初は素早く動いて、どんどん減速するアニメーションができました！

いかがでしょうか？
お役に立てたなら嬉しいです。

それでは楽しいAndroidライフを！

# 参考記事 - [ProgressBar | Android Developers](https://developer.android.com/reference/android/widget/ProgressBar) - [DecelerateIntetpolator | Android Developers](https://developer.android.com/reference/android/view/animation/DecelerateInterpolator) - [ProgressBarでちょっとハマった](http://nyanyoni.hateblo.jp/entry/2018/02/07/022435) - [ProgressBarのHorizontalで進捗を表示する](http://dorodoro.info/tip/progressbar%E3%81%AEhorizontal%E3%81%A7%E9%80%B2%E6%8D%97%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/) - [github] (https://github.com/yukiyuki961/ProgressbarApp)