Home » Android » android – How can i dynamically change bottom navigation items text?-Exceptionshub

android – How can i dynamically change bottom navigation items text?-Exceptionshub

Posted by: admin February 26, 2020 Leave a comment

Questions:

enter image description here

Im trying to achieve the above design. I’m able to change the icons, but cannot change the bottom text. Im using material bottom navigation bar

I achieved the icon change by implementing separate selector drawables for each icon. Is there any way that i can do the same with the nav titles?

MainActivity.class

public class MainActivity extends AppCompatActivity {
BottomNavigationView navView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    navView = findViewById(R.id.nav_view);

    // Passing each menu ID as a set of Ids because each
    // menu should be considered as top level destinations.
    AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
            R.id.navigation_home, R.id.navigation_saved, R.id.navigation_applied, R.id.navigation_profile, R.id.navigation_more)
            .build();

    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
    NavigationUI.setupWithNavController(navView, navController);



}

activity_main.xml

<?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"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        app:itemIconTint="@null"
        app:itemHorizontalTranslationEnabled="false"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:labelVisibilityMode="labeled"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

bottom_nav_menu.xml

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/home_selector"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_saved"
        android:icon="@drawable/saved_jobs_selector"
        android:title="@string/title_saved" />

    <item
        android:id="@+id/navigation_applied"
        android:icon="@drawable/applied_jobs_selector"
        android:title="@string/title_applied" />

    <item
        android:id="@+id/navigation_profile"
        android:icon="@drawable/profile_selector"
        android:title="@string/title_profile" />


    <item
        android:id="@+id/navigation_more"
        android:icon="@drawable/more_selector"
        android:title="@string/title_More" />

</menu>
How to&Answers:

Check below the line of code and add this when you select your item of BottomNavigation in Kotlin (convert java to kotlin).

navView.getCheckedItem().setTitle(".");

Answer:

In my case if I have a 4 buttons I creating 4 arrays with image (for example) and when tabbed button was clicked dynamically replace to another array, like this, Kotlin Example:

private val TAB_ICONS_FIRST_SELECTED = arrayOf(
    R.drawable.ic_home_painted,
    R.drawable.ic_route,
    R.drawable.ic_notification,
    R.drawable.ic_profile
)

private val TAB_ICONS_SECOND_SELECTED = arrayOf(
    R.drawable.ic_home,
    R.drawable.ic_route_painted,
    R.drawable.ic_notification,
    R.drawable.ic_profile
)

private val TAB_ICONS_THIRD_SELECTED = arrayOf(
    R.drawable.ic_home,
    R.drawable.ic_route,
    R.drawable.ic_notification_painted,
    R.drawable.ic_profile
)

private val TAB_ICONS_FOURTH_SELECTED = arrayOf(
    R.drawable.ic_home,
    R.drawable.ic_route,
    R.drawable.ic_notification,
    R.drawable.ic_profile_painted
)

In onCreate() method:

tabs.addOnTabSelectedListener(object :
        TabLayout.OnTabSelectedListener {
        override fun onTabSelected(tab: TabLayout.Tab) {
            when (tab.position) {
                0 -> {
                    tabs.getTabAt(0)!!.setIcon(TAB_ICONS_FIRST_SELECTED[0])
                    tabs.getTabAt(1)!!.setIcon(TAB_ICONS_FIRST_SELECTED[1])
                    tabs.getTabAt(2)!!.setIcon(TAB_ICONS_FIRST_SELECTED[2])
                    tabs.getTabAt(3)!!.setIcon(TAB_ICONS_FIRST_SELECTED[3])
                }
                1 -> {
                    tabs.getTabAt(0)!!.setIcon(TAB_ICONS_SECOND_SELECTED[0])
                    tabs.getTabAt(1)!!.setIcon(TAB_ICONS_SECOND_SELECTED[1])
                    tabs.getTabAt(2)!!.setIcon(TAB_ICONS_SECOND_SELECTED[2])
                    tabs.getTabAt(3)!!.setIcon(TAB_ICONS_SECOND_SELECTED[3])
                }
                2 -> {
                    tabs.getTabAt(0)!!.setIcon(TAB_ICONS_THIRD_SELECTED[0])
                    tabs.getTabAt(1)!!.setIcon(TAB_ICONS_THIRD_SELECTED[1])
                    tabs.getTabAt(2)!!.setIcon(TAB_ICONS_THIRD_SELECTED[2])
                    tabs.getTabAt(3)!!.setIcon(TAB_ICONS_THIRD_SELECTED[3])
                }
                3 -> {
                    tabs.getTabAt(0)!!.setIcon(TAB_ICONS_FOURTH_SELECTED[0])
                    tabs.getTabAt(1)!!.setIcon(TAB_ICONS_FOURTH_SELECTED[1])
                    tabs.getTabAt(2)!!.setIcon(TAB_ICONS_FOURTH_SELECTED[2])
                    tabs.getTabAt(3)!!.setIcon(TAB_ICONS_FOURTH_SELECTED[3])
                }
            }
        }

        override fun onTabUnselected(tab: TabLayout.Tab) {

        }

        override fun onTabReselected(tab: TabLayout.Tab) {

        }

    })