Android L - плавающая кнопка действия (FAB)

Ответ 1

UPDATE: теперь есть официальный виджет для FAB: FloatingActionButton, см. Габриэле Мариотти для получения полной информации.

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

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

Chet Haase говорит, что RoundedBitmapDrawable (я не проверял, что это имя), который должен уже выполнять задачу определения Outline.

Но вы можете сделать это с помощью собственного рисования, установить для него возвышенность и программно определить круг Outline.

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

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

EDIT:

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

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

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

Чтобы использовать его:

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

Вы также можете прочитать его ответ на другой вопрос: Как добавить новую "плавучую кнопку действия" ? между двумя виджетами/макетами

Ответ 2

ОБНОВЛЕНО: 16/08/2019 официальными компонентами Материал для библиотеки Android

С новыми Материальными компонентами для Android добавьте в свой build.gradle:

implementation 'com.google.android.material:material:1.0.0'

Затем добавьте в свой макет:

<com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/floating_action_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|right"
      android:layout_margin="16dp"
      app:srcCompat="@drawable/ic_plus_24"/>

И используйте это:

FloatingActionButton floatingActionButton =
    (FloatingActionButton) findViewById(R.id.floating_action_button);    
floatingActionButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle the click.
    }
});

Если вы используете тему материала, например Theme.MaterialComponents, ваш FAB унаследует стиль материала. В противном случае просто примените стиль @style/Widget.MaterialComponents.FloatingActionButton

<com.google.android.material.floatingactionbutton.FloatingActionButton
    ....
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    ..../>

Дополнительная информация здесь.

ОБНОВЛЕНО: 30/05/2015 с официальной библиотекой поддержки проектирования

Там официальный виджет сейчас.

Просто добавьте эту зависимость в свой build.gradle

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

Добавьте этот вид в свой макет:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_done" />

И используйте это:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               //TODO
            }
        });

Документация:

• Документация по Android.

ОБНОВЛЕНО: 12/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 - это

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

О набросках:

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 width/height
              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
              outline.setOval(0, 0, size, size);
           }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }

}

Ответ 3

Google теперь предоставляет официальную библиотеку, называемую библиотекой дизайна, , содержащую кнопку Fab. Просто добавьте следующую зависимость Gradle:

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

Затем вы можете использовать кнопку fab следующим образом:

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Более подробную информацию можно найти в своем объявлении

http://android-developers.blogspot.ch/2015/05/android-design-support-library.html

или на странице javadoc

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

Ответ 4

Так как функция ярлыков FAB (например, в приложениях Evernote или Inbox) была добавлена ​​в эту удивительную библиотеку, не стесняйтесь ее использовать:

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>

Наслаждайтесь!