Android L - Fab -Taste

? theyanu @ | Original: StackOverFlow
---

Hat Google bereits einen definierten Stil oder eine Komponente für diese neue Rund FAB Taste losgelassen oder sollte ich implementieren das Design auf meinen eigenen ?

Die Taste ist hier beschrieben: http://www.google.com/design/spec/components/buttons.html#

Thanks, Yanu

Während der Wartezeit, habe ich es für meine eigenen :

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);

Dieser Code wird als Fehler in Android- Studio v0.8.1 gezeigt werden, so wie andere Android- l -Komponenten. Es wird in der nächsten Version behoben werden.

Result:

Android L - Fab -Taste

---

Top 5 Antwort

1Daniele Segato @

Nach Adam Powell und Chet Haase sie haben ein Widget für den FAB -Taste erstellen denn es ist eine sehr einfache Komponenten zu reproduzieren .

Es war eine Frage, in der Google IO 2014 Rede "Google I / O 2014 - Materialwissenschaft : Entwicklung von Android-Anwendungen mit Material-Design ", am Ende der Rede ( ca. 37:50 ) gab es genau diese Frage, können Sie hören, es hier:  https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

Chet Haase sagen, es gibt eine RoundedBitmapDrawable (ich habe nicht geprüft, ob das ist der Name ), die bereits die Aufgabe der Definition der Kontur tun sollten .

Aber Sie es mit Ihren eigenen drawable tun können, stellen eine Erhöhung um ihn und definieren einen Kreis Umriss programmatisch .

Dies sollten Sie den runden Knopf mit Schatten auf L Release geben . Aber ich denke, Sie müssen die Schatten vor, eine L auf eigene Faust zu bauen.

Ich sollte den Code überprüfen Card zu sehen, wie sie den Schatten vor, eine L reproduzieren. Wahrscheinlich werde ich das tun, haben aber nicht die Zeit . Wenn niemand in Pop mit den Details werde ich tun, nachdem ich die Zeit, um zu gehen und überprüfen Sie es gefunden.

EDIT:

Gabriele Mariotti (siehe seine Antwort unten, danke ) hinzugefügt einige Code um Ihnen zu zeigen, wie es geht .

Dank Kommentare shomeser schrieb er eine Bibliothek, um die Fab -Taste machen :

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

To use it:

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

Sie können auch unten seine Antwort auf eine andere Frage : http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts/25098626#25098626

2Gabriele Mariotti @

Überprüfen Sie die Daniele Antwort .

AKTUALISIERT : 2014.02.12 mit Android 5 Code

Sie können auch auf Ihre Schaltfläche Hinzufügen und stateListAnimator :

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

Wo anim.xml ist :

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

Über Daniele genannten Gliederung. Fügen Sie den Höhenattribut, um Ihre Schaltfläche, und stellen Sie den Überblick über den Code :

   <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);
    }

}

Android L - Fab -Taste

3Roman @

Seit Labels FAB -Funktion (wie in Evernote oder Posteingang Apps ) auf diesem atemberaubenden https://github.com/futuresimple/android-floating-action-button aufgenommen fühlen Sie sich frei, es zu benutzen :

Gradle Abhängigkeit:

    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!