使用Android设计库的Square FloatingActionButton

时间:2015-06-08 17:30:02

标签: android android-design-library

新的Android设计库提供android.support.design.widget.FloatingActionButton,以便更轻松地实现浮动操作按钮。

但按钮总是一个圆圈。

我从公司设计师处收到一个方形浮动按钮概念,但我找不到任何参考来改变android.support.design.widget.FloatingActionButton的背景以获得方形背景。

注意:如果我使用自定义自定义drawable,背景仍然有圆圈,如下所示:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_filter"
    app:layout_anchor="@+id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

enter image description here

我尝试使用简单的Button,但它在折叠时似乎打破了工具栏的大小:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:elevation="10dp"
    android:background="@drawable/button_filter"
    app:layout_anchor="@+id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

enter image description here

使用新版Android设计资源库的FloatingActionButton 可以使用方形按钮吗?

2 个答案:

答案 0 :(得分:2)

问题是“android:background”,查看下面的模板并注意“app:backgroundTint”,将其用作模板,它应该可以工作:

<android.support.design.widget.FloatingActionButton
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/your_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/floating_button_margin_bottom"
        android:layout_marginRight="@dimen/floating_button_margin_right"
        app:elevation="@dimen/floating_button_elevation"
        app:borderWidth="0dp"
        app:rippleColor="@color/your_ripple_color"
        app:backgroundTint="@color/your_bg_color" />

答案 1 :(得分:0)

好的,使用app:borderWidth="0dp"中的属性FloatingActionButton解决了问题。

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_filter"
    app:layout_anchor="@+id/appbar"
    app:borderWidth="0dp"
    app:layout_anchorGravity="bottom|right|end" />