Google IO底部布局技术咨询：XML实现带圆形星形的底部栏

Hey there! No worries at all—great eye for a sleek, user-friendly UI pattern. Let's break this down for you step by step:

What's this design called officially? #

This layout is a Bottom Navigation View with a Centered Floating Action Button (FAB), a common variant in Material Design (specifically Material 3) used to highlight a primary, frequently used action (like the star/bookmark action in Google IO's app).

How to implement it with XML #

First, make sure you have the Material Design library added to your module's build.gradle file:

implementation 'com.google.android.material:material:1.9.0' // Use the latest version available

Then, create your main layout file (e.g., activity_main.xml) with a CoordinatorLayout as the root—this lets us anchor the FAB to the bottom navigation bar perfectly:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Your main content area (e.g., Fragment container, RecyclerView) -->
    <FrameLayout
        android:id="@+id/main_content_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize"/>

    <!-- Bottom Navigation Bar -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?attr/colorSurface"
        app:menu="@menu/bottom_nav_menu"/>

    <!-- Centered Star FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/star_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_star" <!-- Replace with your star icon -->
        app:layout_anchor="@id/bottom_navigation"
        app:layout_anchorGravity="center"
        app:fabSize="normal"
        app:tint="@android:color/white"
        app:backgroundTint="@color/your_accent_color"/> <!-- Set your desired accent color -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Next, create the menu file for the bottom navigation (res/menu/bottom_nav_menu.xml). We'll add a placeholder item in the center to keep the other items evenly spaced:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="@string/home"/>
    <item
        android:id="@+id/nav_explore"
        android:icon="@drawable/ic_explore"
        android:title="@string/explore"/>
    <!-- Placeholder to keep layout balanced -->
    <item
        android:id="@+id/nav_placeholder"
        android:title=""
        android:enabled="false"
        android:icon="@android:color/transparent"/>
    <item
        android:id="@+id/nav_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="@string/notifications"/>
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_profile"
        android:title="@string/profile"/>
</menu>

Quick Tips #

• If you want the FAB to sit slightly above the bottom navigation bar (like Google IO's app), add a small negative top margin to the FAB: android:layout_marginTop="-16dp"
• For Material 3, you can customize the FAB's shape, elevation, and color using Material Theme attributes to match Google IO's style exactly.

内容的提问来源于stack exchange，提问作者Ali