Custom Expandable ListView Example in Android
Hello Friends, Today we will teach you how to add custom expandable listview in android.
Follow the steps
Step 1. :- open your project and add ExpandableListView element in your xml file
activity_main.xml :-
Step 2. :- Now we need to create 2 xml layout file for our ExpandableListView. One for List header and second one for List item
list_header.xml :-
list_item.xml :-
Step 3. :- Now Create a Model class for List Header
Continent.java :-
Step 4. :- Now we need to create one more Model class of Expandable List View item.
Country.java :-
Step 5. :- Now Create Custom Adapter and implement ExpandableListAdapter for our Expandable Lis t View.
CustomAdapter.java :-
Step 6. :- Now open MainActivity.java file and make some changes in our MainActivity.java file.
MainActivity.java :-
Now Run the project and see the output
Output :-
Follow the steps
Step 1. :- open your project and add ExpandableListView element in your xml file
activity_main.xml :-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".MainActivity">
<ExpandableListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView"
android:dividerHeight="1dp"
android:listSelector="@android:color/holo_blue_light"
android:childDivider="@android:color/holo_orange_dark"
android:divider="@android:color/holo_blue_dark"/>
</RelativeLayout>
Step 2. :- Now we need to create 2 xml layout file for our ExpandableListView. One for List header and second one for List item
list_header.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"
android:orientation="horizontal"
android:layout_margin="5dp"
android:background="@android:color/darker_gray">
<ImageView
android:layout_width="110dp"
android:layout_height="80dp"
android:src="@drawable/ic_launcher_background"
android:id="@+id/list_header_picture"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:layout_marginLeft="5dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/list_header_name"
android:text="List Header"
android:textStyle="bold"
android:layout_marginTop="5dp"
android:padding="10dp"
android:textColor="@android:color/white"
android:textSize="18sp"/>
</LinearLayout>
list_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"
android:orientation="horizontal"
android:padding="5dp"
android:background="@android:color/holo_orange_light">
<ImageView
android:layout_width="75dp"
android:layout_height="75dp"
android:padding="5dp"
android:src="@drawable/ic_launcher_background"
android:id="@+id/list_item_picture"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/list_item_name"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="16sp"
android:padding="8dp"
android:layout_marginTop="5dp"
android:text="List Child" />
</LinearLayout>
Step 3. :- Now Create a Model class for List Header
Continent.java :-
package com.akshayarora.myapplication;
import androidx.annotation.NonNull;
import java.util.ArrayList;
public class Continent {
private String name;
private ArrayList<Country> countries;
private int flag;
public Continent(String name, ArrayList<Country> countries, int flag) {
this.name = name;
this.countries = countries;
this.flag = flag;
}
@NonNull
@Override
public String toString() {
return name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public ArrayList<Country> getCountries() {
return countries;
}
public void setCountries(ArrayList<Country> countries) {
this.countries = countries;
}
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
}
Step 4. :- Now we need to create one more Model class of Expandable List View item.
Country.java :-
package com.akshayarora.myapplication;
import androidx.annotation.NonNull;
public class Country {
private String name;
private int id;
private int flag;
public Country(String name, int id, int flag) {
this.name = name;
this.id = id;
this.flag = flag;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
@NonNull
@Override
public String toString() {
return name;
}
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
}
Step 5. :- Now Create Custom Adapter and implement ExpandableListAdapter for our Expandable Lis t View.
CustomAdapter.java :-
package com.akshayarora.myapplication;
import android.content.Context;
import android.database.DataSetObserver;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class CustomAdapter implements ExpandableListAdapter {
private Context context;
private ArrayList<Continent> continents;
private ArrayList<Continent> continentsList;
public CustomAdapter(Context context, ArrayList<Continent> data) {
this.context = context;
this.continents = new ArrayList<Continent>();
this.continents.addAll(data);
this.continentsList = new ArrayList<Continent>();
this.continentsList.addAll(data);
}
@Override
public void registerDataSetObserver(DataSetObserver dataSetObserver) {
}
@Override
public void unregisterDataSetObserver(DataSetObserver dataSetObserver) {
}
@Override
public void onGroupExpanded(int i) {
}
@Override
public void onGroupCollapsed(int i) {
}
@Override
public boolean isEmpty() {
if (continentsList.size() == 0){
return true;
}else {
return false;
}
}
@Override
public int getGroupCount() {
return continentsList.size();
}
@Override
public int getChildrenCount(int i) {
return continentsList.get(i).getCountries().size();
}
@Override
public Object getGroup(int i) {
return continentsList.get(i);
}
@Override
public Object getChild(int i, int i1) {
return continentsList.get(i).getCountries().get(i1);
}
@Override
public long getGroupId(int i) {
return i;
}
@Override
public long getChildId(int i, int i1) {
return i1;
}
@Override
public boolean hasStableIds() {
return true;
}
@Override
public View getGroupView(int i, boolean b, View view, ViewGroup viewGroup) {
Continent country = continentsList.get(i);
if (view == null){
view = LayoutInflater.from(context).inflate(R.layout.list_header,viewGroup,false);
}
TextView tvChild = view.findViewById(R.id.list_header_name);
ImageView imageView = (ImageView)view.findViewById(R.id.list_header_picture);
imageView.setImageResource(country.getFlag());
tvChild.setText(country.getName());
return view;
}
@Override
public View getChildView(int i, int i1, boolean b, View view, ViewGroup viewGroup) {
Country states = continentsList.get(i).getCountries().get(i1);
if (view == null){
view = LayoutInflater.from(context).inflate(R.layout.list_item,viewGroup,false);
}
TextView txtStateName = (TextView)view.findViewById(R.id.list_item_name);
ImageView imageView = (ImageView)view.findViewById(R.id.list_item_picture);
imageView.setImageResource(states.getFlag());
txtStateName.setText(states.getName());
return view;
}
@Override
public boolean isChildSelectable(int i, int i1) {
return true;
}
@Override
public boolean areAllItemsEnabled() {
return true;
}
@Override
public long getCombinedGroupId(long l) {
return l;
}
@Override
public long getCombinedChildId(long l, long l1) {
return l1;
}
}
Step 6. :- Now open MainActivity.java file and make some changes in our MainActivity.java file.
MainActivity.java :-
package com.akshayarora.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.graphics.Color;
import android.hardware.Camera;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ExpandableListView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ExpandableListView expandableListView;
private CustomAdapter adapter;
private ArrayList<Continent> continents;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
expandableListView = (ExpandableListView) findViewById(R.id.listView);
continents = new ArrayList<>();
continents = ContinentData(continents);
adapter = new CustomAdapter(this,continents);
expandableListView.setAdapter(adapter);
expandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView expandableListView, View view, int i, int i1, long l) {
Toast.makeText(MainActivity.this, ""+adapter.getChild(i,i1), Toast.LENGTH_SHORT).show();
return false;
}
});
expandableListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
@Override
public void onGroupCollapse(int i) {
Toast.makeText(MainActivity.this, "Collapse "+adapter.getGroup(i), Toast.LENGTH_SHORT).show();
}
});
expandableListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
@Override
public void onGroupExpand(int i) {
Toast.makeText(MainActivity.this, "Expand "+adapter.getGroup(i), Toast.LENGTH_SHORT).show();
}
});
}
private ArrayList<Continent> ContinentData(ArrayList<Continent> continents){
Continent asiaContinent = new Continent("Asia",null,R.drawable.asia);
ArrayList<Country> countries = new ArrayList<>();
countries.add(new Country("India",1,R.drawable.india));
countries.add(new Country("Pakisthan",2,R.drawable.pakisthan));
countries.add(new Country("Thailand",3,R.drawable.thailand));
countries.add(new Country("China",4,R.drawable.china));
asiaContinent.setCountries(countries);
continents.add(asiaContinent);
Continent europeContinent = new Continent("Europe",null,R.drawable.eruope);
ArrayList<Country> europeCountries = new ArrayList<>();
europeCountries.add(new Country("United kingdom",5,R.drawable.uk));
europeCountries.add(new Country("France",6,R.drawable.francef));
europeCountries.add(new Country("Germany",7,R.drawable.germany));
europeCountries.add(new Country("Iceland",8,R.drawable.iceland));
europeContinent.setCountries(europeCountries);
continents.add(europeContinent);
Continent africaContinent = new Continent("Africa",null,R.drawable.africa);
ArrayList<Country> africanCountry = new ArrayList<>();
africanCountry.add(new Country("South Africa",9,R.drawable.southafrica));
africanCountry.add(new Country("Ethiopia",10,R.drawable.ethiopia));
africanCountry.add(new Country("Kenya",11,R.drawable.kenya));
africanCountry.add(new Country("Nigeria",12,R.drawable.nigeria));
africaContinent.setCountries(africanCountry);
continents.add(africaContinent);
return continents;
}
}
Now Run the project and see the output
Output :-
Enjoy !
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.