使FAB不被夹在底部导航栏内

Question

我正在尝试将底部导航栏与 FAB 重叠。我希望我的导航栏看起来像这样：

但它会像这样切断按钮：

如何防止FAB被切断？这是我的 XML:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mobgen.designsprintapp.ui.main.MainActivity">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="?android:attr/windowBackground"
            android:backgroundTint="@color/colorPrimary"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/nav_item_color_state"
            app:itemTextColor="@android:color/black"
            app:menu="@menu/navigation" >

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/tools"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_gravity="center"
                android:layout_marginBottom="8dp"
                android:elevation="6dp"
                android:scaleType="center"
                app:srcCompat="@drawable/play" />
            </android.support.design.widget.BottomNavigationView>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Answer 1

您的问题是您明确指定了 FloatingActionButton 的宽度和高度参数，而它不能采用任何 width/height。 app:fabSize 参数指定 fab 的 3 种尺寸：自动、迷你和普通。

将 layout_width 和 layout_height 保留为 wrap_content，并使用 app:fabSize="normal"（或列表中的其他参数）指定所需的工厂规模。

此外，将 BottomNavigationView 的高度设置为 wrap_content，因为 fab 有一些内部填充。

为了在封闭布局之外绘制子级，请将 android:clipChildren="false" 应用于封闭 ViewGroup。

Answer 2

问题在于该按钮位于导航栏内。将它移到外面，这样它就会完全可见并覆盖导航栏。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="?android:attr/windowBackground"
            android:backgroundTint="@color/colorPrimary"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/nav_item_color_state"
            app:itemTextColor="@android:color/black"
            app:menu="@menu/navigation" >

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

        <android.support.design.widget.FloatingActionButton
                android:id="@+id/tools"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_gravity="center"
                android:layout_marginBottom="8dp"
                android:elevation="6dp"
                android:layout_anchor="@id/navigation"
                android:layout_anchorGravity="top|center"
                android:scaleType="center"
                app:srcCompat="@drawable/play" />
    </LinearLayout>

Answer 3

Just add

 app:elevation="10dp"

inside FloatingActionButton

使FAB不被夹在底部导航栏内

Make FAB not to be clipped inside bottom navigation bar

xml

android

android-layout

android-view

floating-action-button