Should we change the layout again on each screen?Option 2 would be to use 3rd party components like this.
One of the main disadvantages of such an approach is you lose some part of the flexibility and for example, you can’t take advantage of the new MaterialButton by Google.
It also doesn’t follow guidelines.
Option 3: We already have a solution to show progress using drawable provided by Android — AnimationDrawable.
And luckily we have a ready to use progress drawable in a support-v4 package — CircularProgressDrawable.
We also have a solution to show drawable along with text — SpannableString + DynamicDrawableSpan.
So then just a few lines and…It doesn’t work as expected.
The animation is freezingThe drawable is not aligned with the text baselineThere is no padding between text and progressLet’s try to solve the first problem.
The animation is freezing because our button doesn’t know when to redraw its state.
DynamicDrawableSpan doesn’t trigger button redraw by default.
That means we have to do it manually.
We can subscribe to AnimationDrawable animation updates and call button.
invalidate() to force button call draw while the animation is active.
Now animation works fine:Now let’s align the drawable properly.
To do so we can extend ImageSpan and override getSize and draw methods.
For a better understanding of what each font metrics means you can refer to really good explanation by Orhan Obut.
and use new Spannable classval drawableSpan = CustomDrawableSpan(progressDrawable, marginStart = 20)Let’s check the result:You could see that “text to progress” transition is not smooth enough.
We can fix it by using ObjectAnimator.
I’m not gonna cover this topic here though but you can get the idea from here.
I already prepared a “ready to use” library called “ProgressButton” for you.
So you don’t need to handle view lifecycle and create all this code from scratch.
It also provides smooth text change animations out of the box.