`ProgressMaterialButton` about simple-android HOT 16 CLOSED

Yes, that's what I meant. Use a ProgressDrawable instead of a ProgressBar widget.

from simple-android.

It should also be fairly easy to get an animated vector ourselves.

from simple-android.

As you already mentioned, a problem with this approach is that we would need to copy all attrs from MaterialButton and ProgressBar to get auto complete. In addition, we will need to keep this updated whenever new attrs are added, which is additional maintenance effort.

Instead of switching between different views, how about extending MaterialButton and changing the text, background, and colours based on the states? Maybe it might be worth discussing with the design team what a "progress" button would look like (ideally the behaviour should be similar to the "Contact Doctor" button we have now) and take a call on this.

from simple-android.

We could potentially add custom attrs specific to this:

app:failureStateText="@string/"
app:failureBackgroundDrawable=""
app:failureTextAppearance=""
app:progressStateText=""
...

from simple-android.

As you already mentioned, a problem with this approach is that we would need to copy all attrs from MaterialButton and ProgressBar to get auto complete. In addition, we will need to keep this updated whenever new attrs are added, which is additional maintenance effort.

Instead of switching between different views, how about extending MaterialButton and changing the text, background, and colours based on the states? Maybe it might be worth discussing with the design team what a "progress" button would look like (ideally the behaviour should be similar to the "Contact Doctor" button we have now) and take a call on this.

One of the reasons why I didn't extend the MaterialButton is it's not possible to place a ProgressBar inside the button since it's a TextView. Unless we remove the ProgressBar entirely to represent the progress state I am not sure how we can do this.

One random thought I have is to use custom progress drawable in place of the button icon. That way all we have to do is to replace the icon during the state changes and hide the text if it's just in progress mode, WDYT?

from simple-android.

I talked to Mahima about this, we can perhaps use an AnimatedVectorDrawable to indicate a loading state. The reason we are wary about using text to indicate loading state is it might get cut off when DPI high, so we think icon might be a good idea to go with.

from simple-android.

Also, there doesn't seem to be a straight forward way of implementing ProgressDrawable. I will continue looking into it.

from simple-android.

I talked to Mahima about this, we can perhaps use an AnimatedVectorDrawable to indicate a loading state. The reason we are wary about using text to indicate loading state is it might get cut off when DPI high, so we think icon might be a good idea to go with.

This is a good idea. Perhaps we can set it down as part of design principles for the progress buttons that we will add.

• All states must have the same width
• Progress states do not have any text, only a progress drawable.
• ?

from simple-android.

Also, there doesn't seem to be a straight forward way of implementing ProgressDrawable. I will continue looking into it.

I vaguely recall doing something in one of my previous jobs. Maybe we can look at the animated vector resource which the framework ProgressBar uses and just reuse that?

from simple-android.

Also, there doesn't seem to be a straight forward way of implementing ProgressDrawable. I will continue looking into it.

I vaguely recall doing something in one of my previous jobs. Maybe we can look at the animated vector resource which the framework ProgressBar uses and just reuse that?

ProgressBar uses a drawable created programmatically iirc. But I will just go with creating a custom AnimatedVectorDrawable first.

from simple-android.

Also, there doesn't seem to be a straight forward way of implementing ProgressDrawable. I will continue looking into it.

I vaguely recall doing something in one of my previous jobs. Maybe we can look at the animated vector resource which the framework ProgressBar uses and just reuse that?

ProgressBar uses a drawable created programmatically iirc. But I will just go with creating a custom AnimatedVectorDrawable first.

Were we able to see any progress (sorry!) on this? If using an animated vector works, we should go ahead and make this change once Telemed v2 is done. This would be useful in a few other screens as well (patient registration, for one).

from simple-android.

Were we able to see any progress (sorry!) on this? If using an animated vector works, we should go ahead and make this change once Telemed v2 is done. This would be useful in a few other screens as well (patient registration, for one).

I have tried it with CircularProgressDrawable which doesn't seem to work properly. Once Telemed v2 is done, I will create a new AVD or recently material library update introduced ProgressIndicator, in the design docs they showed using it with buttons, so I will give it a try as well.

from simple-android.

Nice!

from simple-android.

Progress (😂 ) on the button. I have found a progress AVD that is already made. Everything seems to work fine, one thing we might need to add is saving the state of the ButtonState.

class ProgressMaterialButton(
  context: Context,
  attrs: AttributeSet? = null
) : MaterialButton(context, attrs) {

  enum class ButtonState {
    InProgress, Enabled, Disabled
  }

  private var buttonState = ButtonState.InProgress
  private var buttonText: String? = null
  private var buttonIcon: Drawable? = null
  private var buttonIconGravity: Int? = null

  private var progressDrawable = AnimatedVectorDrawableCompat.create(context, R.drawable.avd_progress)

  private val progressAvdCallback = object : Animatable2Compat.AnimationCallback() {
    override fun onAnimationEnd(drawable: Drawable?) {
      super.onAnimationEnd(drawable)
      progressDrawable?.start()
    }
  }

  init {
    val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressMaterialButton)

    buttonText = typedArray.getString(R.styleable.ProgressMaterialButton_android_text)
    buttonIcon = typedArray.getDrawable(R.styleable.ProgressMaterialButton_icon)
    buttonIconGravity = iconGravity

    setButtonState(buttonState)
    typedArray.recycle()
  }

  override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    progressDrawable?.run {
      registerAnimationCallback(progressAvdCallback)
      start()
    }
  }

  override fun onDetachedFromWindow() {
    super.onDetachedFromWindow()
    progressDrawable?.unregisterAnimationCallback(progressAvdCallback)
  }

  fun setButtonState(buttonState: ButtonState) {
    when (buttonState) {
      ButtonState.InProgress -> {
        isEnabled = true
        isClickable = false
        icon = progressDrawable
        text = null
        iconGravity = ICON_GRAVITY_TEXT_START
      }
      ButtonState.Enabled -> {
        isEnabled = true
        isClickable = true
        icon = buttonIcon
        text = buttonText
        if (buttonIconGravity != null) {
          iconGravity = buttonIconGravity!!
        }
      }
      ButtonState.Disabled -> {
        isEnabled = false
        icon = buttonIcon
        text = buttonText
        if (buttonIconGravity != null) {
          iconGravity = buttonIconGravity!!
        }
      }
    }
    this.buttonState = buttonState
  }
}

from simple-android.

This looks good. Let's make a ticket for implementing this and get to it once Telemed v2 is complete.

from simple-android.

Tracking the story here: https://www.pivotaltracker.com/story/show/173283089

We already had an existing story for this: https://www.pivotaltracker.com/story/show/172854764

from simple-android.