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

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

Кнопка описана здесь: Google Design | Плавающие кнопки действий

РЕДАКТИРОВАТЬ (05/2015): проверить ответ Лукаса / ответ Габриэле, показывающий простой способ реализовать его с помощью библиотеки поддержки дизайна.

Solutions Collecting From Web of "Android L – плавающая кнопка действия (FAB)"

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

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

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

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

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

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

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

РЕДАКТИРОВАТЬ:

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

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

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

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

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

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

ОБНОВЛЕНО: 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 .

ОБНОВЛЕНО: 02/12/2014 с Android 5 code

Также вы можете добавить и stateListAnimator к вашей Button:

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

Проверьте ответ Даниэля.

О схеме, упомянутой Даниэле. Добавьте атрибут Elevation к вашей Button и установите Outline через код:

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

Введите описание изображения здесь

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

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

Грейд-зависимость:

  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> 

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