How to customize the text appearance of a selected section in a Navigation Drawer

The purpose of this post is to show you how you can customize the text style of a selected item in an Android NavigationDrawer. These instructions assume that you already implemented a Navigation Drawer that follows Android Developer’s guidelines: “Creating a Navigation Drawer”.

To achieve this goal, we created a custom adapter for the drawer’s item list (which is a ListView component). We defined this custom adapter in a class named NavigationDrawerAdapter. The class is extending from an ArrayAdapter. The purpose of this kind of adapter is to dictate how a list item should behave and look like. In our case, we have two different item states to take into account: a selected item and an unselected one. We now are going to explain how we implemented the list adapter.

First, let’s create a new Java class named NavigationDrawerAdapter. Then add a variable in which will be saved the current selected item position. Make this variable accessible with a setter and getter because we will need to update this value when the user will click on one of the menu item. Finally, let’s add a class constructor which will call the construction of the parent class ArrayAdapter.

public class NavigationDrawerAdapter extends ArrayAdapter<String> {  
    /**
     * Selected item position
     */
    private int mSelectedItem;

    /**
     * Constructor
     *
     * @param context: Context using the adaptor
     * @param ressource: Drawer list item Layout ID
     * @param objects: String array which contains the list elements
     */
    public NavigationDrawerAdapter(Context context, int resource, String[] objects) {
        super(context, resource, objects);
    }

    public int getSelectedItem() {
        return mSelectedItem;
    }

    public void setSelectedItem(int selectedItem) {
        mSelectedItem = selectedItem;
    }
}

Now, let’s override the getView(int position, View convertView, ViewGroup parent) method of our new class. This method will get the View that displays the data at the specified position in the item list. Since this is an adapter, it will be called for each item in the list when the list is updated in parent fragment.

In our example, the view returned is a TextView. Thus, we will first get the item TextView. When we retrieve it, we then can set its text and its styling characteristics like the color or the typeface. Here, we set a white color on unselected items and a blue one with a bold style on the selected item.

...
@Override
public View getView(int position, View convertView, ViewGroup parent) {  
    //Get item TextView
    TextView view = (TextView) super.getView(position, convertView, parent);

    view.setText(getMenuItemTitle(position));

    if (position == mSelectedItem) {
    view.setTextColor(getContext().getResources().getColor(android.R.color. holo_blue_dark));
            view.setTypeface(Typeface.DEFAULT_BOLD);
    } else {
            view.setTextColor(getContext().getResources().getColor(android.R.color.white));
    }
    return view;
}
...

Back in your Navigation Drawer fragment, you can now trigger the colored item selection through your selectItem(int position) method.

private NavigationDrawerAdapter mAdapter; 
...
private void selectItem(int position) {    
    mAdapter.setSelectedItem(position); 
    ... 
} 
...

That’s all folks!