как сделать нижнюю панель приложения или нижнюю панель навигации, например, 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>
Ответ 6
введите описание изображения здесь
Как я могу удалить этот значок меню по умолчанию 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>
Несколько замечаний:
Мне пришлось удалить 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"
