L Android - Button Fab

? theyanu @ | Original: StackOverFlow
---

Google ha già rilasciato uno stile definito o un componente di questo nuovo pulsante circolare FAB o devo attuare la progettazione per conto mio ?

Il pulsante è descritto qui : http://www.google.com/design/spec/components/buttons.html#

Thanks, Yanu

Durante l'attesa, ho creato per il mio :

layout.xml

    <Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="+"
    android:textSize="40sp"
    android:background="@drawable/ripple"
    android:id="@+id/fabbutton"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:elevation="3dp"
    android:paddingBottom="16dp"
    android:fontFamily="sans-serif-light"
    android:layout_alignParentEnd="true"
    android:layout_gravity="right|bottom" />

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
 <ripple android:color="#ffb300" xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/fab"></item>
</ripple>

fab.xml

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="@color/accentColor" />
</shape>

Activity.java

    import android.graphics.Outline;
    ...
    Button fab = (Button) rootView.findViewById(R.id.fabbutton);

    Outline mOutlineCircle;
    int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
    mOutlineCircle = new Outline();
    mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

    fab.setOutline(mOutlineCircle);
    fab.setClipToOutline(true);

Questo codice verrà mostrato come errore in Android Studio v0.8.1, così come gli altri componenti Android l. Sarà risolto nella prossima versione .

Result:

L Android - Button Fab

---

Top 5 Risposta

1Daniele Segato @

Secondo Adam Powell e Chet Haase che non hanno creato un widget per il pulsante FAB causare è una componente molto facile da riprodurre .

C'era una domanda in Google IO 2014 discorso "Google I / O 2014 - Scienza dei materiali : Sviluppo di applicazioni Android con un design materiale ", alla fine del discorso ( circa 37:50 ) ci fu esattamente quella domanda, si può sentire qui :  https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

Chet Haase dire c'è un RoundedBitmapDrawable ( non ho controllato se questo è il nome) che dovrebbe già fare il lavoro di definizione del contorno .

Ma si può fare con il proprio disegnabile, impostare un Elevazione ad esso e definire uno schema cerchio di programmazione .

Questo dovrebbe dare il pulsante rotondo con ombra su L rilascio . Ma penso Dovrete costruire Shadow pre - L da soli .

Dovrei controllare il codice per CardView per vedere come riprodurre l' ombra pre - L . Io probabilmente farlo, ma non ho tempo . Se nessuno pop con i dettagli che farò dopo ho trovato il tempo di andare a controllare in su .

EDIT:

Gabriele Mariotti ( vedere la sua risposta qui sotto, grazie) aggiunto del codice per mostrare come farlo .

Grazie a shomeser commenti, ha scritto una libreria per rendere il tasto fab :

https://github.com/shamanland/floating-action-button

To use it:

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

È anche possibile leggere la sua risposta a un'altra domanda : http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts/25098626#25098626

2Gabriele Mariotti @

Controllare la risposta di Daniele .

AGGIORNATO : 2014/02/12 con il codice di Android 5

Inoltre è possibile aggiungere e stateListAnimator alla Button:

<Button
 android:stateListAnimator="@anim/anim"
/>

Dove anim.xml è :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_elevation"
            android:valueTo="@dimen/button_press_elevation"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_press_elevation"
            android:valueTo="@dimen/button_elevation"
            android:valueType="floatType" />
    </item>
</selector>

Dimens.xml is

<resources>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

Chi Outline menzionato da Daniele . Aggiungere l'attributo elevazione al pulsante, e impostare il contorno tramite il codice :

   <ImageButton
        android:background="@drawable/ripple"
        android:stateListAnimator="@anim/anim"
        android:src="@drawable/ic_action_add"
        android:elevation="4dp"
        />

About Outline:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layoutfab);

        //Outline: OLD METHOD IN L-PREVIEW
        //int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        //Outline outline = new Outline();
        //outline.setOval(0, 0, size, size);
        //findViewById(R.id.fab).setOutline(outline);

        Button fab = (Button) findViewById(R.id.fab);
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
           @Override
           public void getOutline(View view, Outline outline) {
              // Or read size directly from the view's width/height
              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
              outline.setOval(0, 0, size, size);
           }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }

}

L Android - Button Fab

3Roman @

Dal Etichette caratteristica FAB ( come in Evernote o applicazioni di Posta in arrivo ) è stato aggiunto a questo fantastico https://github.com/futuresimple/android-floating-action-button sentitevi liberi di usarlo :

La dipendenza Gradle :

    compile 'com.getbase:floatingactionbutton:1.3.0'

Layout.xml:

     <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action B"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

menu_labels_style.xml :

    <style name="menu_labels_style">
        <item name="android:background">@drawable/fab_label_background</item>
        <item name="android:textColor">@color/white</item>
    </style>

fab_label_background.xml :

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black_semi_transparent"/>
    <padding
        android:left="16dp"
        android:top="4dp"
        android:right="16dp"
        android:bottom="4dp"/>
    <corners
        android:radius="2dp"/>
</shape>

Enjoy!