Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the Background color of selected item in the Navigation Drawer

Tags:

android

I was working on Nav drawer on my app. I have made the background of my nav drawer #000000(Black). Whenever I select any item the textcolor of text changes from #E44F50(Carrot Red) to black but I cant change the background color of the selected item. All I want is to change the background color of selected Item from black to carrot red.

Here is the github link to my app-

https://github.com/manmeet-22/NewsSnips-app.git

<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        app:headerLayout="@layout/header"
        app:itemIconTint="@drawable/drawer_item" //changing text color 
        app:itemTextAppearance="@style/TextAppearance20"
        app:itemTextColor="@color/drawer_item"
        app:itemBackground="@drawable/drawer_selected_item" //trying to change backgroundcolor the same way
        app:menu="@menu/drawer"
        tools:context="com.androidexample.newssnips.app.NavigationDrawerFragment"/>
</android.support.v4.widget.DrawerLayout>

In this I tried changing the background color like I did for the text but my app crashes.

here is my drawer_selected_item.xml

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

here is my drawer_item.xml

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

Here is my MainActivity.java:

navigationView = (NavigationView) findViewById(R.id.navigation_view);
        navigationView.setItemIconTintList(null);
        Menu menu = navigationView.getMenu();

        //For chnaging the textColor and textSize of group's Name ie. Category
        MenuItem categoryName= menu.findItem(R.id.categoryGroup);
        SpannableString s = new SpannableString(categoryName.getTitle());
        s.setSpan(new TextAppearanceSpan(this, R.style.TextAppearance25), 0, s.length(), 0);

        //For changing the Text of action bar as the selected category
        categoryName.setTitle(s);

        //Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            // This method will trigger on item Click of navigation menu
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {


                //Checking if the item is in checked state or not, if not make it in checked state
                if (menuItem.isChecked())
                    menuItem.setChecked(false);
                else
                    menuItem.setChecked(true);

                //Closing drawer on item click
                drawerLayout.closeDrawers();

                //Check to see which item was being clicked and open the Appopriate news accordingly
                switch (menuItem.getItemId()) {

                    case R.id.itemWorld:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=world";
                        setTitle("World News");

                        basicDefaults();
                        return true;
                    case R.id.itemFootball:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=football";
                        setTitle("Football News");
                        basicDefaults();
                        return true;
                    case R.id.itemFashion:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=fashion";
                        setTitle("Fashion News");
                        basicDefaults();
                        return true;
                    case R.id.itemSports:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=sport";
                        setTitle("Sports News");
                        basicDefaults();
                        return true;
                    case R.id.itemBusiness:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=business";
                        setTitle("Business News");
                        basicDefaults();
                        return true;
                    case R.id.itemTechnology:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=technology";
                        setTitle("Technology News");
                        basicDefaults();
                        return true;
                    case R.id.itemOpinion:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=commentisfree";
                        setTitle("Opinions");
                        basicDefaults();
                        return true;
                    case R.id.itemCulture:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=culture";
                        setTitle("Culture News");
                        basicDefaults();
                        return true;
                    case R.id.itemTravel:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=travel";
                        setTitle("Travel News");
                        basicDefaults();
                        return true;
                    case R.id.itemLifestyle:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=lifeandstyle";
                        setTitle("LifeStyle News");
                        basicDefaults();
                        return true;
                    case R.id.itemEnvironment:
                        GAURDIAN_REQUEST_URL = "http://content.guardianapis.com/search?api-key=f51fa87d-8a55-4fc1-b552-8fa6eb98dee4&section=environment";
                        setTitle("Environment News");
                        basicDefaults();
                        return true;

                    default:
                        Toast.makeText(getApplicationContext(), "Somethings Wrong", Toast.LENGTH_SHORT).show();
                        return true;

                }
            }
        });

        // Initializing Drawer Layout and ActionBarToggle
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.openDrawer, R.string.closeDrawer) {

            @Override
            public void onDrawerClosed(View drawerView) {
                // Code here will be triggered once the drawer closes as we dont want anything to happen so we leave this blank
                super.onDrawerClosed(drawerView);
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                // Code here will be triggered once the drawer open as we dont want anything to happen so we leave this blank

                super.onDrawerOpened(drawerView);

            }
        };

        //calling sync state is necessay or else your hamburger icon wont show up
        actionBarDrawerToggle.syncState();
    }

PS.- I have tried implementing other methods too like

adding this in apptheme in styles.xml file.

<item name="android:activatedBackgroundIndicator">@drawable/drawer_selected_item</item>

But still I cant find my solution.
Please help it is the last thing that is left in my project.

like image 979
Manmeet Singh Avatar asked Mar 05 '17 12:03

Manmeet Singh


People also ask

How do I customize my navigation drawer?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. Step 3 − Add the following code to res/layout/nav_header_main.


1 Answers

I have got the solution-

In the NavigationView I did-

        app:itemBackground="@drawable/drawer_selected_item"

Thus my NavigationView looks like-

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/colorPrimary"
            app:headerLayout="@layout/header"
            app:itemIconTint="@drawable/drawer_item"
            app:itemTextAppearance="@style/TextAppearance20"
            app:itemTextColor="@drawable/drawer_item"
            app:menu="@menu/drawer"
            app:itemBackground="@drawable/drawer_selected_item"
tools:context="com.androidexample.newssnips.app.NavigationDrawerFragment" />

In the drawer_selected_item I modified file as-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@color/colorAccent"/>
<item android:drawable="@android:color/transparent" />
</selector>
like image 138
Manmeet Singh Avatar answered Oct 30 '22 08:10

Manmeet Singh