Android Programming Tutorial 60 :ExtendedListView Example in Android Studio

ExtendedListView :
(In General )ExtendedListView is resembles to Listview but its a type of Parent and child type relationship,
A list with text, images, etc if we extend the list we will find the child listview with text and images.
                                                                   OR
(Programatically) ExpandableListView is a type of view very much similar to a ListView but allows two levels. Basically items are grouped inside the list much like giving a category heading to a bunch of similar items and then group them by the category headings. Each group can be expanded or collapsed individually to show or hide its children. You can attach listeners to the ExpandableListView to listen for OnClick events on the Group or the individual children.

In this tutorial we learn to create an ExpandableListView simulating a Department Store where products belong to a certain department. We initially load our list with some data, then dynamically add items to the list by checking for new department and add a group otherwise just add the item to the existing department. We also associate listeners to alert which Department or Product was clicked on. We also learn how to programmatically expand and collapse all groups or just one at a time.
 
ExtendedListViewExample:

File >> New >> Android Application
Enter Project name: ExtendedListViewApp
Package: com.kdms.expandedlistview
Keep other default selections, click Next until you reach Finish

                                    

  Add Following jar in build.gradle display below in the
 dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.android.support:design:23.1.0'
}
Copy and Past the following code in the MainActivity.java
package com.kdms.expandedlistview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ExpandableListView;
import com.kdms.expandedlistview.adapter.ExpandAdapter;
import com.kdms.expandedlistview.datatypes.Child;
import com.kdms.expandedlistview.datatypes.Group;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ExpandAdapter expandAdapter;
    private ArrayList<Group> expListItems,list;
    private ExpandableListView expandList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        expandList = (ExpandableListView) findViewById(R.id.exp_list);
        expListItems = SetStandardGroup();
        expandAdapter = new ExpandAdapter(MainActivity.this,expListItems);
        expandList.setAdapter(expandAdapter);
    }
public ArrayList<Group> SetStandardGroup(){
String group_items[] = {"GROUP A","GROUP B","GROUP C","GROUP  D" ,
                                       "GROUP E","GROUP F","GROUP G","GROUP H"};String country_name[] =    {"ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher",
                                "ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher",
                                "ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher",
                                "ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher",
                                "ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher","ic_laucher",
                                 "ic_laucher","ic_laucher"};
 int[] images = {R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,
                        R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,
                        R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,
                        R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,
                        R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,
                        R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,
                        R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,
                        R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher};

        list = new ArrayList<Group>();
        ArrayList<Child> ch_list;
        int size = 4;

        for(String group_name : group_items){
            Group gu = new Group();
            gu.setName(group_name);

            ch_list = new ArrayList<Child>();
            for( int j =0;j<size; j++){
                Child ch = new Child();
                ch.setName(country_name[j]);
                ch.setImage(images[j]);
                ch_list.add(ch);
            }
            gu.setItems(ch_list);
            list.add(gu);

            size = size + 4;
        }
        return  list;
    }
}
Now Create An Adapter Class and Copy and Past the following code in the ExtendAdapter.java
package com.kdms.expandedlistview.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.kdms.expandedlistview.R;
import com.kdms.expandedlistview.datatypes.Child;
import com.kdms.expandedlistview.datatypes.Group;
import java.util.ArrayList;
public class ExpandAdapter extends BaseExpandableListAdapter {

    private Context context;
    private ArrayList<Group> groups;

    public ExpandAdapter(Context context, ArrayList<Group> groups) {
        this.context = context;
        this.groups = groups;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        ArrayList<Child> chList = groups.get(groupPosition).getItems();
        return chList.get(childPosition);
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {

        Child child = (Child) getChild(groupPosition, childPosition);
        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) context
                    .getSystemService(context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.child_item, null);
        }
        TextView tv = (TextView) convertView.findViewById(R.id.country_Name);
        ImageView iv = (ImageView) convertView.findViewById(R.id.flag);

        tv.setText(child.getName().toString());
        iv.setImageResource(child.getImage());

        return convertView;
    }
    @Override
    public int getChildrenCount(int groupPosition) {
        ArrayList<Child> chList = groups.get(groupPosition).getItems();
        return chList.size();
    }
    @Override
    public Object getGroup(int groupPosition) {
        return groups.get(groupPosition);
    }
    @Override
    public int getGroupCount() {
        return groups.size();
    }
    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
                             View convertView, ViewGroup parent) {
        Group group = (Group) getGroup(groupPosition);
        if (convertView == null) {
            LayoutInflater inf = (LayoutInflater) context
                    .getSystemService(context.LAYOUT_INFLATER_SERVICE);
            convertView = inf.inflate(R.layout.group_item, null);
        }
        TextView tv = (TextView) convertView.findViewById(R.id.group_Item);
        tv.setText(group.getName());
        return convertView;
    }
    @Override
    public boolean hasStableIds() {
        return true;
    }
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
} 
Now Create a DataType Class, Copy and Past the following code in the ChildData.java
package com.kdms.expandedlistview.datatypes;
public class ChildData {

    private String name;
    private int image;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }
}
Now Create a DataType Class, Copy and Past the following code in the GroupData.java
package com.kdms.expandedlistview.datatypes;

import java.util.ArrayList;

public class GroupData {

    private String name;
    private ArrayList<Child> Items;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public ArrayList<Child> getItems() {
        return Items;
    }

    public void setItems(ArrayList<Child> items) {
        Items = items;
    }
} 
Copy and Past the following code in the layout file called activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <ExpandableListView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/exp_list" />

</android.support.design.widget.CoordinatorLayout> 
Copy and Past the following code in the layout file called child_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="4dp"
    android:paddingBottom="4dp"
    android:layout_marginLeft="50dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:id="@+id/country_Name"
        android:textSize="20dp"
        android:layout_alignBottom="@+id/flag"
        android:layout_toRightOf="@+id/flag"
        android:layout_marginBottom="14dp"
        android:layout_marginLeft="29dp" />

    <ImageView
        android:layout_width="70dp"
        android:layout_height="50dp"
        android:id="@+id/flag"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="27dp"
        android:src="@mipmap/like"/>
</RelativeLayout> 
 Copy and Past the following code in the layout file called group_item.xml
<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="25sp"
        android:textSize="25dp"
        android:id="@+id/group_Item" />
</LinearLayout>
 Copy and Past the following code in the Manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.kdms.expandedlistview" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Run Your Project as the below by clicking on shift+10 or like the below-->Android Application and observe the output
      

OutPut:

Please Send Your Comments To ambilpura.sunil@gmail.com

Stay Tune For Next Tutorial...CircularImage Example in Android Studio