如何使用浮動操作按鈕創建底部導航

Question

如何創建此設計

我使用了這段代碼但沒有得到預期的結果

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus"
        app:backgroundTint="@android:color/transparent"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="2dp"
        app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

ic_plus.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:angle="180"
                android:endColor="#FFFF8B00"
                android:startColor="#FFFF4806" />
            <size
                android:width="56dp"
                android:height="56dp" />
        </shape>
    </item>
    <item
        android:left="10dp"
        android:right="10dp">
        <shape android:shape="line">
            <stroke
                android:width="2dp"
                android:color="#ffffff" />
        </shape>
    </item>
    <item
        android:left="10dp"
        android:right="10dp">
        <rotate android:fromDegrees="90">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
</layer-list>

維度.xml

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>

在Menifest

android:theme="@style/Theme.MaterialComponents.NoActionBar"

但我明白了

任何幫助將不勝感激。 謝謝

Answer 1

你必須添加

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        app:backgroundTint="@null"
        app:tint="@null"
        ../>

默認樣式為背景和圖標着色。