android - 丸みを帯びたボタンを備えた Android の下部ナビゲーション

Question

Androidアプリでこのようなことをしたいです。アプリバーとファブボタンを試してみましたが、うまくいきませんでした。あなたはなにか考えはありますか？

Answer 1

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 2

元の回答はこちら: https://stackoverflow.com/a/70409454/8956093

フレーム レイアウトを使用して同じ 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>