Change Navigation Drawer List text color and add icons

Question

I have not found any good answers to this question on stack overflow. I am using Android Studio default navigation drawer layout. I tried changing colour of textView from fragment_navigation.xml but that didn't help. I do not know what to do in NavigationDrawerFragment.java to change the color. Perhaps need some edits in below code.

  mDrawerListView.setAdapter(new ArrayAdapter<String>(
            getActionBar().getThemedContext(),
            android.R.layout.simple_list_item_activated_1,
            android.R.id.text1,
            new String[]{
                    getString(R.string.title_section1),
                    getString(R.string.title_section2),
                    getString(R.string.title_section3),
                    getString(R.string.title_section4),
                    getString(R.string.title_section5),
                    getString(R.string.title_section6)
            }));

    ViewGroup header = (ViewGroup) inflater.inflate(R.layout.headers, mDrawerListView,false);

    mDrawerListView.addHeaderView(header, null, false);
    mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
    return mDrawerListView;
}

Also I am unable to find any good tutorials on adding icon along with text in list in navigation drawer. Please help me with that as well.

Answer 1

Google just recently added a NavigationView object to the latest version (22.2.0) of the support library that you may want to look into also.

https://developer.android.com/reference/android/support/design/widget/NavigationView.html?utm_campaign=io15&utm_source=dac&utm_medium=blog

http://android-developers.blogspot.com/2015/05/android-design-support-library.html

Answer 2

All you need to do is create a custom adapter instead of using the ArrayAdapter in the default code.

I just got a simple example working that uses a custom adapter that extends ArrayAdapter.

First, you will need the layout for each row in the custom adapter.

nav_drawer_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/icon"
        android:paddingTop="20dp"
        android:layout_width="35dp"
        android:layout_height="55dp" />

    <TextView
        android:id="@+id/text"
        android:textStyle="bold"
        android:textColor="#ff69b4"
        android:paddingTop="25dp"
        android:layout_marginLeft="4dp"
        android:layout_width="wrap_content"
        android:layout_height="55dp" />

</LinearLayout>

Then, in NavigationDrawerFragment.java, define the custom adapter, and use that instead of the default ArrayAdapter:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    mDrawerListView = (ListView) inflater.inflate(
            R.layout.fragment_navigation_drawer, container, false);
    mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    });


    //Use Custom Adapter instead:
    mDrawerListView.setAdapter(new CustomNavAdapter(
            NavigationDrawerFragment.this.getActivity(),
            new String[]{
                    getString(R.string.title_section1),
                    getString(R.string.title_section2),
                    getString(R.string.title_section3),
            },
            new Integer[]{
                    R.drawable.ic_launcher,
                    R.drawable.ic_launcher,
                    R.drawable.ic_launcher,
            }));

    mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
    return mDrawerListView;
}


public class CustomNavAdapter extends ArrayAdapter<String> {
    private final Activity _context;
    private final String[] _text;
    private final Integer[] _imageId;

    public CustomNavAdapter(Activity context, String[] text, Integer[] imageId) {
        super(context, R.layout.nav_drawer_item, text);
        this._context = context;
        this._text = text;
        this._imageId = imageId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = _context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.nav_drawer_item, null, true);
        TextView txtTitle = (TextView) rowView.findViewById(R.id.text);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
        txtTitle.setText(_text[position]);
        imageView.setImageResource(_imageId[position]);

        return rowView;
    }

}

Result: