New navigation box - how to use headers and counters?

Question

http://developer.android.com/design/patterns/navigation-drawer.html

I read the tutorial for creating a navigation box, but what do I need to do to also use the title, icons and counters as part of the elements of the box? I see only in the example how to manage the text.

Answer 1

You need to control the user interface of the navigation box with a specific layout. After you have wrapped your activity layout with the navigation box layout and added your list, you need to create a new layout.xml (wrap and add everything you need, and specify this layout in your first list.

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

A more specific answer about the title: How to add a title to the layout of the navigation box?

Answer 2

This answer assumes that you already have a working navigation box and you just need to add icons and a number

This is how I do it. Take, for example, the News app. Your navigation box has Local News , Foreign News and Alien News . What you need to have icons, headers and counters is to define a custom adapter and model class.

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 user adapter, do the following:

 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 eg //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 operation, initialize the following elements:

  // 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 the string resource file, add the following:

 <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>