如何获取Android 12时钟应用中的新版BottomNavigationView组件

Hey there! I totally get why you want that polished, modern BottomNavigationView from the recently updated Android Clock app—it’s a great example of Material You design done right. Let me walk you through how to replicate or get access to that component in your Android Studio project:

1. Upgrade to the Latest Material Library #

First off, this updated BottomNavigationView is part of the AndroidX Material 3 library, so you’ll need to make sure you’re using the most recent stable version. Open your module-level build.gradle (or build.gradle.kts) file and update the Material dependency:

// For Groovy
implementation "com.google.android.material:material:1.11.0"

// For Kotlin DSL
implementation("com.google.android.material:material:1.11.0")

Note: You can check for the latest version via Android Studio’s dependency updater, but 1.11.0+ includes the Material 3 BottomNavigationView variants used in the Clock app.

2. Apply the Material3 BottomNavigationView Style #

The Clock app uses the large, rounded variant of the BottomNavigationView. To match this look, set the style attribute in your layout file:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:menu="@menu/your_bottom_nav_menu"
    <!-- Use the Material3 large style for the Clock app's look -->
    style="@style/Widget.Material3.BottomNavigationView.Large"
    <!-- Optional: Match dynamic Material You colors -->
    app:itemIconTint="?attr/colorOnSurfaceVariant"
    app:itemTextColor="?attr/colorOnSurfaceVariant"
    app:backgroundColor="?attr/colorSurfaceContainerLow" />

The Widget.Material3.BottomNavigationView.Large style gives you the bigger icons, rounded corners, and spacing that mirrors the Clock app’s design.

3. Replicate Exact Customizations (Optional) #

If you want an identical copy, the Android Clock app is open-source—you can reference its internal files to copy specific tweaks:

• Check how it defines icon sizes, padding, or label visibility rules
• Replicate its color state lists for selected/unselected items
• Adjust elevation or background shape to match its subtle rounded edges

4. Use a Material3 App Theme #

To ensure all Material3 styles apply correctly, set your app’s theme to a Material3 variant in res/values/styles.xml:

<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/your_primary_color</item>
    <item name="colorSurface">@color/your_surface_color</item>
    <!-- Add other theme customizations here -->
</style>

That should get you a BottomNavigationView that’s nearly identical to the one in the latest Android Clock app. If you run into specific styling or dependency issues, feel free to share more details about your project setup!

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