如何在底部应用栏的前面设置FAB?

时间:2018-11-21 21:02:07

标签: android android-layout android-styles floating-action-button android-bottomappbar

如何将浮动操作按钮置于底部应用栏的前面? 换句话说,如何设置底部的应用栏以填充晶圆厂后面的整个行?

从此: enter image description here

对此: enter image description here

通过medium.com

图像

根据this tutorial,应该有一个名为fabCradleDiameter的属性,但实际上,此组件没有这样的属性。

4 个答案:

答案 0 :(得分:2)

尝试一下对我有用。可能也对您有用。

<android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:hideOnScroll="true"
        app:navigationIcon="@drawable/ic_menu_black_24dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_favorite_red_24dp"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:layout_anchor="@id/bottomAppBar" />

答案 1 :(得分:1)

是的,没有名为fabCradleDiameter的属性,其属性fabCradleMargin

并确保版本在以下版本:

com.google.android.material:material:1.0.0-alpha3

答案 2 :(得分:0)

关键是要使用新的素材主题。另外,您的容器布局应为协调器布局。使用以下代码更改布局。

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Other components and views -->

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      style="@style/Widget.MaterialComponents.BottomAppBar"      //Material style. 
      app:navigationIcon="@drawable/ic_menu_24"/>

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

</android.support.design.widget.CoordinatorLayout>

答案 3 :(得分:0)

只需使用官方的BottomAppBar并使用:

  • fabCradleMargin 属性。 它增加或减少FloatingActionButtonBottomAppBar之间的距离
  • fabCradleRoundedCornerRadius 属性。它指定切口周围拐角的圆度

使用:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    android:layout_gravity="bottom"
    app:fabCradleMargin="0dp"
    app:fabCradleRoundedCornerRadius="0dp"
    ... />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:layout_anchor="@id/bar"
    .../>

enter image description here