Come posso aggiungere il nuovo "pulsante di azione mobile" tra due widget / layout

287

Immagino che tu abbia visto le nuove linee guida per il design di Android, con il nuovo "Pulsante di azione mobile" noto anche come "FAB"

Ad esempio questo pulsante rosa:

inserisci qui la descrizione dell'immagine

La mia domanda sembra stupida e ho già provato molte cose, ma qual è il modo migliore per mettere questo pulsante all'intersezione di due layout?

Nell'esempio sopra, questo pulsante è perfettamente posizionato tra ciò che possiamo immaginare di essere un ImageView e un relativo Relay.

Ho già provato molte modifiche, ma sono convinto che ci sia un modo corretto per farlo.

android  android-coordinatorlayout  floating-action-button 
— Waza_Be
fonte
Puoi posizionare i layout all'interno di un layout e posizionare il pulsante su quel layout
— Chrome Penguin Studios,
1
Penso che questa libreria possa aiutare molto: github.com/ksoichiro/Android-ObservableScrollView
— sviluppatore Android
Come nasconderlo durante lo scorrimento? Sto affrontando un problema in cui, se scorro la pagina, fab rimane in primo piano e non si nasconde! Per favore
— aiutatemi

Risposte:

473

La migliore pratica:

  • Aggiungi compile 'com.android.support:design:25.0.1'al file gradle
  • Usa CoordinatorLayoutcome vista di root.
  • Aggiungi layout_anchoral FAB e impostalo sulla vista dall'alto
  • Aggiungi layout_anchorGravityal FAB e impostalo su:bottom|right|end

inserisci qui la descrizione dell'immagine

<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
fonte
3
@Aprendiz Vorrei anche una citazione, ma vedo perché questa è una risposta migliore di quella di HughJeffner. Lo trovo più semplice, più flessibile, meno hacker. Non codificare alcun valore di layout_height o margin, che può variare nel tempo o essere definito dinamicamente. La risposta di Hugh potrebbe funzionare in alcuni casi semplici, e forse potrebbe essere una soluzione per alcune librerie di terze parti che non supportano pienamente CoordinatorLayoute layout_anchore layout_anchorGravityfunzioni, come quella che sta usando, futuresimples .
— acrespo,
1
A proposito di futuresimples è una libreria INCREDIBILE, e nel caso qualcuno si stia chiedendo che c'è un fork che combina questo CoordinatorLayoutapproccio con quella libreria, guarda . E c'è anche un fork per le versioni precedenti.
— acrespo,
2
Stavo cercando esattamente QUESTO. +1 per semplicità.
— Emiliano De Santis,
29
Perché non è tutto ciò nella documentazione di Android?
— Mostafa,
3
utilizzando l'app: layout_anchor causandomi un problema di rendering (non è possibile eseguire il cast di layoutparams di linearlayout su coordinatorlayout. :(
— DAVIDBALAS1
91

Sembra che il modo più pulito in questo esempio sia:

  • Utilizzare un RelativeLayout
  • Posiziona le 2 viste adiacenti una sotto l'altra
  • Allineare il FAB con il lato destro / finale principale e aggiungere un margine destro / finale
  • Allinea il FAB nella parte inferiore della vista dell'intestazione e aggiungi un margine negativo , metà delle dimensioni del FAB inclusa l'ombra

Esempio adattato dall'implementazione di shamanland, usa qualunque FAB desideri. Supponiamo che FAB sia alto 64dp inclusa ombra:

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

Esempio di layout FAB

— Hugh Jeffner
fonte
Questo layout ha fatto il trucco per me! Sto usando FABda futuresimple - è abbastanza semplice aggiungere e usare, divertiti!
— Roman,
Come hai detto "Posiziona le 2 viste adiacenti una sotto l'altra" -> questo era il problema che ho riscontrato, ho solo trascurato che il mio "layout del contenitore" era incasinato da parentesi non corrispondenti: D Grazie: P
— Martin Pfeffer
Questa non è una buona soluzione. Il margine negativo sembra eliminare la metà inferiore dell'obiettivo tattile del pulsante. I clic non vengono registrati se premo la metà inferiore del fab.
— Doronz,
1
@Doronz Hmm, non ho questo problema. Le tue viste sono nell'ordine giusto, cioè il FAB è il livello superiore?
— Hugh Jeffner,
23
android: layout_marginBottom = "- 32dp" valore hardcoded con il pulsante wrap_content è una cattiva soluzione
— Lester,
51

Puoi importare il progetto di esempio di Google in Android Studio facendo clic su File> Importa campione ...

Importa campione

Questo esempio contiene una vista FloatingActionButton che eredita da FrameLayout.

Modifica Con la nuova libreria di Support Design è possibile implementarlo come in questo esempio: https://github.com/chrisbanes/cheesesquare

— Roel
fonte
1
Dovresti avere Android-21 per eseguirlo.
— Yuliia Ashomok,
È necessario utilizzare la libreria di progettazione supporto se si desidera utilizzare un pulsante FloatingActionButton. Vedi il formaggio di Google.
— Roel,
16

Con AppCompat 22, il FAB è supportato per dispositivi meno recenti.

Aggiungi la nuova libreria di supporto in build.gradle (app):

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

Quindi puoi usarlo nel tuo 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" />

Per utilizzare elevatione le pressedTranslationZproprietà, appè necessario lo spazio dei nomi , quindi aggiungi questo spazio dei nomi al layout: xmlns:app="http://schemas.android.com/apk/res-auto"

— Oded Breiner
fonte
3
aggiungi informazioni sullo appspazio dei nomi
— Lukasz 'Severiaan' Grela
14

Ora fa parte della libreria di supporto alla progettazione ufficiale.

Nel tuo voto:

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

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

— Veronnie
fonte
5
La tua risposta è un po 'poco chiara e vaga, potresti spiegare ulteriormente cosa fa parte del DSL e magari citare le informazioni pertinenti da quella pagina.
— SuperBiasedMan
Mi dispiace, ho visto molti riferimenti a librerie esterne, quindi ho voluto segnalare la biblioteca ufficiale. La libreria può solo creare un pulsante, ma il posizionamento è sugli sviluppatori. Quindi il mio post non è molto pertinente, scusa.
— Veronnie,
12

Prova questa libreria ( javadoc è qui ), il livello minimo dell'API è 7:

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

Fornisce un singolo widget con la possibilità di personalizzarlo tramite Tema, XML o codice Java.

luce fra

È molto semplice da usare. Sono disponibili normale miniimplementati secondo il modello di azioni promosse .

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

Prova a compilare l' app demo . C'è un esempio esaustivo: i temi chiari e scuri, usando con ListView, si allineano tra due viste .

— Oleksii K.
fonte
3
Solo per aggiungere a questa risposta ^ È inoltre possibile utilizzare le altre librerie di backport disponibili come: github.com/FaizMalkani/FloatingActionButton e github.com/makovkastar/FloatingActionButton . Entrambi potrebbero sembrare avere un maggiore sostegno. Ma basta seguire la vista dettagliata dalla fonte elencata in questa risposta. Funziona alla grande.
— John Shelley,
è la biblioteca ufficiale?
— Cocorico,
non esiste una biblioteca ufficiale. questa è la mia lib con fonti aperte.
— Oleksii K.,
Questo pulsante di azione mobile è un cattivo esempio di come implementarlo. Non segue le vere linee guida per la progettazione dei materiali.
— Michael,
@Mike Milla, cosa c'è che non va in questa lib? quali requisiti non sono soddisfatti?
— Oleksii K.,
6

Semplifica l'aggiunta del pulsante di azione mobile utilizzando TextView dando uno sfondo xml arrotondato. - Aggiungi compilazione com.android.support:design:23.1.1al file gradle

  • Usa CoordinatorLayout come vista radice.
  • Prima di terminare il coordinatore, presentare un textView.
  • All'interno Drawable disegna un cerchio.

Circle Xml è

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

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

Fai clic qui per vedere come apparirà

— Ritesh
fonte
5

Aggiungi questo al tuo file gradle

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

Questo al tuo 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>

Puoi trovare l'esempio completo con il progetto Android Studio da scaricare all'indirizzo http://www.ahotbrew.com/android-floating-action-button/

— Gurinder Singh
fonte
1

ecco il codice funzionante.

uso appBarLayout per ancorare il mio floatingActionButton. spero che questo possa essere utile.

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

Ora se incolli sopra il codice. vedrai il seguente risultato sul tuo dispositivo. Immagine del risultato

— Rk215 Tech
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.