Android 带有圆形按钮的底部导航

Question

我想在我的 android 应用程序中做这样的事情。我尝试使用 appbar 和 fab button 但没有成功。你有什么想法吗？

Answer 1

要实现此目的，您需要一个自定义视图。您可以通过创建带有扩展 BottomNavigationBar 的自定义视图 class 来做到这一点。您可以查看此 article 以尝试实现您想要的 BottomNavigationBar 外观。

Answer 2

我创建了一个包含 5 个菜单项的 Bottom navigationView。中间项没有图像。所以我在底部 navigationView.

里面添加了一个 imageButton(android:clickable="false")

 <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav_instructor"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_gravity="bottom"
            android:background="@color/bg_bottom_nav_bar"
            android:elevation="15dp"
            app:itemIconSize="30dp"
            app:itemIconTint="@drawable/bottom_navigation_colors"
            app:itemTextAppearanceActive="@style/TextStyleTab"
            app:itemTextAppearanceInactive="@style/TextStyleTab"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/instructor_bottom_nav">

            <ImageButton
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_gravity="center"
                android:layout_marginBottom="15dp"
                android:background="@drawable/fab"
                android:clickable="false"
                android:src="@drawable/ico_add" />
        </com.google.android.material.bottomnavigation.BottomNavigationView>

Answer 3

最初在这里回答：

我使用框架布局实现了相同的 UI。这是代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph_home" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background_white_rounded_top"
        app:itemTextColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_nav_bar_home_items"
        app:labelVisibilityMode="unlabeled">

    </com.google.android.material.bottomnavigation.BottomNavigationView>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <ImageView
            android:id="@+id/toggle_alignment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_home_scan" />

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

并且不为中间项提供图标。

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/firstFragment"
            android:icon="@drawable/ic_one"
            android:title="" />
        <item
            android:id="@+id/secondFragment"
            android:icon="@drawable/ic_two"
            android:title="" />
        <item
            android:id="@+id/thirdFragment"
            android:title="" />
        <item
            android:id="@+id/fourthFragment"
            android:icon="@drawable/ic_four"
            android:title=""/>
        <item
            android:id="@+id/fifthFragment"
            android:icon="@drawable/ic_five"
            android:title="" />
    </group>
</menu>

Android 带有圆形按钮的底部导航

Android bottom navigation with rounded button

navigation

android

bottomnavigationview

android-bottomappbar

flutter-appbar