Make a progress bar inside a button

Question

Problem

I would like to make a progress bar, as in this image:

Desired behavior:

• When the user presses the button, a dark gray progress bar appears and begins to increase at a constant pace. I want to determine how long it takes to fully fill (for example, 2 seconds).
• If the request comes to before the progress bar reaches 100%, the progress bar should go 100% (not inside the frame, but it should grow very quickly, as it happens in the Windows file explorer, when it loads, something ended when the indicator progress has not yet ended).
• If the request is not received before the bar reaches 100%, let it reach 100%. If the request has not yet arrived at 100% (i.e. in the last 2 seconds), a timeout will occur (I will make a snack, don’t worry about it, I know how to do it, this is just for clarification).

What i have found so far

I found in this article that is an example of what I want. Are there any problems with this approach? In addition, this example does not show how to adjust the progress bar (in my case, I want it to be gray in the upper part of the window with curved corners). But what I would most like to know is a good approach to this link.

My guesses

My main problems relate to the “fast filling” that occurs when the request arrives, but the progress indicator has not yet reached 100% (which, I believe, in most cases, it is very unlikely that the request arrives exactly at 100%). Accepting what is said in the link, I thought that when the request arrives, the doSomeTasks method should return a + 1 execution status for a short interval. So, in the example, if it is 55, it will return 56, 57, 58 ... Up to 100, and the returns will have an interval between say, by the way, 0.5 seconds. So I think . I could simulate a progress bar growing rapidly to 100%.

Any help is much appreciated, thanks!

Answer 1

Create a frame layout with text and a progress bar:

 <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ProgressBar android:id="@+id/progress_bar" android:progressDrawable="@drawable/progress_bar_states" android:layout_width="match_parent" android:layout_height="match_parent" android:indeterminate="false" style="?android:attr/progressBarStyleHorizontal" /> <TextView android:id="@+id/text_view_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Enter" android:textColor="@android:color/white" android:padding="6dp" android:textSize="16sp" android:textStyle="bold" android:gravity="center"/> </FrameLayout> 

You need to create a progressDrawable file.

The res / drawable / progress_bar_states.xml file declares the colors of different states:

 <?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="#777777" android:centerColor="#333333" android:centerY="0.75" android:endColor="#222222" android:angle="270" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <gradient android:startColor="#234" android:centerColor="#234" android:centerY="0.75" android:endColor="#a24" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <gradient android:startColor="#999999" android:centerColor="#777777" android:centerY="0.75" android:endColor="#555555" android:angle="270" /> </shape> </clip> </item> </layer-list> 

Then create the logic for your / progressbar button:

 final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar); final ObjectAnimator objectAnimator = ObjectAnimator.ofInt(progressBar, "progress", progressBar.getProgress(), 100).setDuration(2000); objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { int progress = (int) valueAnimator.getAnimatedValue(); progressBar.setProgress(progress); } }); TextView btn = (TextView) findViewById(R.id.text_view_button); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { objectAnimator.start(); } }); 

Basically, after clicking on the Textview ObjectAnimator is going to increase the ProgressBar by 2 seconds to complete.

If you want to speed up the progress of this method:

 private void completeFast(final ProgressBar progressBar) { final ObjectAnimator objectAnimator = ObjectAnimator.ofInt(progressBar, "progress", progressBar.getProgress(), progressBar.getMax()); objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { int progress = (int) valueAnimator.getAnimatedValue(); progressBar.setProgress(progress); } }); } 

He will complete the progress in 0.3 s.

Perhaps you want to change the colors of res / drawable / progress_bar_states.xml. But this is pretty much it =]

Result: