TreeView in Android with Example
If you are looking for new UI designs to represent huge data, then there are so many ways to represent this type of data. You can use pie charts, graphs, and many more view types to implement these views. For displaying such huge data then we can prefer using a TreeView. TreeView is similar to that of a tree in which it has a parent node and inside that parent node, you can create multiple nodes according to requirement. In this example, we can take a look at creating a TreeView in your Android application. Now we will move towards the implementation of Tree View.
We are going to implement this project using both Java and Kotlin Programming Language for Android.
What is TreeView and How it looks?
TreeView is a pattern for the representation of data in the form of a tree so that it becomes easier for users to understand the organization of data in our app. A sample image is given below to get an idea of what TreeView looks like.
Note: TreeView is no longer available in Android, i.e. it is a depreciated concept. So, we will achieve the solution of such problems using ExpandableListView in Android.
What is ExpandableListView in Android?
ExpandableListView in Android is a view that allows you to display data in a two-level, hierarchical structure, where each parent item can be expanded to reveal child items.
To know more about the topic refer to this article.
Step By Step Implementation of ExpandableListView
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Working with the XML Files
Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
activity_main.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="vertical">
<ExpandableListView
android:id="@+id/expandableListView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Layout:
Step 3: Working on MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.
MainActivity File:
package com.gfg.treeview;
import android.os.Bundle;
import android.widget.ExpandableListView;
import android.widget.SimpleExpandableListAdapter;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MainActivity extends AppCompatActivity {
ExpandableListView expandableListView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
expandableListView = findViewById(R.id.expandableListView);
// Creating a list of country names (parent items)
List<String> parentList = new ArrayList<>();
parentList.add("USA");
parentList.add("India");
parentList.add("Australia");
// Creating a hashmap to map each country to its respective cities (child items)
Map<String, List<String>> childList = new HashMap<>();
List<String> usaCities = new ArrayList<>();
usaCities.add("New York");
usaCities.add("Los Angeles");
usaCities.add("Chicago");
List<String> indiaCities = new ArrayList<>();
indiaCities.add("Mumbai");
indiaCities.add("Delhi");
indiaCities.add("Bangalore");
List<String> australiaCities = new ArrayList<>();
australiaCities.add("Sydney");
australiaCities.add("Melbourne");
australiaCities.add("Brisbane");
// Mapping each country to its cities
childList.put("USA", usaCities);
childList.put("India", indiaCities);
childList.put("Australia", australiaCities);
// Creating and setting an adapter for the ExpandableListView
List<Map<String, String>> groupData = new ArrayList<>();
for (String country : parentList) {
Map<String, String> curGroupMap = new HashMap<>();
curGroupMap.put("COUNTRY_NAME", country);
groupData.add(curGroupMap);
}
String[] groupFrom = {"COUNTRY_NAME"};
int[] groupTo = {android.R.id.text1};
List<List<Map<String, String>>> childData = new ArrayList<>();
for (String country : parentList)
{
List<Map<String, String>> children = new ArrayList<>();
List<String> cities = childList.get(country);
if (cities != null)
{
for (String city : cities)
{
Map<String, String> curChildMap = new HashMap<>();
curChildMap.put("CITY_NAME", city);
children.add(curChildMap);
}
}
childData.add(children);
}
String[] childFrom = {"CITY_NAME"};
int[] childTo = {android.R.id.text1};
// Short Adapter Programmatically
// Alternative can create Adapter Class
SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
this, groupData, android.R.layout.simple_expandable_list_item_1,
groupFrom, groupTo, childData, android.R.layout.simple_list_item_1,
childFrom, childTo);
// Setting up in RecyclerView
expandableListView.setAdapter(adapter);
}
}
package com.gfg.treeviewkotlin
import android.os.Bundle
import android.widget.ExpandableListView
import android.widget.SimpleExpandableListAdapter
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
private lateinit var expandableListView: ExpandableListView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
expandableListView = findViewById(R.id.expandableListView)
// Creating a list of country names (parent items)
val parentList: List<String> = listOf("USA", "India", "Australia")
// Creating a map to associate each country with its cities (child items)
val childList: Map<String, List<String>> =
mapOf(
"USA" to listOf("New York", "Los Angeles", "Chicago"),
"India" to listOf("Mumbai", "Delhi", "Bangalore"),
"Australia" to listOf("Sydney", "Melbourne", "Brisbane")
)
// Creating and setting an adapter for the ExpandableListView
val groupData: MutableList<Map<String, String>> =
parentList.map { country ->
mapOf("COUNTRY_NAME" to country)
}.toMutableList()
val groupFrom = arrayOf("COUNTRY_NAME")
val groupTo = intArrayOf(android.R.id.text1)
val childData: List<List<Map<String, String>>> =
parentList.map {
country ->childList[country]?.map { city ->
mapOf("CITY_NAME" to city)
} ?: emptyList()
}
val childFrom = arrayOf("CITY_NAME")
val childTo = intArrayOf(android.R.id.text1)
// Short Adapter Programmatically
// Alternative can create Adapter Class
val adapter = SimpleExpandableListAdapter(
this, groupData, android.R.layout.simple_expandable_list_item_1,
groupFrom, groupTo, childData, android.R.layout.simple_list_item_1,
childFrom, childTo
)
// Setting up in RecyclerView
expandableListView.setAdapter(adapter)
}
}
Output:
