{"id":1375,"date":"2016-04-11T07:42:37","date_gmt":"2016-04-11T07:42:37","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1375"},"modified":"2018-06-05T09:40:25","modified_gmt":"2018-06-05T09:40:25","slug":"expandablelistview","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/expandablelistview","title":{"rendered":"ExpandableListView With Example In Android Studio"},"content":{"rendered":"<p>In Android, ExpandableListView is a View that shows items in a vertically scrolling two level list. Different from the listview by allowing two level groups which can individually be expanded to show its children. Each group can be expanded or collapsed individually to show or hide its children items.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1479\" src=\"\/ui\/wp-content\/uploads\/2016\/04\/ExpandableListView-in-Android.jpg\" alt=\"ExpandableListView in Android\" width=\"554\" height=\"268\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/04\/ExpandableListView-in-Android.jpg 554w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/04\/ExpandableListView-in-Android-300x145.jpg 300w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/p>\n<p>We can attach listeners events to the ExpandableListView to listen for OnClick or any other events on the Group or the individual children. \u00a0Adapters are used to supply or control the data that will be displayed in an ExpandableListView.<\/p>\n<p><strong><span style=\"color: #ff0000;\">Important Note:<\/span><\/strong>\u00a0You cannot use the value wrap_content for the height attribute of a ExpandableListView in XML if the parent&#8217;s size is not strictly specified. In other words we mean if the parent were ScrollView then you could not specify wrap_content since it can be of any length. However, you can use wrap content if the ExpandableListView parent has a specific size, such as 200 pixels.<\/p>\n<p><strong>ExpandableListView code in XML:<\/strong><\/p>\n<pre>&lt;ExpandableListView\r\nandroid:id=\"@+id\/simpleExpandableListView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\/&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1437 size-medium\" src=\"\/ui\/wp-content\/uploads\/2016\/03\/ExpandableListView-In-XML-Android-156x300.jpg\" alt=\"ExpandableListView In XML Android\" width=\"156\" height=\"300\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/03\/ExpandableListView-In-XML-Android-156x300.jpg 156w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/03\/ExpandableListView-In-XML-Android.jpg 235w\" sizes=\"auto, (max-width: 156px) 100vw, 156px\" \/><\/p>\n<hr \/>\n<h4><strong>Attributes of ExpandableListView In Android<\/strong><\/h4>\n<p>Now let\u2019s we discuss about some important\u00a0attributes that helps us to configure a ExpandableListView in XML\u00a0file(layout).<\/p>\n<p><span style=\"color: #008000;\"><strong>1. id:<\/strong><\/span>\u00a0id is an attribute used to uniquely identify a Expandable List View.<\/p>\n<pre>&lt;ExpandableListView\r\nandroid:id=\"@+id\/simpleExpandableListView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\/&gt; &lt;!--\u00a0 id of an attribute used to uniquely identify a expandable list view --&gt;\r\n<\/pre>\n<p><strong><span style=\"color: #008000;\">2. divider:<\/span><\/strong> This is a drawable or color to draw between different group list items.<\/p>\n<p>Below we draw red color divider between different group items.<\/p>\n<pre>&lt;ExpandableListView\r\nandroid:id=\"@+id\/simpleExpandableListView\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:divider=\"#f00\"\r\nandroid:dividerHeight=\"1dp\" \/&gt; \"\/&gt; &lt;!--\u00a0 red color divider with 1dp height between the groups items of \u00a0expandable list view --&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1438\" src=\"\/ui\/wp-content\/uploads\/2016\/03\/Divider-in-ExpandableListView-Android.jpg\" alt=\"Divider in ExpandableListView Android\" width=\"233\" height=\"274\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>3. dividerHeight:<\/strong><\/span> This specify the height of the divider between group list items. This could be in dp ( density pixel ), sp(scale independent pixel) or px ( pixel ).<\/p>\n<p>In above example of divider we also set the divider height 1dp between the list items. The height should be in dp, sp or px.<\/p>\n<p><span style=\"color: #008000;\"><strong>4. listSelector:<\/strong><\/span>\u00a0This\u00a0property is used to set the selector of the expandable list View. It is generally orange or Sky blue color mostly but you can also define your own custom color or an image as a list selector as per your design.<\/p>\n<p>Below selector color is green, when you select any list item then that item\u2019s background color is green.<\/p>\n<pre>&lt;ExpandableListView\r\nandroid:id=\"@+id\/simpleExpandableListView\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:divider=\"#f00\"\r\nandroid:dividerHeight=\"1dp\"\r\nandroid:listSelector=\"#0f0\" \/&gt; &lt;!--\u00a0 green color for the list selector item --&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1439\" src=\"\/ui\/wp-content\/uploads\/2016\/03\/listSelector-in-ExpandableListView-Android.jpg\" alt=\"listSelector in ExpandableListView Android\" width=\"238\" height=\"242\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>5. childDivider:<\/strong> <\/span>This is a drawable or color to draw between different child list items of a expandable list view.<\/p>\n<p>Below we draw green color divider between different child items of a group.<\/p>\n<pre>&lt;ExpandableListView\r\n    android:id=\"@+id\/simpleExpandableListView\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"fill_parent\"\r\n    android:divider=\"#f00\"\r\n    android:dividerHeight=\"1dp\"\r\n    android:childDivider=\"#0f0\" \/&gt;  &lt;!--  green color divider between the child items of  expandable list view --&gt;<\/pre>\n<p>The below image is from the ExpandableListView example which is explained at the end of this post. In this we have set green color as Child divider and red color as divider. The reason we have used this example image because we need fill data using Adapter to show you childDivider attribute in action.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1440\" src=\"\/ui\/wp-content\/uploads\/2016\/03\/childDivider-in-ExpandableListView-Android.jpg\" alt=\"childDivider in ExpandableListView Android\" width=\"552\" height=\"165\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/03\/childDivider-in-ExpandableListView-Android.jpg 552w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/03\/childDivider-in-ExpandableListView-Android-300x90.jpg 300w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/p>\n<p><strong><span style=\"color: #008000;\">6. padding:<\/span><\/strong> padding attribute is used to set the padding from left, right, top or bottom.<\/p>\n<ul>\n<li><strong>paddingRight<\/strong>: set the padding from the right side of the expandable list view.<\/li>\n<li><strong>paddingLeft:<\/strong> set the padding from the left side of the Progress bar.<\/li>\n<li><strong>paddingTop:<\/strong> set the padding from the top side of the expandable list view.<\/li>\n<li><strong>paddingBottom:<\/strong> set the padding from the bottom side of the expandable list view.<\/li>\n<li><strong>Padding:<\/strong> set the padding from the all side\u2019s of the expandable list view.<\/li>\n<\/ul>\n<p>Below we set the 50dp padding from all the side\u2019s of the expandable list view.<\/p>\n<pre>&lt;ExpandableListView\r\nandroid:id=\"@+id\/simpleExpandableListView\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:divider=\"#f00\"\r\nandroid:dividerHeight=\"2dp\"\r\nandroid:childDivider=\"#0f0\"\r\nandroid:padding=\"50dp\" \/&gt; &lt;!--\u00a0 50 dp padding from all the sides of a expandable list view --&gt;\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1441\" src=\"\/ui\/wp-content\/uploads\/2016\/03\/padding-in-ExpandableListView-Android.jpg\" alt=\"padding in ExpandableListView Android\" width=\"230\" height=\"370\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/03\/padding-in-ExpandableListView-Android.jpg 230w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/03\/padding-in-ExpandableListView-Android-186x300.jpg 186w\" sizes=\"auto, (max-width: 230px) 100vw, 230px\" \/><\/p>\n<hr \/>\n<h4><strong>Adapter Used In ExpandableListView In Android:<\/strong><\/h4>\n<p>An adapter is a bridge between UI component and data source that helps us to fill data in UI component. It holds the data and send the data to Adapter view then view can takes the data from the adapter view and shows the data on different views like as ExpandableListView or other Views.\u00a0The implementation of this interface will provide access to the data of the children (categorized by groups), and also instantiate views for the children and groups.<\/p>\n<p>In Android for supplying data in an ExpandableListView following adapters are used.<\/p>\n<p>1. ExpandableListAdapter<br \/>\n2. BaseExpandableListAdapter<br \/>\n3. SimpleExpandableListAdapter<\/p>\n<p>Now we explain these three adapters in detail:<\/p>\n<p><strong><span style=\"color: #008000;\">1. ExpandableListAdapter:<\/span><\/strong><\/p>\n<p>ExpandableListAdapter is an Adapter that links a ExpandableListView with the underlying data. The implementation of this interface will provide the data for the children and also initiate the views for the children and groups.\u00a0 For customization of list we need to implement ExpandableListAdapter in our custom adapter.<\/p>\n<p>Below is the example code of ExpandableListAdapter in which we create CustomAdapter class and then implements ExpandableListAdapter in that class.<\/p>\n<pre>public class CustomAdapter implements ExpandableListAdapter {\r\n@Override\r\npublic void registerDataSetObserver(DataSetObserver observer) {\r\n\r\n}\r\n\r\n@Override\r\npublic void unregisterDataSetObserver(DataSetObserver observer) {\r\n\r\n}\r\n\r\n@Override\r\npublic int getGroupCount() {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic int getChildrenCount(int groupPosition) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic Object getGroup(int groupPosition) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic Object getChild(int groupPosition, int childPosition) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic long getGroupId(int groupPosition) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic long getChildId(int groupPosition, int childPosition) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic boolean hasStableIds() {\r\nreturn false;\r\n}\r\n\r\n@Override\r\npublic View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic boolean isChildSelectable(int groupPosition, int childPosition) {\r\nreturn false;\r\n}\r\n\r\n@Override\r\npublic boolean areAllItemsEnabled() {\r\nreturn false;\r\n}\r\n\r\n@Override\r\npublic boolean isEmpty() {\r\nreturn false;\r\n}\r\n\r\n@Override\r\npublic void onGroupExpanded(int groupPosition) {\r\n\r\n}\r\n\r\n@Override\r\npublic void onGroupCollapsed(int groupPosition) {\r\n\r\n}\r\n\r\n@Override\r\npublic long getCombinedChildId(long groupId, long childId) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic long getCombinedGroupId(long groupId) {\r\nreturn 0;\r\n}\r\n}\r\n<\/pre>\n<p>Read <a href=\"\/ui\/expandablelistadapter-example-android.html\">ExpandableListAdapter Tutorial With Example In Android Studio<\/a> for more details.<\/p>\n<p><span style=\"color: #008000;\"><strong>2. BaseExpandableListAdapter:<\/strong><\/span><\/p>\n<p>BaseExpandableListAdapter is a base class for the expandable list adapter used to provide data and Views from some data to ExpandableListView. For Creating a custom ExpandableListView we need to create a custom class and then extends BaseExpandableListAdapter class in that class.<\/p>\n<p>Below is an example code of BaseExpandableListAdapter in which we create custom adapter class and then extends BaseExpandableListAdapter in that class.<\/p>\n<pre>public class CustomAdapter extends BaseExpandableListAdapter {\r\n\r\n@Override\r\npublic int getGroupCount() {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic int getChildrenCount(int groupPosition) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic Object getGroup(int groupPosition) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic Object getChild(int groupPosition, int childPosition) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic long getGroupId(int groupPosition) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic long getChildId(int groupPosition, int childPosition) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic boolean hasStableIds() {\r\nreturn false;\r\n}\r\n\r\n@Override\r\npublic View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic boolean isChildSelectable(int groupPosition, int childPosition) {\r\nreturn false;\r\n}\r\n}\r\n<\/pre>\n<p>Read\u00a0<a href=\"\/ui\/baseexpandablelistadapter-example-android-studio.html\">BaseExpandableListAdapter With Example In Android Studio<\/a> for explanation of all these function.<\/p>\n<p><span style=\"color: #008000;\"><strong>3. SimpleExpandableListAdapter:<\/strong><\/span><\/p>\n<p>SimpleExpandableListAdapter is an adapter that is used to map the static data to group and child views defined in our XML ( layout ) file. We can separately specify the data backing to the group as a List of Maps. Each entry in a ArrayList corresponds to one group in the Expandable List. The maps contains the data for each row. We can also specify an XML file that defines the views used to display a group, and a mapping from keys in the Map to specific views. This process is similar for a child, except it is one level deeper so the data backing is specified as a List&lt;list&gt;, where the first List is corresponds to the group of the child and the second List corresponds to the position of the child within that group, and finally the Map holds the data for the particular child.<\/p>\n<pre>public\u00a0SimpleExpandableListAdapter\u00a0(Context\u00a0context,\u00a0List&lt;?\u00a0extends\u00a0Map&lt;String,\u00a0?&gt;&gt; groupData, int groupLayout,\u00a0String[]groupFrom, int[] groupTo,\u00a0List&lt;?\u00a0extends\u00a0List&lt;?\u00a0extends\u00a0Map&lt;String,\u00a0?&gt;&gt;&gt; childData, int childLayout,\u00a0String[]\u00a0childFrom, int[] childTo)\r\n<\/pre>\n<p>Read <a href=\"\/ui\/simpleexpandablelistadapter-example-android-studio.html\">SimpleExpandableListAdapter tutorial<\/a>\u00a0for explanation of all these parameter.<\/p>\n<hr \/>\n<h4><strong>ExpandableListView using BaseExpandableListAdapter Example In Android Studio<\/strong><\/h4>\n<p>Below is the example of ExpandableListView in android\u00a0where\u00a0we display an expandable list with subject name and their topics. In this example we display subject names as\u00a0Group items and their topic names as child items for a particular group. In this we implement setOnChildClickListener() and setOnGroupClickListener() events and whenever a user clicks on a child or a group item the name of the item is displayed by using a Toast.<\/p>\n<p>Below you can download code, see final output and step by step explanation of Example in Android Studio:<\/p>\n<p>[cp_modal id=&#8221;cp_id_7c8ee&#8221;]<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2150\" src=\"\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1.png\" alt=\"Download Code\" width=\"439\" height=\"65\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1.png 439w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1-300x44.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/>[\/cp_modal]<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1482\" src=\"\/ui\/wp-content\/uploads\/2016\/04\/ExpandableListView-Example-In-Android-Studio.jpg\" alt=\"ExpandableListView Example In Android Studio\" width=\"257\" height=\"359\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/04\/ExpandableListView-Example-In-Android-Studio.jpg 257w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/04\/ExpandableListView-Example-In-Android-Studio-215x300.jpg 215w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 1:<\/strong><\/span> Create a new project and name it ExpandableListViewExample.<\/p>\n<p><span style=\"color: #008000;\"><strong>Step 2:<\/strong><\/span> Open res -&gt; layout -&gt;activity_main.xml (or) main.xml and add following code:<\/p>\n<p>In this step we open an XML\u00a0file and add the code for displaying a ExpandableListView by using its different attributes.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\r\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\"&gt;\r\n\r\n    &lt;ExpandableListView\r\n        android:id=\"@+id\/simpleExpandableListView\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        android:divider=\"#f00\"\r\n        android:childDivider=\"#0f0\"\r\n        android:dividerHeight=\"1dp\" \/&gt;\r\n\r\n&lt;\/RelativeLayout&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span> Create a new xml file for group items Open res -&gt; layout -&gt; group_items.xml and add following code:<\/p>\n<p>In this step we add the code for displaying a TextView subject names.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"55dip\"\r\n    android:orientation=\"vertical\" &gt;\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/heading\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:paddingLeft=\"35sp\"\r\n        android:textAppearance=\"?android:attr\/textAppearanceLarge\"\r\n        android:textStyle=\"bold\" \/&gt;\r\n\r\n&lt;\/LinearLayout&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong><\/span> Create a new xml file for group items Open res -&gt; layout -&gt; child_items.xml and add following code:<\/p>\n<p>In this step we add the code for displaying two TextView i.e. one for sequence of topics and another for topic name<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;RelativeLayout android:layout_width=\"match_parent\" android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\" xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/sequence\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:paddingLeft=\"35sp\"\r\n        android:textAppearance=\"?android:attr\/textAppearanceMedium\" \/&gt;\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/childItem\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_toRightOf=\"@id\/sequence\"\r\n        android:textAppearance=\"?android:attr\/textAppearanceMedium\" \/&gt;\r\n\r\n&lt;\/RelativeLayout&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 5:<\/strong><\/span> Open\u00a0 \u00a0src -&gt; package -&gt; MainActivity.Java<\/p>\n<p>In this step we open\u00a0MainActivity\u00a0and\u00a0add the code to\u00a0initiate the ExpandableListView\u00a0and add the data to lists for displaying in an ExpandableListView using model classes and then set the adapter which\u00a0fills the data in the ExpandableListView. In this we implement setOnChildClickListener() and setOnGroupClickListener() events. Whenever a user clicks on a child or a group item the name of the item is display by using a Toast.<\/p>\n<pre>package example.abhiandroid.expandablelistviewexample;\r\n\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.view.View;\r\nimport android.widget.ExpandableListView;\r\nimport android.widget.Toast;\r\n\r\nimport java.util.ArrayList;\r\nimport java.util.LinkedHashMap;\r\n\r\npublic class MainActivity extends AppCompatActivity{\r\n\r\n    private LinkedHashMap&lt;String, GroupInfo&gt; subjects = new LinkedHashMap&lt;String, GroupInfo&gt;();\r\n    private ArrayList&lt;GroupInfo&gt; deptList = new ArrayList&lt;GroupInfo&gt;();\r\n\r\n    private CustomAdapter listAdapter;\r\n    private ExpandableListView simpleExpandableListView;\r\n\r\n    @Override\r\n    public void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n\r\n        \/\/ add data for displaying in expandable list view\r\n        loadData();\r\n\r\n        \/\/get reference of the ExpandableListView\r\n        simpleExpandableListView = (ExpandableListView) findViewById(R.id.simpleExpandableListView);\r\n        \/\/ create the adapter by passing your ArrayList data\r\n        listAdapter = new CustomAdapter(MainActivity.this, deptList);\r\n        \/\/ attach the adapter to the expandable list view\r\n        simpleExpandableListView.setAdapter(listAdapter);\r\n\r\n        \/\/expand all the Groups\r\n        expandAll();\r\n\r\n        \/\/ setOnChildClickListener listener for child row click\r\n        simpleExpandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {\r\n            @Override\r\n            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {\r\n                \/\/get the group header\r\n                GroupInfo headerInfo = deptList.get(groupPosition);\r\n                \/\/get the child info\r\n                ChildInfo detailInfo =  headerInfo.getProductList().get(childPosition);\r\n                \/\/display it or do something with it\r\n                Toast.makeText(getBaseContext(), \" Clicked on :: \" + headerInfo.getName()\r\n                        + \"\/\" + detailInfo.getName(), Toast.LENGTH_LONG).show();\r\n                return false;\r\n            }\r\n        });\r\n        \/\/ setOnGroupClickListener listener for group heading click\r\n        simpleExpandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {\r\n            @Override\r\n            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {\r\n                \/\/get the group header\r\n                GroupInfo headerInfo = deptList.get(groupPosition);\r\n                \/\/display it or do something with it\r\n                Toast.makeText(getBaseContext(), \" Header is :: \" + headerInfo.getName(),\r\n                        Toast.LENGTH_LONG).show();\r\n\r\n                return false;\r\n            }\r\n        });\r\n\r\n\r\n    }\r\n\r\n    \/\/method to expand all groups\r\n    private void expandAll() {\r\n        int count = listAdapter.getGroupCount();\r\n        for (int i = 0; i &lt; count; i++){\r\n            simpleExpandableListView.expandGroup(i);\r\n        }\r\n    }\r\n\r\n    \/\/method to collapse all groups\r\n    private void collapseAll() {\r\n        int count = listAdapter.getGroupCount();\r\n        for (int i = 0; i &lt; count; i++){\r\n            simpleExpandableListView.collapseGroup(i);\r\n        }\r\n    }\r\n\r\n    \/\/load some initial data into out list\r\n    private void loadData(){\r\n\r\n        addProduct(\"Android\",\"ListView\");\r\n        addProduct(\"Android\",\"ExpandableListView\");\r\n        addProduct(\"Android\",\"GridView\");\r\n\r\n        addProduct(\"Java\",\"PolyMorphism\");\r\n        addProduct(\"Java\",\"Collections\");\r\n\r\n    }\r\n\r\n\r\n\r\n    \/\/here we maintain our products in various departments\r\n    private int addProduct(String department, String product){\r\n\r\n        int groupPosition = 0;\r\n\r\n        \/\/check the hash map if the group already exists\r\n        GroupInfo headerInfo = subjects.get(department);\r\n        \/\/add the group if doesn't exists\r\n        if(headerInfo == null){\r\n            headerInfo = new GroupInfo();\r\n            headerInfo.setName(department);\r\n            subjects.put(department, headerInfo);\r\n            deptList.add(headerInfo);\r\n        }\r\n\r\n        \/\/get the children for the group\r\n        ArrayList&lt;ChildInfo&gt; productList = headerInfo.getProductList();\r\n        \/\/size of the children list\r\n        int listSize = productList.size();\r\n        \/\/add to the counter\r\n        listSize++;\r\n\r\n        \/\/create a new child and add that to the group\r\n        ChildInfo detailInfo = new ChildInfo();\r\n        detailInfo.setSequence(String.valueOf(listSize));\r\n        detailInfo.setName(product);\r\n        productList.add(detailInfo);\r\n        headerInfo.setProductList(productList);\r\n\r\n        \/\/find the group position inside the list\r\n        groupPosition = deptList.indexOf(headerInfo);\r\n        return groupPosition;\r\n    }\r\n\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 6:<\/strong><\/span> Create a New Class Open -&gt; package &#8211; &gt; GroupInfo.Java and add the following code.<\/p>\n<p>In this step, we create a class for setting and getting the group item name and child items info according to a particular group. GroupInfo is a\u00a0model class used to set the name of the group item and child items information from your main activity and then get the information within Adapter class. Finally set the value to ExpandableListView.<\/p>\n<pre>package example.abhiandroid.expandablelistviewexample;\r\n\r\nimport java.util.ArrayList;\r\n\r\npublic class GroupInfo {\r\n\r\n    private String name;\r\n    private ArrayList&lt;ChildInfo&gt; list = new ArrayList&lt;ChildInfo&gt;();\r\n\r\n    public String getName() {\r\n        return name;\r\n    }\r\n\r\n    public void setName(String name) {\r\n        this.name = name;\r\n    }\r\n\r\n    public ArrayList&lt;ChildInfo&gt; getProductList() {\r\n        return list;\r\n    }\r\n\r\n    public void setProductList(ArrayList&lt;ChildInfo&gt; productList) {\r\n        this.list = productList;\r\n    }\r\n\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 7:<\/strong><\/span> Create a New Class Open -&gt; package &#8211; &gt; ChildInfo.Java and add the following code.<\/p>\n<p>In this step, we create a\u00a0class for setting and getting the name and sequence for the child items. ChildInfo is a\u00a0model class used to set the name of the child item and the sequence of the child item from your main activity and then get the name and sequence within adapter class. Finally set the value to expandable list view.<\/p>\n<pre>package example.abhiandroid.expandablelistviewexample;\r\n\r\npublic class ChildInfo {\r\n\r\n    private String sequence = \"\";\r\n    private String name = \"\";\r\n\r\n    public String getSequence() {\r\n        return sequence;\r\n    }\r\n\r\n    public void setSequence(String sequence) {\r\n        this.sequence = sequence;\r\n    }\r\n\r\n    public String getName() {\r\n        return name;\r\n    }\r\n\r\n    public void setName(String name) {\r\n        this.name = name;\r\n    }\r\n\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 8:<\/strong><\/span> Create a New Class Open -&gt; package &#8211; &gt; CustomAdapter.Java and add the following code.<\/p>\n<p>In this step, we create a CustomAdapter class and then extends BaseExpandableListAdapter in that class. Finally set the data in the ExpandableListView from GroupInfo and\u00a0 ChildInfo model class.<\/p>\n<pre>package example.abhiandroid.expandablelistviewexample;\r\n\r\nimport android.content.Context;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.BaseExpandableListAdapter;\r\nimport android.widget.TextView;\r\n\r\nimport java.util.ArrayList;\r\n\r\n\r\n\/**\r\n * Created by Gourav on 08-03-2016.\r\n *\/\r\npublic class CustomAdapter extends BaseExpandableListAdapter {\r\n\r\n    private Context context;\r\n    private ArrayList&lt;GroupInfo&gt; deptList;\r\n\r\n    public CustomAdapter(Context context, ArrayList&lt;GroupInfo&gt; deptList) {\r\n        this.context = context;\r\n        this.deptList = deptList;\r\n    }\r\n\r\n    @Override\r\n    public Object getChild(int groupPosition, int childPosition) {\r\n        ArrayList&lt;ChildInfo&gt; productList = deptList.get(groupPosition).getProductList();\r\n        return productList.get(childPosition);\r\n    }\r\n\r\n    @Override\r\n    public long getChildId(int groupPosition, int childPosition) {\r\n        return childPosition;\r\n    }\r\n\r\n    @Override\r\n    public View getChildView(int groupPosition, int childPosition, boolean isLastChild,\r\n                             View view, ViewGroup parent) {\r\n\r\n        ChildInfo detailInfo = (ChildInfo) getChild(groupPosition, childPosition);\r\n        if (view == null) {\r\n            LayoutInflater infalInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);\r\n            view = infalInflater.inflate(R.layout.child_items, null);\r\n        }\r\n\r\n        TextView sequence = (TextView) view.findViewById(R.id.sequence);\r\n        sequence.setText(detailInfo.getSequence().trim() + \". \");\r\n        TextView childItem = (TextView) view.findViewById(R.id.childItem);\r\n        childItem.setText(detailInfo.getName().trim());\r\n\r\n        return view;\r\n    }\r\n\r\n    @Override\r\n    public int getChildrenCount(int groupPosition) {\r\n\r\n        ArrayList&lt;ChildInfo&gt; productList = deptList.get(groupPosition).getProductList();\r\n        return productList.size();\r\n\r\n    }\r\n\r\n    @Override\r\n    public Object getGroup(int groupPosition) {\r\n        return deptList.get(groupPosition);\r\n    }\r\n\r\n    @Override\r\n    public int getGroupCount() {\r\n        return deptList.size();\r\n    }\r\n\r\n    @Override\r\n    public long getGroupId(int groupPosition) {\r\n        return groupPosition;\r\n    }\r\n\r\n    @Override\r\n    public View getGroupView(int groupPosition, boolean isLastChild, View view,\r\n                             ViewGroup parent) {\r\n\r\n        GroupInfo headerInfo = (GroupInfo) getGroup(groupPosition);\r\n        if (view == null) {\r\n            LayoutInflater inf = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);\r\n            view = inf.inflate(R.layout.group_items, null);\r\n        }\r\n\r\n        TextView heading = (TextView) view.findViewById(R.id.heading);\r\n        heading.setText(headerInfo.getName().trim());\r\n\r\n        return view;\r\n    }\r\n\r\n    @Override\r\n    public boolean hasStableIds() {\r\n        return true;\r\n    }\r\n\r\n    @Override\r\n    public boolean isChildSelectable(int groupPosition, int childPosition) {\r\n        return true;\r\n    }\r\n\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Output:<\/strong><\/span><\/p>\n<p>Now run the App and you will see main topics and sub-topics listed in ExpandableListView.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Android, ExpandableListView is a View that shows items in a vertically scrolling two level list. Different from the listview by allowing two level groups which can individually be expanded to show its children. Each group can be expanded or collapsed individually to show or hide its children items. We can attach listeners events to &hellip; <a href=\"https:\/\/abhiandroid.com\/ui\/expandablelistview\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">ExpandableListView With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1375","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"<title>ExpandableListView With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on ExpandableListView with step by step explanation using Adapter example In Android. ExpandableListView is a View that shows items in a vertically scrolling two level list.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/expandablelistview\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=1375"}],"version-history":[{"count":2,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1375\/revisions"}],"predecessor-version":[{"id":2618,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1375\/revisions\/2618"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=1375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}