Highlighting Active-Inactive Bottom Navigation (HAIBN)


HAIBN:   SOLD       



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

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