Circular Progress with a floating action button

Question

I`m studing the new material design and I'm having some problems.

I would like to know if some of you know how can I do a progress bar with the floating action button like this https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with-integration-gif

Is there any api on Android L for this?

Thanks

score 15 · Answer 1 · answered Mar 31 '17 at 10:55

This worked for me, I used a Relative-layout and fitted both in the center of the Relative-Layout.

...
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:layout_anchor="@id/my_recycler_view"
    app:layout_anchorGravity="bottom|right|end"
    >

    <ProgressBar
        android:id="@+id/fabProgress"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:indeterminateTint="@color/colorPrimary"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/newReportButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:fabSize="normal"
        android:layout_centerInParent="true"
        />

</RelativeLayout>
...

Dmitry · Answer 2 · 2016-05-19T17:20:59.700

4

You can use it: https://github.com/DmitryMalkovich/circular-with-floating-action-button to integrate circular progress with floating action button. The solution is not a custom fab, it is only a simple container for your our fab, so you can style as before!

<com.dmitrymalkovich.android.ProgressFloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_backup_black_24dp" />

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</com.dmitrymalkovich.android.ProgressFloatingActionButton>

edited May 19 '16 at 17:20

answered Apr 16 '16 at 17:24

Dmitry

149
1
7

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/12041055) – Muhammed Refaat Apr 17 '16 at 11:09
1

Thank you @MuhammedRefaat. Is it better now? – Dmitry Apr 17 '16 at 11:38
Sure, this is a complete and fulfill answer now. – Muhammed Refaat Apr 17 '16 at 11:44

score 2 · Accepted Answer · answered Jan 15 '18 at 08:02

2

I would suggest Floating Action Button by Jorge Costillo. It is better than Kurt's one from the accepted answer which I have also tried.

The Kurt's one has no support for vector drawables (srcCompat attribute), image sizing problems, no fab-mini support, material icon guideline mismathces.

Costillo's FAB is also more like a wrapper around standard Android FAB.

answered Jan 15 '18 at 08:02

Zon

18,610
7
91
99

tested this one? https://stackoverflow.com/a/36667320/304270 – Ewoks Jul 05 '18 at 11:22
Yes. I've implemented it in my project, but copied the classes locally, instead of gradle import. Made some tuning too. – Zon Jul 05 '18 at 16:59
Cool... so you still have impression that one by Jorge is the best one? thanks in advance – Ewoks Jul 05 '18 at 17:24
1

I've tried both and found Costillo's FAB more adoptable due to the upper mentioned reasons. – Zon Jul 05 '18 at 17:29
This is great library but doesn't work when your parent layout is FrameLayout. – Vikas Patidar Nov 04 '18 at 17:36

score 0 · Answer 4 · answered Nov 28 '14 at 10:31

You could use the following library to achieve the material style button > https://github.com/makovkastar/FloatingActionButton (or this one > https://github.com/futuresimple/android-floating-action-button)

For the spinner you could also use this library > https://github.com/oguzbilgener/CircularFloatingActionMenu

You could then combine these two components by adding them to a RelativeLayout (one on top of the other) and also add some animations i.e. Expand button with zoom, expand progress behind with zoom. All you'd need to do then is hook into the progress bar code to contract it once it had completed its loading i.e. shrink it behind the button.

For backwards compatible animation have a look at 9 old Androids here > http://nineoldandroids.com/

Hope this helps.

score 0 · Answer 5 · answered Oct 12 '17 at 12:36

I have solved the issue adding a progess bar to the layout and then using a custom behaviour for the progress bar. Layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="es.mediaserver.newinterfacedlna.MainActivity">

    <android.support.design.widget.AppBarLayout android:layout_width="match_parent"
        android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"
        android:id="@+id/include" />

    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_margin="28dp"
        android:layout_gravity="bottom|center"
        app:srcCompat="@android:drawable/ic_media_play" />

    <ProgressBar
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyle"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="bottom|center"
        android:indeterminate="true"
        android:layout_margin="@dimen/fab_margin"
        />

</android.support.design.widget.CoordinatorLayout>

Custom Behaviour component

    public static class SnackBarBehavior extends CoordinatorLayout.Behavior<View> {
    private static final boolean SNACKBAR_BEHAVIOR_ENABLED;
    public SnackBarBehavior() {
        super();
    }
    public SnackBarBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return SNACKBAR_BEHAVIOR_ENABLED && dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }

    @Override
    public void onDependentViewRemoved(CoordinatorLayout parent, View child, View dependency) {
        child.setTranslationY(0);
    }

    static {
        SNACKBAR_BEHAVIOR_ENABLED = Build.VERSION.SDK_INT >= 11;
    }
}

And finally in the onCreate (or in the layout with app:layout_behavior="xxx.xxx.SnackBarBehavior")

ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar2);
SnackBarBehavior snackBarBehavior = new SnackBarBehavior();
        CoordinatorLayout.LayoutParams coordinatorParams = (CoordinatorLayout.LayoutParams) progressBar.getLayoutParams();
        coordinatorParams.setBehavior(snackBarBehavior);

Note: I based my behaviour component in the one posted here How to move a view above Snackbar just like FloatingButton

Circular Progress with a floating action button

5 Answers5