Circular Progress mit einer Floating-Action-Taste

Question

Ich studiere das neue Material Design und habe einige Probleme.

Ich würde gerne wissen, ob einige von Ihnen wissen, wie kann ich einen Fortschrittsbalken mit der Floating-Aktion Taste wie diese https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with-integration-gif

tun Gibt es eine api auf Android L für das?

Dank

Answer 1

fand ich eine lib, die das tut, scheint es ziemlich einfach

https://github.com/ckurtm/FabButton

Answer 2

Sie können die folgende Bibliothek verwenden, um das Material Artknopf>https://github.com/makovkastar/FloatingActionButton (oder diese>https://github.com/futuresimple/android-floating-action-button)

Für die Spinner erreichen Sie auch diese Bibliothek>https://github.com/oguzbilgener/CircularFloatingActionMenu

Sie verwenden könnten Dann könnten Sie diese beiden Komponenten kombinieren, indem Sie sie zu einem RelativeLayout (übereinander) hinzufügen und auch einige Animationen hinzufügen, z. B. die Schaltfläche Erweitern mit Zoom, und den Fortschritt mit dem Zoom vergrößern. Alles, was Sie dann tun müssen, ist, sich in den Fortschrittsbalken einzuklinken, um ihn zu kontrahieren, sobald er das Laden abgeschlossen hat, d. H. Ihn hinter der Schaltfläche verkleinern.

Für rückwärtskompatibel Animation haben einen Blick auf 9 alt Androids hier>http://nineoldandroids.com/

Hoffnung, das hilft.

Answer 3

Sie es verwenden können: https://github.com/DmitryMalkovich/circular-with-floating-action-button Kreis Fortschritte zu integrieren mit Aktionstaste schweben. Die Lösung ist keine benutzerdefinierte Fabrik, es ist nur ein einfacher Behälter für Ihre unsere Fab, so können Sie wie zuvor stylen!

<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

Das funktionierte für mich, ich verwendete ein Relatives Layout und passte beides in die Mitte des Relativen Layouts.

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

Ich habe das Problem das Hinzufügen einer progess Leiste auf das Layout gelöst und dann ein benutzerdefiniertes Verhalten für den Fortschrittsbalken verwenden. 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> 

Benutzerdefinierte Verhalten Komponente

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

Und schließlich in der onCreate (oder im Layout mit 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); 

Hinweis: Ich stütze meine Verhaltenskomponente in der hier geposteten How to move a view above Snackbar just like FloatingButton

Answer 6

Ich würde vorschlagen, Floating Action Button by Jorge Costillo. Es ist besser als Kurts aus der angenommenen Antwort, die ich auch versucht habe.

Das Kurts hat keine Unterstützung für Vektor-Zeichen (srcCompat-Attribut), Bildgrößenprobleme, keine fab-mini-Unterstützung, Material-Icon-Richtlinienfehler.

Costillo FAB ist auch eher wie ein Wrapper um Standard Android FAB.