我的解决方案的屏幕截图：

Question

我想像上面那样进行布局。谁能帮我怎么做？我已经尝试过新材质的底部应用栏。但我无法实现这种观点。

Answer 1

最后得到了解决方案。只需将bottomAppBar放置在具有透明背景的bottomNavigationView下。并将空菜单项添加到menu.xml中以释放FAB的空间。

XML：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="false">



<com.google.android.material.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_bar"
    android:clickable="false"
    app:fabAlignmentMode="center"
    android:layout_gravity="bottom"/>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:clickable="false"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_menu" />
</FrameLayout>

<FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottom_bar"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

此外，您还需要在menu.xml中添加一个空项目，如下所示：

<item
android:id="@+id/action_empty"
android:title=""
android:checkable="false"
android:checked="false"
app:showAsAction="always"
android:enabled="false"
>

Result

Answer 2

我认为您也是Android Studio的新手。

我建议您观看youtube上的教程。

我搜索了之前使用过的Bottom Navigation View可以使用的那个。它很短，您很快就知道了。

Answer 3

您还可以使用bq query --append_table \ --nouse_legacy_sql \ --allow_large_results \ --destination_table project.orderswh.new_orders 'SELECT o.orders_id,c.customer_name from `project.orderswh.orders` as o inner join `project.orderswh.customers` as c on o.customer_id = c.customer_id'对齐屏幕底部，其中包含四个带有图标的 normal 标签和一个位于其他标签中间的 special 标签具有自定义视图。

Answer 4

您可以找到另一个解决方案here。 @barenluth建议将线性布局放在底部的应用栏中，并像导航视图一样使用它：

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="center"
    app:layout_anchorGravity="start"
    app:hideOnScroll="true"
    app:fabAnimationMode="scale"
    app:fabAlignmentMode="center"
    app:backgroundTint="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="5"
        android:paddingEnd="16dp">
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_home_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:tint="@color/secondary_text"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_map_black_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_people_white_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_account_circle_24dp"
            android:background="?attr/selectableItemBackgroundBorderless"/>
    </LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>

Answer 5

@Artur的解决方案朝着正确的方向迈出了一大步，尽管随着Google的材料组件的发展它需要进行更精细的调整。

我的解决方案的屏幕截图：

build.gradle的依赖项：

implementation 'com.google.android.material:material:1.1.0-alpha10'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'

layout / activity_main.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.main.MainActivity"
        android:background="@color/orange_500"
        >

        <!-- blah blah blah other content...   -->
        <!--         android:visibility="gone" -->

        <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/coordinator_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="false"
                android:clickable="false"
                android:focusable="false"
                >


                <com.google.android.material.bottomappbar.BottomAppBar
                        android:id="@+id/bottom_bar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:background="@android:color/transparent"
                        android:clickable="false"
                        app:fabAlignmentMode="center"
                        app:contentInsetStart="0dp"
                        app:contentInsetStartWithNavigation="0dp"
                        >

                        <com.google.android.material.bottomnavigation.BottomNavigationView
                                android:background="@color/clear"
                                android:id="@+id/bottom_navigation"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                app:menu="@menu/menu_bottom_navigation_main"
                                android:outlineAmbientShadowColor="@android:color/transparent"
                                android:outlineSpotShadowColor="@android:color/transparent"
                                />

                </com.google.android.material.bottomappbar.BottomAppBar>

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                        android:id="@+id/fab"
                        style="@style/Widget.Design.FloatingActionButton"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_anchor="@id/bottom_bar"
                        android:src="@drawable/ic_add_white_24dp"
                        android:tint="@color/white"
                        />
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

menu / menu_bottom_navigation_main.xml文件：

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

    <item
            android:id="@+id/action_view_all_expenses"
            android:enabled="true"
            android:icon="@drawable/ic_list_black_24dp"
            android:title="View All"
            app:showAsAction="always" />


    <item
    android:enabled="false"
    android:title="Add Expense"
    app:showAsAction="always"
            android:checkable="false"
            android:checked="false"
            />


    <item

            android:id="@+id/action_view_dashboard"
            android:enabled="true"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="Dashboard"
            app:showAsAction="withText" />
</menu>

一些评论：

我不得不将FrameLayout删除为中间人，但进展不顺利。
我的主根是ConstraintLayout。我只需要添加协调器布局即可使底部表现良好。请注意，协调器的高度为match_parent，尽管仅底部应用栏才需要。
底部导航视图必须将android:outlineAmbientShadowColor和android:outlineSpotShadowColor添加为transparent，并且还要添加透明背景，否则运行android q的设备的底部会有奇怪的阴影应用栏。
底部的应用栏必须添加app:contentInsetStart和app:contentInsetStartWithNavigation以成为0dp，以使导航视图不会偏离屏幕的开始，并且看起来很奇怪。
如果将ConstraintLyaout用作根视图，则不能约束到底部导航视图。插入后，您将需要约束父对象的底部到底部，并像下面这样添加边距底部： android:layout_marginBottom="@dimen/design_bottom_navigation_height"

Answer 6

如果您使用具有相关主题的最新Material组件，并希望将某些布局放入BottomAppBar中，则必须在themes.xml中覆盖BottomAppBar样式以在开始时（左侧）删除导航抽屉图标空间

<style name="AppTheme.BottomAppBar" parent="@style/Widget.MaterialComponents.BottomAppBar">
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetStartWithNavigation">0dp</item>
</style>

并在您的布局中应用

        <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        style="@style/AppTheme.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            style="@style/Widget.MaterialComponents.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bgDefault"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_nav_menu" />

    </com.google.android.material.bottomappbar.BottomAppBar>

Answer 7

Re'em的评论很重要。我还有一个补充：

用单个android:outlineAmbientShadowColor将android:outlineSpotShadowColor和outlineProvider=none替换为透明

如何制作底部应用栏或底部导航栏（如Google Home App）？

7 个答案:

我的解决方案的屏幕截图：

build.gradle的依赖项：

layout / activity_main.xml文件：

menu / menu_bottom_navigation_main.xml文件：

一些评论：