Android L - Fab Кнопка

? theyanu @ | Original: StackOverFlow
---

А Google уже выпустила определенный стиль или компонент для этой новой круговой FAB кнопки или я должен внедрить схему самостоятельно?

Кнопка описано здесь: http://www.google.com/design/spec/components/buttons.html#

Thanks, Yanu

В ожидании, я создал его для моей :

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

Этот код будет показано, как ошибки в андроид студии v0.8.1, так как другие андроид компонентов L. Это будет исправлено в следующей версии.

Result:

Android L - Fab Кнопка

---

Top 5 ответ

1Daniele Segato @

По словам Адама Пауэлла и Чет Хаас они не создать виджет для кнопки FAB потому что этоочень легко компонент для воспроизведения .

Былвопрос в Google IO 2014 речи " Google I / O 2014 - Материаловедение : Разработка приложений для Android с материалом конструкции », на конце гаджи ( около 37:50 ) было точно, что вопрос, вы можете услышать его здесь :  https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

Чет Хаас сказал, что естьRoundedBitmapDrawable (я не проверил, если этоимя), что уже должны сделать работу определения контура.

Но вы можете сделать это с вашим собственным чтобы сместить, установите высоте к нему и определить круг Схема программно.

Это должно дать вам круглую кнопку с тенью на L -релизе. Но я думаю, что вы будете иметь, чтобы построить тень предварительной L по своему усмотрению.

Я должен проверить код CardView, чтобы увидеть, как это воспроизвести тень предварительно л. Я, наверное, сделать это, но не имеют времени. Если никто не поп с деталями я буду делать после того как я нашел время, чтобы пойти и проверить его.

EDIT:

Gabriele Мариотти (см свой ​​ответ ниже, спасибо ) добавил код, чтобы показать вам, как это сделать .

Благодаря shomeser комментарии, он написал библиотеку, чтобы сделать кнопку потрясающий :

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

To use it:

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

Вы также можете прочитать его ответ на другой вопрос: http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts/25098626#25098626

2Gabriele Mariotti @

Проверьте ответить на Даниэле -х годов.

ОБНОВЛЕНО : 02/12/2014 с Android 5 кода

Также вы можете добавлять и stateListAnimator для вашей кнопки :

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

Где 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>

О Концепции, упомянутой Даниэле . Добавьте атрибут возвышения Ваша кнопка, и установлен контур с помощью кода :

   <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 Кнопка

3Roman @

Так этикетки FAB функции (как в Evernote или Входящие приложения ) был добавлен в этот удивительный https://github.com/futuresimple/android-floating-action-button стесняйтесь использовать:

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!