Sunday, May 25, 2014

Android Custom Navigation Drawer Using ExpandableListView with Highlight for selected item

This post is improvements to the previous posts discussed on customization of navigation drawer and highlighting specific row of expandable listview.

Since there are few comments regarding the highlight of expandable list view post, thought to show with new post using custom navigation drawer. But how can we see the highlight of the expandable list view in handset, let’s take navigation drawer and customize it to use expandable list view.

Before starting, I have faced few problems before starting expandablelistview and few questions are shown below. They are?
1.   How and why onchildclicklistener won’t respond but ongroupclicklistener responding?
2.   Whether we can have different background to the group view and child view?
3.   How to highlight the group row or child row on selecting?
4.   How to give the feedback on selection of other row when there is a highlight shown on the other row?

Let’s start knowing the solution for the questions faced.
1.   How to get respond for OnChildClickListener and where will be the problem?
Solution: return true in isChildSelectable method of custom adapter.
Reason: When we extend BaseExpandableListAdapter of ExpandableListView adapter, we will be forced to override few methods. In one of the abstract method, we have isChildSelectable(int groupPosition, int childPosition) which in turn returns false default when we implement. Since it is false, we are unable to get respond OnChildClickListener. Turn it true to solve the porblem.

2.   Whether we can have different backgrounds to group and child views?
Solution: Yes
Reason: use custom adapter for expandablelistview and override getGroupView and getChildView method, and use different inflater.inflate xml’s to achieve it.

Create 2 layouts, one for group view and other for child view, let say as custom_list_view.xml and custom_list_view_child.xml
Inflate the layouts in the respective methods of getGroupView and getChildView and add android:background=" " to the layout.

3.   How to highlight the respective rows?
Solution: By using drawable xml’s and ItemChecked method of ExpandableListView.
Reason: drawable xml specify which color has to be shown on active of row and ItemChecked method specify which row has to be highlighted.

4.   How to give feedback for other rows in the list view?
Solution: By adding state_pressed item in the drawable xml’s.
Reason: Since the drawable xml is mapped to the layout, the action of the row is handled by the drawable xml. So, by adding state_pressed in the xml, we can get feedback when user press on the other row of the xml.

Source Code
You can download the source code by clicking Here.  This project is built using eclipse IDE. Unzip and import the project into Eclipse, it’s a good idea to use the Project by clean and rebuild from the project menu. It works in all API levels above 14.

Output
We can see, all four question answered in the below image.
Customized Navigation Drawer
Background color's : White for Group View and Orange for Child Views.
Highlighted Color : Blue
Feedback Color : Green




Thanks for reading :) 
Whether this post is helpful?

Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? Share it in the comments.

7 comments :

  1. Replies
    1. Source code is in the post itself...
      Hope you can find it.

      Delete
  2. Hello Mr Vardhan,

    Nice blog! Is there an email address I can contact you in private?

    Thanks,

    Eleftheria Kiourtzoglou

    Head of Editorial Team @ Java Code Geeks

    email: eleftheria[dot]kiourtzoglou[at]javacodegeeks[dot]com

    ReplyDelete
  3. Hi, can you please send this full source code to my email address.sumeshb91@gmail.com

    ReplyDelete
  4. Hi,can anyone help me regarding navigation drawer issue, my problem is that i added navigation drawer on navigation drawer i load one fragment and that fragment load a list view it is showing the content but not scrolling the list view and not dragging drawer from right to left and not working click listener.......so how to resolve this problem. My email id is:- pankajk045@gmail.com Name:- Pankaj kumar

    ReplyDelete
  5. Hi, Im using Expandable list view for menus and submenus
    Submenus are working fine but the problem is that when i click on menu which dont have submenu then the application is stopped so plaese anyone can help by sending a mail to nikitacp1@gmail.com

    ReplyDelete
  6. sorry, i am new programming in android. may u help me to send your source code..
    thank you

    nurirppan@gmail.com

    ReplyDelete