web-dev-qa-db-de.com

Wie kann ich den neuen "Floating Action Button" zwischen zwei Widgets / Layouts einfügen?

Ich vermute, Sie haben die neuen Android Designrichtlinien mit dem neuen "Floating Action Button" und "FAB" gesehen.

Zum Beispiel dieser rosa Knopf:

enter image description here

Meine Frage klingt dumm, und ich habe bereits viele Dinge ausprobiert, aber wie kann man diese Schaltfläche am besten an der Schnittstelle zweier Layouts platzieren?

Im obigen Beispiel befindet sich diese Schaltfläche perfekt zwischen einem ImageView und einem relativeLayout.

Ich habe bereits viele Optimierungen versucht, bin aber überzeugt, dass es einen geeigneten Weg gibt, dies zu tun.

281
Waza_Be

Beste Übung:

  • compile 'com.Android.support:design:25.0.1' zur gradle-Datei hinzufügen
  • Verwenden Sie CoordinatorLayout als Stammansicht.
  • Fügen Sie dem FAB layout_anchor hinzu und setzen Sie es auf die Draufsicht
  • Füge layout_anchorGravity zum FAB hinzu und stelle es auf: bottom|right|end

enter image description here

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

Scheint in diesem Beispiel am saubersten zu sein:

  • Verwenden Sie ein RelativeLayout
  • Positionieren Sie die beiden benachbarten Ansichten untereinander
  • Richten Sie den FAB am übergeordneten rechten/Ende aus und fügen Sie einen rechten/Endrand hinzu
  • Richten Sie das FAB am unteren Rand der Kopfzeilenansicht aus und fügen Sie einen negativen Rand hinzu, der halb so groß wie das FAB einschließlich Schatten ist

Beispiel aus der schamanischen Implementierung angepasst, verwenden Sie was auch immer FAB Sie wünschen. Angenommen, FAB ist 64 dpi hoch, einschließlich 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 example

91
Hugh Jeffner

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

Import sample

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

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

51
Roel

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

Fügen Sie die neue Support-Bibliothek in Ihre build.gradle (App) ein:

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

Dann können Sie es in Ihrer XML verwenden:

<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 die Eigenschaften elevation und pressedTranslationZ zu verwenden, wird der Namespace app benötigt. Fügen Sie daher diesen Namespace zu Ihrem Layout hinzu: xmlns:app="http://schemas.Android.com/apk/res-auto"

16
Oded Breiner

Jetzt ist es Teil der offiziellen Design Support Library.

In deiner Klasse:

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

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

14
Veronnie

Versuchen Sie diese Bibliothek ( Javadoc ist hier ), die minimale API-Ebene ist 7:

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

Es bietet ein einzelnes Widget mit der Möglichkeit, es über Theme, XML oder Java-Code anzupassen.

lightbetween

Es ist sehr einfach zu bedienen. Es gibt normal und mini Implementierungen gemäß 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 umfassendes Beispiel: Helle und dunkle Themen, die mit ListView zwischen zwei Ansichten ausgerichtet werden.

11
Oleksii K.

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

enter image description here

Vollständiges Demo-Video

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

Halten Sie es einfach Hinzufügen einer schwebenden Aktionsschaltfläche mithilfe von TextView, indem Sie einen abgerundeten XML-Hintergrund angeben. - Compile com.Android.support:design:23.1.1 zur Gradle-Datei hinzufügen

  • Verwenden Sie CoordinatorLayout als Stammansicht.
  • Vor dem Beenden des CoordinatorLayouts führen Sie eine Textansicht ein.
  • Innerhalb Drawable zeichnen Sie 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="[email protected]"
                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 aussehen wird

6
Ritesh

Fügen Sie dies 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 Ihrer 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 Herunterladen unter http://www.ahotbrew.com/Android-floating-action-button/

5
Gurinder Singh

hier ist Arbeitscode.

Ich benutze appBarLayout, um meinen floatingActionButton zu verankern. Ich hoffe, das könnte hilfreich sein.

XML CODE.

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_height="192dp"
        Android:layout_width="match_parent">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            Android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <Android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                Android:id="@+id/toolbarItemDetailsView"
                Android:layout_height="?attr/actionBarSize"
                Android:layout_width="match_parent"></Android.support.v7.widget.Toolbar>
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="Android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <Android.support.constraint.ConstraintLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                Android:orientation="vertical"
                Android:focusableInTouchMode="true"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    Android:visibility="gone"
                    Android:layout_marginTop="56dp"
                    Android:layout_width="match_parent"
                    Android:layout_height="230dp"
                    Android:scaleType="centerCrop"
                    Android:src="@drawable/third" />


                <ScrollView
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent">

                    <RelativeLayout
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:layout_gravity="center"
                        Android:orientation="vertical">

                        <Android.support.v7.widget.CardView
                            Android:layout_width="match_parent"
                            Android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                Android:layout_width="match_parent"
                                Android:layout_height="match_parent"
                                Android:layout_margin="8dp"
                                Android:padding="3dp">


                                <LinearLayout
                                    Android:layout_width="match_parent"
                                    Android:layout_height="match_parent"
                                    Android:orientation="vertical">


                                    <TextView
                                        Android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        Android:layout_width="match_parent"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginLeft="4dp"
                                        Android:text="Title" />

                                    <LinearLayout
                                        Android:layout_width="match_parent"
                                        Android:layout_height="match_parent"
                                        Android:layout_marginTop="8dp"
                                        Android:orientation="horizontal">

                                        <TextView
                                            Android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginLeft="4dp"
                                            Android:layout_weight="1"
                                            Android:text="Shope Name" />

                                        <TextView
                                            Android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginRight="4dp"
                                            Android:gravity="right"
                                            Android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        Android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        Android:layout_width="match_parent"
                                        Android:minLines="5"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginLeft="4dp"
                                        Android:layout_marginTop="16dp"
                                        Android:text="description" />

                                    <LinearLayout
                                        Android:layout_width="match_parent"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginBottom="8dp"
                                        Android:orientation="horizontal">

                                        <TextView
                                            Android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginLeft="4dp"
                                            Android:layout_weight="1"
                                            Android:text="Qunatity" />

                                        <TextView
                                            Android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            Android:layout_width="wrap_content"
                                            Android:layout_height="wrap_content"
                                            Android:layout_marginRight="4dp"
                                            Android:layout_weight="1"
                                            Android:gravity="right"
                                            Android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        Android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        Android:layout_width="match_parent"
                                        Android:layout_height="wrap_content"
                                        Android:layout_marginRight="4dp"
                                        Android:layout_weight="1"
                                        Android:gravity="right"
                                        Android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </Android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </Android.support.constraint.ConstraintLayout>

    </Android.support.v4.widget.NestedScrollView>

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        Android:layout_marginEnd="@dimen/_6sdp"
        Android:src="@drawable/ic_done_black_24dp"
        Android:layout_height="wrap_content" />

</Android.support.design.widget.CoordinatorLayout>

Nun, wenn Sie den obigen Code einfügen. Sie sehen folgendes Ergebnis auf Ihrem Gerät. Result Image

1
Rk215 Tech