android – Circular Progress with a floating action button-ThrowExceptions

Exception or error:

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

How to solve:

I found a lib which does that, it seems pretty simple

https://github.com/ckurtm/FabButton

###

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>
...

###

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>

###

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.

###

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.

###

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

Leave a Reply

Your email address will not be published. Required fields are marked *