Replace Icon with ProgressBar

Question

I want there to be an icon, which when clicked on, will be replaced by a spinning progress bar. Once the appropriate task in the background has finished, the ProgressBar should be replaced by the icon again.

This is similar to the progress bar we all are used to in the action bar (e.g. as described here), but I want to achieve the same thing within a Fragment (dialog), so setActionView() is not available.

What would be the best way to tackle this?

Answer 1

So your next stop is ProgressButton by SundeepK (MIT License)

ProgressButton can be used to display a simple rotating Drawable to give the user the effect of a loading button. The Drawable will be displayed once the user clicks the button and will have to be manually dismissed using the stopLoadingAnimation() method.

ProgressButton class:

public class ProgressButton extends ImageButton {

private boolean _shouldDisplayLoadingAnimation = false;
private Drawable _loadingAnimation;
private TextPaint _textPaint;
private Rect _textBounds;
private String _defaultText;

public ProgressButton(Context context_, AttributeSet attrs_, int defStyle_) {
    super(context_, attrs_, defStyle_); 

    final TypedArray a = context_.obtainStyledAttributes(attrs_, R.styleable.ProgressButton,
            R.attr.progressButtonStyle, R.style.ProgressButton_attrs);

    this.setBackgroundColor(a.getInteger(R.styleable.ProgressButton_defaultBackgroundColor, Color.WHITE));

    _loadingAnimation = getDrawable();
    _loadingAnimation.setAlpha(0);
    _defaultText = a.getString(R.styleable.ProgressButton_defaultText);
    _textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
    _textPaint.density = getResources().getDisplayMetrics().density;

    _textPaint.setColor(a.getInteger(R.styleable.ProgressButton_defaultFontColor, Color.BLACK));
    _textPaint.setTextAlign(Align.CENTER);
    _textPaint.setTextSize(a.getInteger(R.styleable.ProgressButton_defaultFontSize, 40));
    _textPaint.setFakeBoldText(true);
    _textBounds = new Rect();

    a.recycle();
}

public ProgressButton(Context context_, AttributeSet attrs_) {
    this(context_, attrs_, 0);
}

public ProgressButton(Context context_) {
    this(context_, null);
}

@Override
public boolean performClick() {
    boolean isClicked = super.performClick();
    if (isClicked) {
        _shouldDisplayLoadingAnimation = true;
        this.invalidate();
    }

    return isClicked;
};


public void startLoadingAnimation() {
    _shouldDisplayLoadingAnimation = true;
    this.invalidate();
}

public void stopLoadingAnimation() {
    _shouldDisplayLoadingAnimation = false;
    this.invalidate();
}

@Override
protected void onDraw(Canvas canvas_) {
    if (_shouldDisplayLoadingAnimation) {
            shouldShowAnimation(true);
    } else {
        _textPaint.getTextBounds(_defaultText, 0, _defaultText.length(), _textBounds);
        canvas_.drawText( _defaultText , getWidth()/2, (getHeight()/2)+((_textBounds.bottom-_textBounds.top)/2) , _textPaint);
        shouldShowAnimation(false);
        _loadingAnimation.setVisible(false, false);
    }
    super.onDraw(canvas_);

}

private void shouldShowAnimation(boolean shouldShow_) {
    if (_loadingAnimation instanceof Animatable) {
        if (shouldShow_) {
            _loadingAnimation.setAlpha(255);
            ((Animatable) _loadingAnimation).start();
        } else {
            _loadingAnimation.setAlpha(0);
            ((Animatable) _loadingAnimation).stop();
        }
    }
}
}

define ProgressButton in your layout:

<com.sun.progressbutton.ProgressButton
    android:id="@+id/progressView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:padding="10dp"
    android:src="@drawable/progress_view"
    />