New Navigation Drawer - how to use titles and counters?

Question 1

You have to manage the navigation drawer UI with a specific layout. Once you wrapped your activity layout with the navigation drawer layout and added your listview, you have to create a new layout.xml (wrap and add all the stuff you want and specify in your first listview this layout.

Layout examples : https://gist.github.com/jordanblt/6220779

A more specific answer about title : How to add title in Navigation drawer layout?

Question 2

This answer assumes that you already have a working Navigation Drawer and just need to add Icons and Count

This is how I do it. Take for example a News app. In your navigation drawer you have Local News, Foreign News and Alien News. What you need to have Icons, titles and counters is to define a custom adapter and a model class.

The Model class:

public class NavDrawerItem {

private String title;
private int icon;
private int count;
private boolean isLocalNews;
private boolean isForeignNews;
private boolean isAlienNews;

private boolean hasIcon;
private boolean isCounterVisible = false; // boolean to set visibility of the counter

public NavDrawerItem(){}


public NavDrawerItem(String title, boolean hasICon, int icon, boolean isCounterVisible, 
boolean isLocalNews, boolean isForeignNews, boolean isAlienNews) {
    this.title = title;
    this.hasIcon = hasICon;
    this.icon = icon;
    this.isCounterVisible = isCounterVisible;
    this.setHasIcon(isHasIcon());
    this.isLocalNews = isLocalNews;
    this.isForeignNews = isForeignNews;
    this.isAlienNews = isAlienNews;
}

public String getTitle(){
    return this.title;
}

public int getIcon(){
    return this.icon;
}

public int getCount(){
    return this.count;
}

public boolean getCounterVisibility(){
    return this.isCounterVisible;
}

public void setTitle(String title){
    this.title = title;
}

public void setIcon(int icon){
    this.icon = icon;
}

public void setCount(int count){
    this.count = count;
}

public void setCounterVisibility(boolean isCounterVisible){
    this.isCounterVisible = isCounterVisible;
}
public boolean isLocalNews() {
    return isLocalNews;
}

public boolean isForeignNews() {
    return isLocalNews;
}

public boolean isAlienNews() {
    return isAlienNews;
}
public boolean isHasIcon() {
    return hasIcon;
}

public void setHasIcon(boolean hasIcon) {
    this.hasIcon = hasIcon;
}
}

Then in the custom adapter do this:

public class NavDrawerListAdapter extends BaseAdapter {

private Context context;
private ArrayList<NavDrawerItem> navDrawerItems;


public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){
    this.context = context;
    this.navDrawerItems = navDrawerItems;
}

@Override
public int getCount() {
    return navDrawerItems.size();
}

@Override
public Object getItem(int position) {
    return navDrawerItems.get(position);
}

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

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

        LayoutInflater mInflater = (LayoutInflater)
                context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        convertView = mInflater.inflate(R.layout.drawer_list_item, null);
    }

    ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);
    TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
    TextView countTxt = (TextView) convertView.findViewById(R.id.debtCounter);



    imgIcon.setImageResource(navDrawerItems.get(position).getIcon());

    //I am getting the count of each news item from a database, 
    //for this purpose just initialize them to any random number e.g    
    //localNewsCount = 56
    int localNewsCount = databaseManager.getAllLocalNews().size();
    int foreignNewsCount = databaseManager.getForeignNews().size();
    int alienNewsCount = databaseManager.getAllAlienNews().size();

    txtTitle.setText(navDrawerItems.get(position).getTitle());

    // To display the count (number of news per item) in the navigation drawer,
    //first check whether count textview is set to visible or not. True means the item can have a counter

    if(navDrawerItems.get(position).getCounterVisibility() && navDrawerItems.get(position).isLocalNews())  {
        navDrawerItems.get(position).setCount(localNewsCount);
        countTxt.setText(String.valueOf(navDrawerItems.get(position).getCount()));
    }

    if(navDrawerItems.get(position).getCounterVisibility() && navDrawerItems.get(position).isForeignNews()){
        navDrawerItems.get(position).setCount(foreignNewsCount);
        countTxt.setText(String.valueOf(navDrawerItems.get(position).getCount()));
    }

    if(navDrawerItems.get(position).getCounterVisibility() && navDrawerItems.get(position).isAlienNews()){
        navDrawerItems.get(position).setCount(alienNewsCount);
        countTxt.setText(String.valueOf(navDrawerItems.get(position).getCount()));
    }

    if(!navDrawerItems.get(position).getCounterVisibility()) {
        countTxt.setVisibility(View.GONE);
    }

    if (!navDrawerItems.get(position).isHasIcon()) {
        imgIcon.setVisibility(View.GONE);
    }
    return convertView;
}

 }

And then in the activity initialize the items like this:

 // load slide menu items
    navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

    // nav drawer icons from resources
    TypedArray navMenuIcons = getResources()
            .obtainTypedArray(R.array.nav_drawer_icons);


ArrayList<NavDrawerItem> navDrawerItems = new ArrayList<>(); //Create an array of navigation drawer items.

    //local news
    navDrawerItems.add(new NavDrawerItem(
                    navMenuTitles[0], //Title
                    true,              //hasIcon
                    navMenuIcons.getResourceId(0, -1),  //Icon resource
                    true, //is counter visible?
                    true) //is localNews?
                false) //is foreignNews?
                false) //is alienNews?
    );
    //Foreign news
    navDrawerItems.add(new NavDrawerItem(
                    navMenuTitles[1], //Title
                    true,              //hasIcon
                    navMenuIcons.getResourceId(1, -1),  //Icon resource
                    true, //is counter visible?
                   false) //is localNews?
                true) //is foreignNews?
                false) //is alienNews?
    );

    //Alien news, since we know nothing about aliens we won't add icons and counter
    navDrawerItems.add(new NavDrawerItem(
            navMenuTitles[2], //Title
            false,              //hasIcon
            navMenuIcons.getResourceId(2, -1),  //Icon resource
            false, //is counter visible?
            false) //is localNews?
                false) //is foreignNews?
                true) //is alienNews?
    );

In your string resource file add this:

<array name="nav_drawer_icons">
    <item>@drawable/ic_localnews</item>
    <item>@drawable/ic_foreignnews</item>
    <item>@drawable/ic_aliensnews</item>

</array>

<!-- Nav Drawer Menu Items -->
<string-array name="nav_drawer_items">
    <item> Local News </item>
    <item> Foreign News </item>
    <item> Alien News </item>
</string-array>