Jak mogę dodać nowy „Floating Action Button” między dwoma widżetami / układami

287

Wydaje mi się, że widzieliście nowe wytyczne dotyczące projektowania Androida, z nowym „Floating Action Button”, czyli „FAB”

Na przykład ten różowy przycisk:

wprowadź opis zdjęcia tutaj

Moje pytanie brzmi głupio i próbowałem już wielu rzeczy, ale jaki jest najlepszy sposób, aby umieścić ten przycisk na przecięciu dwóch układów?

W powyższym przykładzie przycisk ten jest idealnie umieszczony pomiędzy tym, co możemy sobie wyobrazić, że jest ImageView i relativeLayout.

Próbowałem już wielu poprawek, ale jestem przekonany, że jest na to właściwy sposób.

android android-coordinatorlayout floating-action-button Waza_Be
źródło
Możesz umieścić układy wewnątrz układu i ustawić przycisk na tym układzie
Chrome Penguin Studios
1
Myślę, że ta biblioteka może bardzo pomóc: github.com/ksoichiro/Android-ObservableScrollView
programista Androida
Jak to ukryć podczas przewijania? Mam do czynienia z problemem, w którym po przewinięciu strony fab pozostaje na wierzchu i nie ukrywa się! Proszę o pomoc
Anish Kumar,

Odpowiedzi:

473

Najlepsze praktyki:

  • Dodaj compile 'com.android.support:design:25.0.1'do pliku ocen
  • Użyj CoordinatorLayoutjako widoku głównego.
  • Dodaj layout_anchordo FAB i ustaw go w widoku z góry
  • Dodaj layout_anchorGravitydo FAB i ustaw na:bottom|right|end

wprowadź opis zdjęcia tutaj

<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>
David
źródło
3
@Andndiz Chciałbym również zacytować cytat, ale rozumiem, dlaczego jest to lepsza odpowiedź niż HughJeffner. Uważam to za prostsze, bardziej elastyczne, mniej hackerskie. Nie kodujesz na stałe żadnych wartości wysokości_klęku lub marginesów, które mogą się zmieniać w czasie lub być definiowane dynamicznie. Odpowiedź Hugh może pracować w kilku prostych przypadkach, a może i mógłby być obejście dla niektórych bibliotekach osób trzecich, które nie w pełni wspierają CoordinatorLayouti layout_anchori layout_anchorGravityfunkcji, takich jak ta, którą używa, futuresimples .
zgodnie z
1
Btw futuresimples to NIESAMOWITA biblioteka, a jeśli ktoś zastanawia się, czy istnieje rozwidlenie, które łączy to CoordinatorLayoutpodejście z tą biblioteką, spójrz . Jest też widelec do starszych wersji.
zgodnie z
2
Właśnie tego szukałem. +1 za prostotę.
Emiliano De Santis
29
Dlaczego tego wszystkiego nie ma w dokumentacji Androida?
Mostafa,
3
za pomocą aplikacji: layout_anchor powodujący problem z renderowaniem (linearlayout layoutparams nie może być rzutowany na koordynatorlayout. :(
DAVIDBALAS1
91

Wydaje się, że najczystszym sposobem w tym przykładzie jest:

  • Użyj układu względnego
  • Ustaw 2 sąsiednie widoki jeden pod drugim
  • Dopasuj FAB do nadrzędnego prawa / końcowego i dodaj margines prawy / końcowy
  • Dopasuj FAB do dolnej części widoku nagłówka i dodaj ujemny margines, o połowę mniejszy niż FAB wraz z cieniem

Przykład zaadaptowany z implementacji szamańskiej, użyj dowolnego FAB, jaki chcesz. Załóżmy, że FAB ma wysoką wartość 64dp, w tym cień:

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

Przykład układu FAB

Hugh Jeffner
źródło
Ten układ załatwił sprawę! Korzystam FABz futuresimple - dodawanie i używanie jest dość proste, ciesz się!
Rzym.
Tak jak powiedziałeś „Ustaw dwa sąsiednie widoki jeden pod drugim” -> to był mój problem, po prostu przeoczyłem, że mój „układ kontenera” został pomieszany przez niepasujące nawiasy: D Dzięki: P
Martin Pfeffer
To nie jest dobre rozwiązanie. Ujemny margines wydaje się eliminować dolną połowę docelowego przycisku dotykowego. Kliknięcia nie są rejestrowane po naciśnięciu dolnej połowy fab.
Doronz
1
@Doronz Hmm, chyba nie mam tego problemu. Czy Twoje widoki są w odpowiedniej kolejności, tj. FAB jest najwyższą warstwą?
Hugh Jeffner
23
android: layout_marginBottom = "- 32dp" zakodowana wartość z opcją wrap_content przycisku jest złym rozwiązaniem
Lester
51

Możesz zaimportować przykładowy projekt Google w Android Studio, klikając Plik> Importuj próbkę ...

Importuj próbkę

Ta próbka zawiera widok FloatingActionButton, który dziedziczy z FrameLayout.

Edycja Za pomocą nowej biblioteki projektu wsparcia można ją wdrożyć jak w tym przykładzie: https://github.com/chrisbanes/cheesesquare

Roel
źródło
1
Powinieneś mieć android-21 do jego uruchomienia.
Yuliia Ashomok
Jeśli chcesz użyć FloatingActionButton, powinieneś użyć biblioteki projektu wsparcia. Zobacz ser Google.
Roel,
16

Dzięki AppCompat 22 FAB jest obsługiwany dla starszych urządzeń.

Dodaj nową bibliotekę wsparcia do swojego build.gradle (aplikacji):

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

Następnie możesz użyć go w swoim xml:

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

Aby użyć elevationi pressedTranslationZwłaściwości, apppotrzebna jest przestrzeń nazw , więc dodaj tę przestrzeń nazw do swojego układu: xmlns:app="http://schemas.android.com/apk/res-auto"

Oded Breiner
źródło
3
dodaj informacje o appprzestrzeni nazw
Łukasz „Severiaan” Grela
14

Teraz jest częścią oficjalnej biblioteki wsparcia projektowania.

W twojej klasie:

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

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

Veronnie
źródło
5
Twoja odpowiedź jest nieco niejasna i niejasna. Czy możesz wyjaśnić, co jest częścią DSL, a może zacytować odpowiednie informacje z tej strony.
SuperBiasedMan
Przepraszam, widziałem wiele odniesień do bibliotek zewnętrznych, więc chciałem zwrócić uwagę na bibliotekę oficjalną. Biblioteka może tylko utworzyć przycisk, ale pozycjonowanie zależy od programistów. Przepraszam, więc mój post nie jest zbyt istotny.
Veronnie,
12

Wypróbuj tę bibliotekę ( javadoc jest tutaj ), minimalny poziom API to 7:

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

Zapewnia pojedynczy widget z możliwością dostosowania go za pomocą motywu, kodu XML lub kodu Java.

lekki pomiędzy

Jest bardzo prosty w użyciu. Są dostępne normali miniwdrażane zgodnie ze wzorem działań promowanych .

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

Spróbuj skompilować aplikację demonstracyjną . Istnieje wyczerpujący przykład: jasne i ciemne motywy, przy użyciu z ListView, wyrównują między dwoma widokami .

Oleksii K.
źródło
3
Aby dodać do tej odpowiedzi ^ Możesz także użyć innych dostępnych bibliotek backportu, takich jak: github.com/FaizMalkani/FloatingActionButton i github.com/makovkastar/FloatingActionButton . Oba mogą wydawać się mieć więcej wsparcia. Ale po prostu postępuj zgodnie ze szczegółowym widokiem ze źródła wymienionego w tej odpowiedzi. Działa świetnie.
John Shelley
czy to oficjalna biblioteka?
Cocorico,
nie ma oficjalnej biblioteki. ten jest moją biblioteką lib z otwartymi źródłami.
Oleksii K.,
Ten pływający przycisk akcji jest złym przykładem jego implementacji. Nie jest zgodny z prawdziwymi wytycznymi dotyczącymi projektowania materiałów.
Michael
@Mike Milla, co jest nie tak z tą biblioteką? które wymagania nie są spełnione?
Oleksii K.
6

Uprość dodawanie pływającego przycisku akcji za pomocą TextView, podając zaokrąglone tło xml. - Dodaj kompilację com.android.support:design:23.1.1do pliku stopni

  • Użyj CoordinatorLayout jako widoku głównego.
  • Przed zakończeniem CoordinatorLayout wprowadź textView.
  • Wewnątrz Drawable narysuj okrąg.

Circle Xml jest

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

Układ xml jest

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

Kliknij tutaj, aby zobaczyć, jak to będzie wyglądać

Rytuał
źródło
5

Dodaj to do pliku ocen

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

To do twojego 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>

Pełny przykład z projektem studia Android można pobrać na stronie http://www.ahotbrew.com/android-floating-action-button/

Gurinder Singh
źródło
1

tutaj jest działający kod.

używam appBarLayout do zakotwiczenia mojego floatingActionButton.mam nadzieję, że to może pomóc.

KOD XML.

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

Teraz, jeśli wkleisz powyżej kodu. zobaczysz następujący wynik na swoim urządzeniu. Obraz wynikowy

Rk215 Tech
źródło