[Android] Visualize progress etc. with Progressbar

It is convenient to use the Progress bar when loading an image, when showing the other party's or your own HP, etc., when showing the degree of progress or loading. This time, I wanted to use a horizontally long Progressbar, so I will briefly summarize the implementation method.

Finally, I will publish the Progressbar project on my github. Please use it.

(Added on 2020/02/15) Thank you for reading a lot. I also added the source code of the Kotlin version.

Make a layout

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" 
 />

Create a Progressbar like this. The horizontally long Prigressbar can be specified by the part style ="? Android: attr / progressBarStyleHorizontal ".

However, the part that is not displayed as it is is transparent, so I do not know how much it is. Therefore, you can see it by making the background gray etc. with ʻandroid: background`. Let's make a 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>

It's a good idea to install other buttons so that when you press them, the progress of the bar will change. This time, I will write it in the form of ʻandroid: onClick = "hogeButton" . Try to make the bar 50%` when pressed. There is no deep meaning lol

Write a process in an activity

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 initial state%To

        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)
        }

        .
        .
        .

That's all there is to it. Did it work?

Implement animation

After all, the quality as an application will improve if you move with animation. That's why I'm going to implement it.

It's very easy just to add animation

It's not that difficult.

MainActivity.java

progressBar.setProgress(percent,true);

MainActivity.kt

ProgressBarHorizontal.setProgress(percent,true)

That's it. Just put the value in () and put true or flase. true = with animation flash = no animation

Make smoother animations with ObjectAnimator

The animation of setProgress is quite fast, isn't it? Very speedy. I wanted to specify it myself, so I created a ʻObjectAnimater` class to make a beautiful animation.

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.Animate in 5 seconds
        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()
    }

It is like this. By specifying DecelerateInterpolator with the setInterpolator method, we were able to create an animation in which the speed of change moves quickly at first and then slows down.

What do you think? I hope it helps.

Let's have a fun Android life! ** **

# Reference article - [ProgressBar | Android Developers](https://developer.android.com/reference/android/widget/ProgressBar) - [DecelerateIntetpolator | Android Developers](https://developer.android.com/reference/android/view/animation/DecelerateInterpolator) -[I was a little addicted to the Progress Bar](http://nyanyoni.hateblo.jp/entry/2018/02/07/022435) -[Display progress in Horizontal of ProgressBar](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)