android - programacion - Progreso circular con un botón de acción flotante

manual de programacion android pdf

Question

Estoy estudiando el nuevo diseño de material y estoy teniendo algunos problemas.

Me gustaría saber si algunos de ustedes saben cómo puedo hacer una barra de progreso con el botón de acción flotante como este https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with-integration-gif

¿Hay alguna API en Android L para esto?

Gracias

Answer 1

Encontré una lib que hace eso, parece bastante simple

https://github.com/ckurtm/FabButton

Answer 2

Esto funcionó para mí, utilicé un diseño relativo y encajé ambos en el centro del diseño relativo.

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

Answer 3

He resuelto el problema al agregar una barra de progreso al diseño y luego usar un comportamiento personalizado para la barra de progreso. Diseño:

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

Componente de comportamiento personalizado

    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;
    }
}

Y finalmente en el onCreate (o en el diseño con la aplicación: 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);

Nota: basé mi componente de comportamiento en el que se publicó aquí Cómo mover una vista arriba de Snackbar como FloatingButton

Answer 4

Puede usar la siguiente biblioteca para lograr el botón de estilo de material> https://github.com/makovkastar/FloatingActionButton (o este> https://github.com/futuresimple/android-floating-action-button )

Para el hilandero también puede usar esta biblioteca> https://github.com/oguzbilgener/CircularFloatingActionMenu

Luego, puede combinar estos dos componentes agregándolos a un RelativeLayout (uno encima del otro) y también agregar algunas animaciones, es decir, el botón Expandir con zoom, expandir el progreso detrás con el zoom. Todo lo que necesitas hacer es enganchar el código de barras de progreso para contraerlo una vez que haya completado su carga, es decir, reducirlo detrás del botón.

Para una animación compatible con versiones anteriores, eche un vistazo a 9 androides antiguos aquí> http://nineoldandroids.com/

Espero que esto ayude.

Answer 5

Yo sugeriría el botón de acción flotante de Jorge Costillo . Es mejor que el de Kurt de la respuesta aceptada que también he intentado.

El de Kurt no tiene soporte para vectores dibujables (atributo srcCompat), problemas de tamaño de imagen, ningún soporte de fab-mini, discrepancias en la guía del icono de material.

La FAB de Costillo también es más como una envoltura alrededor de la FAB estándar de Android.

Answer 6

Puede usarlo: https://github.com/DmitryMalkovich/circular-with-floating-action-button para integrar el progreso circular con el botón de acción flotante. La solución no es un fabuloso personalizado, es solo un contenedor simple para su fabuloso, ¡así que puede diseñar como antes!

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