Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

BottomNavigationView icons don't change color when selected

I've tried to use BottomNavigationView in my app.

When I click icons fragments are displayed properly, but icons don't change their color when selected, icon of the first fragment stay colored. It looks like this whatever fragment I choose

Have I done anything wrong or the color of the icon of the selected fragment is adjusted separately?

My MainActivity:

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private Toolbar toolbar;

    public static FloatingActionButton addDeadline;
    BottomNavigationView bottomNavigationView;
    FrameLayout frameLayout;

    private HomeFragment homeFragment;
    private RecyclerViewFragment recyclerViewFragment;
    private HistoryFragment historyFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_drawer);

        SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(this);// language configuration
        String lang = getResources().getConfiguration().locale.getDisplayLanguage(Locale.CHINESE);
        Locale locale = new Locale(lang);
        Locale.setDefault(locale);
        Configuration config = new Configuration();
        config.locale = locale;
        getBaseContext().getResources().updateConfiguration(config, null);

        toolbar = findViewById(R.id.toolbar_main);
        setSupportActionBar(toolbar);

        homeFragment = new HomeFragment();
        recyclerViewFragment = new RecyclerViewFragment();
        historyFragment = new HistoryFragment();

        frameLayout = findViewById(R.id.main_frame);
        bottomNavigationView = findViewById(R.id.navigation_view);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_home:
                        addDeadline.show();
                        setFragment(homeFragment);
                        break;
                    case R.id.nav_deadlines:
                        addDeadline.show();
                        setFragment(recyclerViewFragment);
                        break;
                    case R.id.nav_history:
                        addDeadline.hide();
                        setFragment(historyFragment);
                        break;
                }
                return false;
            }
        });

        addDeadline = findViewById(R.id.addTask);
        addDeadline.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setClass(MainActivity.this, AddTaskActivity.class);
                startActivityForResult(intent, INTENT_REQUEST_CODE);
            }
        });

        DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.open, R.string.close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = findViewById(R.id.navigation);
        navigationView.setNavigationItemSelectedListener(this);

    }

    private void setFragment(Fragment fragment) {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.main_frame, fragment);
        fragmentTransaction.commit();
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }


    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()) {

            case R.id.labels:
                startActivity(new Intent(this, TagsActivity.class));
                return true;

            case R.id.notifications:
//                startActivity(new Intent(this, HistoryActivity.class));
                return true;

            case R.id.info:
//                startActivity(new Intent(this, HistoryActivity.class));
                return true;
        }

        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_navigation_bar" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:id="@+id/appBarLayout"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.AppBarLayout>

    <View xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_gravity="top"
        android:background="@drawable/shadow_under"
        android:layout_marginTop="56dp"/>

    <FrameLayout
        android:id="@+id/main_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="56dp"
        android:layout_marginBottom="56dp">

        <View xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:layout_gravity="bottom"
            android:background="@drawable/shadow_above"
            android:layout_marginBottom="0dp"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/addTask"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginTop="@dimen/fab_margin"
            android:layout_marginEnd="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            android:src="@drawable/ic_add"
            app:fabSize="auto"
            app:layout_constraintBottom_toTopOf="?attr/actionBarSize" />

    </FrameLayout>

</RelativeLayout>
like image 373
Jeavie Avatar asked Feb 12 '18 20:02

Jeavie


2 Answers

Inside OnNavigationItemSelectedListener implementation, make item.setChecked(true); for every case item

    mBottomNavigationView.setOnNavigationItemSelectedListener(item -> {
        switch (item.getItemId()) {
            case R.id.action_overview:
                item.setChecked(true);
                mNavigationController.navigateToDashboardMainFragment();
                break;
        }
        return false;
    });
like image 70
Alexander Avatar answered Sep 30 '22 00:09

Alexander


You should set the icon tint and text color to BottomNavigationView.

   <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_gravity="bottom"
        app:itemIconTint="@color/bottom_nav_color_state"
        app:itemTextColor="@color/bottom_nav_color_state"
        app:menu="@menu/bottom_navigation_bar" />

Create bottom-nav_color_state.xml file at directory res/color with following code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="true"/>
    <item android:color="@color/colorPrimaryDark"/>
</selector>

If icon is not selected, it is showed in color colorPrimaryDark. Otherwise colorAccent will be the color.

like image 24
Nafiz Bayındır Avatar answered Sep 29 '22 23:09

Nafiz Bayındır