Progress Animation

[jpshelley]

Would love to see someone add a feature to include the progress activity as noted here: http://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators -By adding the progress to the outer circle of the FAB.

Any thoughts?

[rahatarmanahmed]

+1

[nwalters512]

+1

[AkshayChordiya]

This would be beautiful @makovkastar

[outadoc]

I've been looking for this for quite a while now, and this would really be a great addition.

[ChrisMCMine]

you could try to achieve this effect using this library https://github.com/pnikosis/materialish-progress and in the layout something like this: (Pseudo code)

<FrameLayout>
    <com.melnykov.fab.FloatingActionButton
              android:layout_width="56dp"
              android:layout_height="56dp" />
    <com.pnikosis.materialishprogress.ProgressWheel
              android:layout_width="56dp"
              android:layout_height="56dp"
              android:visibility="gone" />
</FrameLayout>

And when you want to display the ProgressWheel simply make it visible (setVisibility) I haven't tried that out so I've no idea how this will look like (Maybe the ProgressWheel has to be ~2dp bigger so that it doesn't lay directly on the FAB)

[rahatarmanahmed]

Forgive me for plugging my own library but I think it is more accurate to the examples given in the Material design guide: https://github.com/rahatarmanahmed/CircularProgressView

The only problem I can think of with compositing a FAB and a progress wheel is that the shadow would need to be larger.

I've also had trouble with drawing views on top of a FAB, not sure how to fix that either. On Nov 29, 2014 6:39 AM, "ChrisMCMine" [email protected] wrote:

you could try to achieve this effect using this library https://github.com/pnikosis/materialish-progress and in the layout something like this: (Pseudo code)

And when you want to display the ProgressWheel simply make it visible ( setVisibility) I haven't tried that out so I've no idea how this will look like (Maybe the ProgressWheel has to be ~2dp bigger so that it doesn't lay directly on the FAB)

— Reply to this email directly or view it on GitHub https://github.com/makovkastar/FloatingActionButton/issues/24#issuecomment-64950537 .

[nwalters512]

Rahat, do you have any opposition to me trying to integrate your code directly into this library?

[rahatarmanahmed]

I would prefer it if you used my library as a dependency, and any changes you need be made as pull requests. But otherwise, I don't have any objections.

[nwalters512]

@rahatarmanahmed @makovkastar I foked the FAB library and I've started work here: https://github.com/nwalters512/FloatingActionButton. The best way I could think to do this is by adding a FAB and circular progress indicator to a single relative layout and creating a new custom view based on that. Because the FAB itself is an ImageButton, there was no way for me to add the progress indicator while keeping it a dependency. The issues I've had so far are that a) I can't make the circular progress view display above the FAB in the z-order, and b) putting the FAB in a relative layout seems to clip the shadow. I've tried several things and nothing's worked to solve either of the issues. Any help would be appreciated.

[rahatarmanahmed]

I've figured out why you can't draw anything on top of the FAB. This only happens in Lollipop because it uses elevation on Lollipop. Anything on a higher elevation has a higher z-order. Easy fix, set elevation to be the same as the FAB. Here's what I use to put my CircularProgressView on my FAB to be used as a loading animation (note this is within a relativelayout with some other stuff I didn't include):

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/player_bottom_bar"
    android:layout_alignParentRight="true"
    android:layout_marginRight="16dp"
    android:layout_marginTop="-28dp"
    android:clipChildren="false"
    >
    <com.melnykov.fab.FloatingActionButton
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/playPauseButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_action_play_light"
        fab:fab_colorNormal="@color/colorPrimary"
        fab:fab_colorPressed="@color/colorPrimaryDark"
        />
    <com.github.rahatarmanahmed.cpv.CircularProgressView
        xmlns:cpv="http://schemas.android.com/apk/res-auto"
        android:id="@+id/loading_anim"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center"
        android:elevation="@dimen/fab_elevation_lollipop"
        cpv:cpv_color="#FFF"
        cpv:cpv_indeterminate="true"
        cpv:cpv_thickness="3dp"
        />
</FrameLayout>

[sailorseashell]

:+1: I would also love to see this feature!

[rahatarmanahmed]

Oh @nwalters512 I forgot to mention to solve the clipping issue, I had to put clipChildren on both the surrounding FrameLayout as you see, AND the parent RelativeLayout. No clue why but that fixed it.

[nekdenis]

+1

[TpRadebe]

+1

[jpshelley]

For those still looking for a clean progress bar too: https://github.com/ckurtm/FabButton

[githubdoramon]

+1