как сделать нижнюю панель приложения или нижнюю панель навигации как приложение Google Home?

Question

Я хочу сделать макет, как указано выше.Может кто-нибудь помочь мне, как это сделать?Я попробовал новую панель приложения внизу материала.но я не смог достичь этого взгляда.

Answer 1

Если вы используете новейшие компоненты Material со связанными темами и хотите поместить макет в BottomAppBar, вам необходимо переопределить стиль BottomAppBar в вашем themes.xml, чтобы удалить пространство значков навигационной панели при запуске (левая сторона)

<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 2

Вы можете найти другое решение здесь .@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 3

Вы также можете использовать android.support.design.widget.TabLayout, выровненный внизу экрана с четырьмя обычными вкладками со значками и одной специальной вкладкой в ​​середине других вкладок с настраиваемым представлением..

Answer 4

Наконец-то получили решение.Просто поместите 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"
>

Результат

Answer 5

Я думаю, что вы новичок в Android Studio, а также.

Я рекомендую вам посмотреть учебники на YouTube.

Я искал тот, который использовал ранее, и он мне помог Вид снизу .Она довольно короткая, и вы быстро это поймете.