[Fix] BottomNavigationView Preview Not Working (Android Studio)

Beberapa waktu yang lalu nyoba-nyoba bikin project sederhana lagi menggunakan Android Studio, tujuannya yah sekedar “menyegarkan” kembali pemahaman tentang pembuatan BottomNavigationView di Android Studio. Namun ada sedikit rasa mengganjal saat menggunakan komponen ini, BottomNavigationView tidak muncul pada bagian Preview, ternyata ini penyebabnya.

Saya fikir itu masalah pada Android Studio saya, akhirnya ketika ada pilihan untuk upgrade saya putuskan untuk upgrade, ternyata hasilnya nihil. Untuk saat ini saya gunakan versi ini, versi stable paling baru.

Android Studio Bumblebee | 2021.1.1 Patch 2

Sintaks untuk activity_main.xml saya seperti ini:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_menu"
        android:background="@android:color/background_light"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Dan untuk bottom_menu.xml nya saya gunakan seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:icon="@drawable/ic_home"
        android:title="@string/menu_home"
        android:enabled="true"/>

    <item
        android:id="@+id/menu_about"
        android:icon="@drawable/ic_about"
        android:title="@string/menu_about"
        android:enabled="true"/>
</menu>

Ternyata bagian Preview tidak menunjukkan komponen BottomNavigationView. Saya tidak tahu apakah ini bug atau apa, maklum newbie. Akhirnya pada bagian build.gradle (:app) saya turunkan versi dari dependency material desainnya.

dependencies {

    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.5.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

menjadi:

dependencies {

    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

Dan masalahnya pun teratasi. BottomNavigationView akhirnya bisa ditampilkan pada bagian Preview Android Studio.

UPDATE:

Permasalahan ini sudah diperbaiki pada material desain versi 1.6.0, sehingga jika teman-teman menggunakan dependency paling baru maka permasalahan ini seharusnya sudah tidak muncul lagi.

Material desain 1.6.0