底部导航栏 - 矩形操作按钮

Question

使用google.android.material：

是否可以将操作按钮制作成矩形？
是否可以将它调高/调低一点？

我说的是中间的圆圈按钮。

Answer 1

试试这个：如果您使用 FloatingActionButton

app:borderWidth="0dp"

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:layout_marginRight="20dp"
    app:fabSize="normal"
    android:elevation="@dimen/fab_elevation"
    android:background="#000000"
    app:borderWidth="0dp"
    android:stateListAnimator="@animator/fab_anim"
    android:layout_gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true" />

希望这会有所帮助！

Answer 2

要更改浮动操作按钮的形状，您可以在 drawable 文件夹中创建一个单独的资源文件，例如：shape.xml as-

<?xml version="1.0" encoding="utf-8"?>
<shape 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">

<solid android:color="@color/colorAccent" />

然后在浮动操作按钮中添加以下内容属性:

 android:background="@drawable/shape"

此外，您可以使用保证金将其推高。

Answer 3

使用 elevation 属性到 FAB

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/nav_items" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="40dp"
        android:clickable="true"
        app:elevation="8dp"
        app:srcCompat="@android:drawable/ic_input_add" />

Answer 4

可以使用app:shapeAppearanceOverlay属性实现方形按钮和app:fabCradleVerticalOffset属性改变FAB 到 BottomAppBar.

的距离

类似于：

  <com.google.android.material.bottomappbar.BottomAppBar
         app:fabCradleVerticalOffset="16dp"
         app:fabCradleRoundedCornerRadius="0dp"
         app:fabCradleMargin="0dp"
          ..>


      <com.google.android.material.floatingactionbutton.FloatingActionButton
          app:shapeAppearanceOverlay="@style/SquareFloatingShapeOVerlay"
          ../>

与：

  <style name="SquareFloatingShapeOVerlay" parent="">
    <item name="cornerSize">0dp</item>
  </style>

如果您想要矩形形状，您可以使用 ExtendedFloatingActionButton 而不是 FloatingActionButton。

类似于：

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      app:layout_anchor="@id/bottom_app_bar"
      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlayExtended"
      ../>

与：

  <style name="ShapeAppearanceOverlayExtended" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
  </style>

注意： 它需要 1.1.0 版本的 Material 组件库。

底部导航栏 - 矩形操作按钮

Bottom navigation bar - rectangle action button

android

floating-action-button

bottomnavigationview

material-components

material-components-android