как сделать нижнюю панель приложения или нижнюю панель навигации, например, google home app?

Google home app

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

ОТВЕТЫ

Ответ 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"
>

Результат

Ответ 2

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

Ответ 3

Вы можете добиться этого, используя BottomAppBar

Посмотрите эту ссылку для получения дополнительной информации о BottomAppBar,

Конструкция материалов Новые компоненты

Чтобы прикрепить свой значок FAB к вашему узкому месту

app:fabAttached = "true"

И вы можете установить выравнивание FAB как,

app:fabAlignmentMode ="center"

Ответ 4

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

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

Я искал один я использовал, прежде работавший для меня Bottom Navigation View. Это довольно коротко, и вы быстро поняли эту идею.

Ответ 5

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

Ответ 7

Если вы используете новейшие компоненты 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>

Ответ 8

Решение @Artur - это огромный шаг в правильном направлении, хотя оно нуждается в более тонкой настройке по мере развития компонентов материала Google.

скриншот моего решения:

bottom navigation view with fab cradle

зависимости 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>

Несколько замечаний:

  1. Мне пришлось удалить FrameLayout в качестве посредника, он не прошел хорошо.

  2. Мой основной корень - ConstraintLayout. Мне нужно было только добавить макет координатора для нижней части, чтобы вести себя хорошо. обратите внимание, что высота координатора равна match_parent, хотя она требуется только для нижней панели приложения.

  3. нижний навигационный вид должен был добавить android:outlineAmbientShadowColor и android:outlineSpotShadowColor как transparent, а также прозрачный фон, или устройства, работающие на Android q, будут иметь странные тени, нарисованные поверх нижней панели приложения.

  4. нижняя панель приложения должна была добавить app:contentInsetStart и app:contentInsetStartWithNavigation, чтобы они были 0dp, чтобы навигационное представление не сдвигалось в сторону от начала экрана и выглядело странно.

  5. если вы будете использовать ConstraintLyaout в качестве корневого представления, вы не сможете ограничиться нижним представлением навигации. Вместо этого вам нужно будет ограничить нижнюю часть родительской границы и добавить нижнюю границу следующим образом: android:layout_marginBottom="@dimen/design_bottom_navigation_height"