Highlighting Active-Inactive Bottom Navigation (HAIBN)

In Android, you can use different colors to represent the active and inactive states of items in the bottom navigation bar. Typically, the active item is highlighted with a different color to indicate that it's currently selected or active. Here’s an example of how you can define colors for active and inactive states in the res/values/colors.xml file:

<resources>
    <!-- Tentukan warna untuk status aktif dan tidak aktif -->
    <color name="activeBottomNavigationColor">#FF4081</color>
    <color name="inactiveBottomNavigationColor">#757575</color>
</resources>

In this example, activeBottomNavigationColor is a pink color (#FF4081) representing the active state, and inactiveBottomNavigationColor is a gray color (#757575) representing the inactive state.

Next, you'll apply these colors to the BottomNavigationView in your XML layout file (e.g., res/layout/activity_main.xml). Here’s an example layout:

<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">

    <!-- Elemen layout lainnya -->

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:background="?android:attr/windowBackground"
        app:itemIconTint="@color/bottom_navigation_item_color"
        app:itemTextColor="@color/bottom_navigation_item_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

In this layout, @color/bottom_navigation_item_color is a color selector you’ll define in the res/color/bottom_navigation_item_color.xml file. This color selector will use the colors defined earlier based on the item state.

Here’s an example of the color selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/activeBottomNavigationColor" android:state_checked="true" />
    <item android:color="@color/inactiveBottomNavigationColor" />
</selector>

Make sure to adjust the colors and layout to match your app’s design and requirements.

Post a Comment

Previous Next

نموذج الاتصال