How can I change the font of customised Navigation Drawer?

Question

This is the layout of my navigation drawer:

<?xml version="1.0" encoding="utf-8"?>
<!-- the root view is now a LinearLayout, all other Views are children of this -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:background="#121314"
    android:orientation="vertical">

    <!-- a separate section to go above the list -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp">

        <!-- your image, you can set it later (see NavDrawerFrag) -->
        <ImageView
            android:id="@+id/nav_image"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:padding="15dp"
            android:src="@android:drawable/ic_menu_myplaces"/>

        <!-- a bit of test or a title to go with it
        <TextView
            android:id="@+id/nav_text"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:text="Default text"/>-->

    </LinearLayout>

    <!-- some divider thing
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:padding="20dp"
        android:background="#000000"/>-->

    <!-- your ListView is now a child View -->
    <ListView
        android:id="@+id/nav_listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:listSelector="@drawable/colors"/>

</LinearLayout>

I want a custom font in the ListView, but I've been busting my head for two days straight on this. I just can't seem to get it working.

This is the part where the Navigation Drawer is created:

public View onCreateView(LayoutInflater inflater,
                         ViewGroup container,
                         Bundle savedInstanceState)
{
    // need site names for list
    siteNames = getActivity().getResources().getStringArray(R.array.site_names);
    Log.d(TAG, "number of sites loaded: " + siteNames.length);

    // inflate the parent view (the entire layout)
    View view = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
    // now grab the separate child views from inside it
    mDrawerListView = (ListView) view.findViewById(R.id.nav_listView);
    mDrawerImage = (ImageView) view.findViewById(R.id.nav_image);
    //mDrawerText = (TextView) view.findViewById(R.id.nav_text);

    // configure the Views
    mDrawerImage.setImageResource(R.drawable.orange);
    mDrawerListView.setOnItemClickListener(this);
    mDrawerListView.setAdapter(new ArrayAdapter<String>(getActionBar().getThemedContext(),
            android.R.layout.simple_list_item_1, android.R.id.text1, siteNames));

    mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);

    // and return the inflated view up the stack
    return view;
}

duplicate of http://stackoverflow.com/questions/15293437/custom-font-for-android-listview and http://stackoverflow.com/questions/18734273/how-to-set-custom-font-for-android-listview and http://stackoverflow.com/questions/4576441/custom-font-in-android-listview and http://stackoverflow.com/questions/20585744/set-font-for-listview-android, not to mention lots of other resources available online that can be found by searching `ListView custom font` in a major Web search engine. — CommonsWare, Jun 28 '14 at 16:50
Might be, but the problem is how to implement it into my custom scheme. — user3740505, Jun 28 '14 at 16:56

user3331142 · Accepted Answer · 2014-06-28T18:48:15.930

1

Instead of using the android.R.id.text1 as your textview resource, you should create your own textview xml layout. You could do something like this

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

        <TextView
            android:id="@+id/listItem"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

        </TextView

</LinearLayout>

The following is the custom adapter you will need so you can set your custom styles to your individual items.

public class listAdapter extends BaseAdapter {

    String[] siteNames;
    Activity a;

    public listAdapter(Activity a, String[] siteNames) {
        this.a = a;
        this.siteNames = siteNames;
    }

    public int getCount() {
        return siteNames.length;
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View vi = convertView;

            vi = a.getLayoutInflater().inflate(R.layout.listView, null);

            Typeface tf = Typeface.createFromAsset(a.getAssets(), "fonts/Raleway-Thin.otf");
            TextView tv = (TextView) vi.findViewById(R.id.listItem); 
            tv.setTypeface(tf);
            //whatever other changes you want to make to your list items.

            return vi;

    }


}

You then create a new adapter from this "listAdapter" class, or whatever you would like to name it. Then you can set your listview with this adapter and you should be good to go.

edited Jun 28 '14 at 18:48

answered Jun 28 '14 at 16:51

user3331142

1,222
1
11
22

You cannot set custom fonts via a style resource. – CommonsWare Jun 28 '14 at 16:56
I did what you suggested, but changed the typeface with java. `Typeface tf = Typeface.createFromAsset(getAssets(), "fonts/Raleway-Thin.otf"); TextView tv = (TextView) findViewById(R.id.listItem); tv.setTypeface(tf);` Now it keeps throwing a `NullPointerException` – user3740505 Jun 28 '14 at 17:58
The typeface part should work just fine. The reason why you are getting null that the view you are accessing is not `R.id.listView`. So it's trying to find `R.id.listItem` inside of the main view, which it isn't inside of the main view. I realize that this would only work if you were using a custom adapter to set up your navigation drawer. Have you done that before? – user3331142 Jun 28 '14 at 18:07
Haha, so it is pretty involved just so you are aware, but if you want control over what each item in your navigation drawer does, you will need a custom adapter for it. I'll add the class you'll need to my answer so that you can get started on it. I may be forgetting something in my adapter code, but it should be close enough. – user3331142 Jun 28 '14 at 18:22
And this would go in the place of `mDrawerListView.setAdapter(new ArrayAdapter(getActionBar().getThemedContext(), R.layout.listitem, R.id.listItem, siteNames));`? – user3740505 Jun 28 '14 at 18:33
yes, it would look something like `mDrawerListView.seAdapter(new listAdapter(siteNames);` – user3331142 Jun 28 '14 at 18:35
You'll have to pass it the activity as well. That was something I missed. In order to access the 'inflater' and 'getAssets()', you have to have the activity to access it from. Change the constructor in the adapter to include the activity and then pass the activity to the adapter when you build it. – user3331142 Jun 28 '14 at 18:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56462/discussion-between-user3740505-and-user3331142). – user3740505 Jun 28 '14 at 18:55

How can I change the font of customised Navigation Drawer?

1 Answers1

Linked