Wie kann ich die neue "Floating Action Button" zwischen zwei Widgets / Layouts hinzufügen

Ich vermute, Sie haben die neuen Android-Design-Richtlinien gesehen, mit dem neuen "Floating Action Button" aka "FAB"

Zum Beispiel diese rosa Taste:

Bildbeschreibung hier eingeben

Meine Frage klingt dumm, und ich habe schon viele Dinge ausprobiert, aber was ist der beste Weg, um diesen Knopf an der Kreuzung von zwei Layouts zu setzen?

Im obigen Beispiel ist dieser Knopf perfekt zwischen dem, was wir uns vorstellen können, ein ImageView und ein relativesLayout zu sein.

Ich habe schon viele Tweaks ausprobiert, aber ich bin überzeugt, dass es einen richtigen Weg gibt, es zu tun.

  • Snackbar verbirgt die schwimmende Aktion beim Drücken der Aktionstaste darauf
  • FloatingActionButton mit animierten Symbol
  • Schwimmende Aktionstaste, die nicht über recyclerview (das ist in einem DrawerLayout)
  • Circular Reveal funktioniert nicht, wenn FAB Gravity unten ist
  • FloatingActionButton Icon Animation (Android FAB src Zeichnungsanimation)
  • Wie man die FloatingActionButton der neuen Design Support Library animiert
  • Floating Action Button erscheint über Navigation Schublade
  • FloatingActionButton kommt nicht herunter, wenn Snackbar entlassen wird
  • 9 Solutions collect form web for “Wie kann ich die neue "Floating Action Button" zwischen zwei Widgets / Layouts hinzufügen”

    Beste Übung:

    • Add compile 'com.android.support:design:25.0.1' zu gradle Datei
    • Verwenden Sie CoordinatorLayout als Root-Ansicht.
    • layout_anchor zur FAB hinzu und setze sie in die obere Ansicht
    • layout_anchorGravity zur FAB hinzu und setze sie auf: bottom|right|end

    Bildbeschreibung hier eingeben

     <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/viewA" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.6" android:background="@android:color/holo_purple" android:orientation="horizontal"/> <LinearLayout android:id="@+id/viewB" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.4" android:background="@android:color/holo_orange_light" android:orientation="horizontal"/> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_done" app:layout_anchor="@id/viewA" app:layout_anchorGravity="bottom|right|end"/> </android.support.design.widget.CoordinatorLayout> 

    Scheint wie der sauberste Weg in diesem Beispiel ist:

    • Verwenden Sie eine RelativeLayout
    • Positioniere die 2 nebeneinander liegenden Ansichten untereinander
    • Richten Sie die FAB an die übergeordnete rechts / ende aus und fügen Sie einen rechten / Endrand hinzu
    • Richten Sie den FAB an die Unterseite der Kopfzeile aus und fügen Sie einen negativen Rand hinzu, die Hälfte der Größe des FAB inklusive Schatten

    Beispiel angepasst von shamanland Umsetzung, verwenden Sie, was FAB Sie wünschen. Angenommen, FAB ist 64dp hoch inklusive Schatten:

     <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <View android:id="@+id/header" android:layout_width="match_parent" android:layout_height="120dp" /> <View android:id="@+id/body" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/header" /> <fully.qualified.name.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignBottom="@id/header" android:layout_marginBottom="-32dp" android:layout_marginRight="20dp" /> </RelativeLayout> 

    FAB Layout Beispiel

    Sie können das Beispielprojekt von Google in Android Studio importieren, indem Sie auf Datei> Stichprobe importieren klicken.

    Probe importieren

    Dieses Beispiel enthält eine FloatingActionButton-Ansicht, die von FrameLayout erbt.

    Bearbeiten Mit der neuen Support Design Library können Sie es wie in diesem Beispiel implementieren: https://github.com/chrisbanes/cheesesquare

    Mit AppCompat 22 wird das FAB für ältere Geräte unterstützt.

    Füge die neue Support-Bibliothek in deinem build.gradle (app) hinzu:

     compile 'com.android.support:design:22.2.0' 

    Dann kannst du es in deinem xml benutzen:

     <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@android:drawable/ic_menu_more" app:elevation="6dp" app:pressedTranslationZ="12dp" /> 

    Um elevation und pressedTranslationZ Eigenschaften zu verwenden, wird Namespace- app benötigt, also füge diesen Namespace zu deinem Layout hinzu: xmlns:app="http://schemas.android.com/apk/res-auto"

    Jetzt ist es Teil der offiziellen Design Support Library.

    In deinem gradle:

     compile 'com.android.support:design:22.2.0' 

    http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

    Hier ist eine zusätzliche kostenlose Floating Action Button-Bibliothek für Android . Es hat viele Anpassungen und erfordert SDK Version 9 und höher

    Bildbeschreibung hier eingeben

    Volles Demo-Video

     dependencies { compile 'com.scalified:fab:1.1.2' } 

    Probieren Sie diese Bibliothek ( javadoc ist hier ), min API Level ist 7:

     dependencies { compile 'com.shamanland:fab:0.0.8' } 

    Es bietet ein einziges Widget mit der Fähigkeit, es über Theme, xml oder Java-Code anzupassen.

    Lichtzwischen

    Es ist sehr einfach zu bedienen. Es gibt normal und mini Implementierung nach Promoted Actions Muster.

     <com.shamanland.fab.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_action_my" app:floatingActionButtonColor="@color/my_fab_color" app:floatingActionButtonSize="mini" /> 

    Versuchen Sie, die Demo-App zu kompilieren. Es gibt ein ausführliches Beispiel: leichte und dunkle Themen, die mit ListView , zwischen zwei Ansichten ausrichten .

    Halten Sie es einfach Hinzufügen Floating Action Button mit TextView, indem Sie gerundeten xml Hintergrund. – Add compile com.android.support:design:23.1.1 zu gradle Datei

    • Verwenden Sie CoordinatorLayout als Root-Ansicht.
    • Vor dem Beenden des CoordinatorLayout ein TextView einführen.
    • Innerhalb Drawable zeichnen einen Kreis.

    Circle Xml ist

     <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/colorPrimary"/> <size android:width="30dp" android:height="30dp"/> </shape> 

    Layout xml ist

     <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="5" > <RelativeLayout android:id="@+id/viewA" android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1.6" android:background="@drawable/contact_bg" android:gravity="center_horizontal|center_vertical" > </RelativeLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="3.4" android:orientation="vertical" android:padding="16dp" android:weightSum="10" > <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" > </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Name" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:id="@+id/name" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="Ritesh Kumar Singh" android:singleLine="true" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Phone" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:id="@+id/number" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="8283001122" android:textSize="22dp" android:textColor="@android:color/black" android:singleLine="true" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Email" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="ritesh.singh@betasoftsystems.com" android:textSize="22dp" android:singleLine="true" android:textColor="@android:color/black" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="City" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="Panchkula" android:textSize="22dp" android:textColor="@android:color/black" android:singleLine="true" android:padding="3dp" /> </LinearLayout> </LinearLayout> </LinearLayout> <TextView android:id="@+id/floating" android:transitionName="@string/transition_name_circle" android:layout_width="100dp" android:layout_height="100dp" android:layout_margin="16dp" android:clickable="false" android:background="@drawable/circle" android:elevation="10dp" android:text="R" android:textSize="40dp" android:gravity="center" android:textColor="@android:color/black" app:layout_anchor="@id/viewA" app:layout_anchorGravity="bottom"/> </android.support.design.widget.CoordinatorLayout> 

    Klicken Sie hier, um zu sehen, wie es aussieht

    Fügen Sie diese Ihrer Gradle-Datei hinzu

     dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.0' compile 'com.android.support:design:23.0.1' } 

    Dies zu deinem activity_main.xml

     <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/viewOne" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.6" android:background="@android:color/holo_blue_light" android:orientation="horizontal"/> <LinearLayout android:id="@+id/viewTwo" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.4" android:background="@android:color/holo_orange_light" android:orientation="horizontal"/> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/floatingButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_done" app:layout_anchor="@id/viewOne" app:layout_anchorGravity="bottom|right|end" app:backgroundTint="#FF0000" app:rippleColor="#FFF" /> </android.support.design.widget.CoordinatorLayout> 

    Sie finden das vollständige Beispiel mit Android-Studio-Projekt zum Download auf http://www.ahotbrew.com/android-floating-action-button/

    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.