如何复制收件箱浮动操作按钮（每个子按钮有文本）？

Question

I was just wondering if anyone has any idea on how to replicate the floating action button view the new Inbox app has for android? I have the floating action buttons working (with sub buttons) working with a modified version of this library: https://github.com/futuresimple/android-floating-action-button/blob/master/README.md

However I am having trouble trying to get the textview next to the button, like in the inbox app.

If someone could offer me a suggestion on how i would go about modifying the library to accommodate this, or any other way of achieving it, i would much appreciate it.

Thanks for your time Corey

Answer 1

Since Labels FAB feature (like in Evernote or Inbox apps) was added to this awesome library feel free to use it:

Gradle dependency:

    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!

Answer 2

FloatinActionsMenu is ViewGroup it can accept any view.

Create layout like:

<FloatingActionsMenu
  android:layout_height="wrap_content"
   android:layout_width="wrap_content"
>
<RelativeView
   android:layout_height="wrap_content"
   android:layout_width="wrap_content">
   <TextView
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:text="@string/floating_description_1"/>
     <FloatingActionButton
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      //....
</RelativeLayout>
<RelativeView
   android:layout_height="wrap_content"
   android:layout_width="wrap_content">
   <TextView
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:text="@string/floating_description_2"/>
     <FloatingActionButton
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      //....

</RelativeLayout>
</FloatingActionsMenu>

Style TextView as your heart desires, backgrounds, text color etc.

Please note that first FloatingActionButton will be displaced to the size of child view that has largest width. You should move it to largest child width - first floating button width.

If you want to add TextView also to that FloatingAction, get it by id R.id.fab_expand_menu , or .getChildAt(0) , wrap it programatically as you would do it in xml and set it using addView(0, wrapped)

I'm planning to fork, if by any chance I have time to fix it. I'll post a link to the fork.