Avanzamento circolare con un pulsante di azione mobile

Question

Sto studiando il nuovo design del materiale e sto riscontrando alcuni problemi.

vorrei sapere se qualcuno di voi sa come posso fare una barra di avanzamento con il pulsante di azione fluttuante come questo https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with-integration-gif

C'è api su Android L per questo?

Grazie

Answer 1

Ho trovato un lib, che lo fa, sembra abbastanza semplice

https://github.com/ckurtm/FabButton

Answer 2

È possibile utilizzare la seguente libreria di raggiungere il pulsante stile materiale>https://github.com/makovkastar/FloatingActionButton (o questa>https://github.com/futuresimple/android-floating-action-button)

Per il filatore si potrebbe anche usare questa libreria>https://github.com/oguzbilgener/CircularFloatingActionMenu

È potrebbe quindi combinare questi due componenti aggiungendoli a un RelativeLayout (uno sopra l'altro) e aggiungere anche alcune animazioni, ad esempio il pulsante Espandi con lo zoom, espandere il progresso indietro con lo zoom. Tutto quello che devi fare è collegare il codice della barra di avanzamento per contrattarlo una volta completato il caricamento, ovvero ridurlo dietro al pulsante.

Per all'indietro animazione compatibile un'occhiata a 9 vecchi androidi qui>http://nineoldandroids.com/

Spero che questo aiuti.

Answer 3

Si può usare: https://github.com/DmitryMalkovich/circular-with-floating-action-button di integrare i progressi circolare con pulsante di azione galleggiante. La soluzione non è un fab su misura, è solo un semplice contenitore per il nostro fab, quindi puoi stile come prima!

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

Answer 4

questo ha funzionato per me, ho usato un relativo layout e dotato sia nel centro del relativo-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> 
... 

Answer 5

ho risolto il problema aggiungendo una barra progess al layout e quindi utilizzando un comportamento personalizzato per la barra di avanzamento. 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> 

componente comportamento personalizzato

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

E infine nella onCreate (o nel layout con 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); 

Nota: ho basato il mio componente di comportamento in quello pubblicato qui How to move a view above Snackbar just like FloatingButton

Answer 6

Suggerirei Floating Action Button by Jorge Costillo. È migliore di quello di Kurt dalla risposta accettata che ho anche provato.

Quello di Kurt non ha supporto per i drawable vettoriali (attributo srcCompat), i problemi di dimensionamento delle immagini, nessun supporto fab-mini, errori nelle linee guida delle icone dei materiali.

FAB di Costillo è anche più simile a un wrapper su Android FAB standard.