Open In App

TreeView in Android with Example

Improve
Improve
Like Article
Like
Save
Share
Report

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.

TreeView in Android

Step By Step Implementation

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: Adding Dependency to the build.gradle File

 Go to Module build.gradle file and add this dependency and click on Sync Now button.

implementation 'de.blox.treeview:treeview:0.1.0'

Step 3: 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.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!-- Below is the code for tree view -->
    <de.blox.treeview.TreeView
        android:id="@+id/idTreeView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>


Create a new XML file

After adding this TreeView create a new XML file for your node which we have to display inside our TreeView. For creating a new XML file navigate to the app > res > layout > Right-click > New > Layout Resource file. Give a name to your file (Here we have given tree_view_node) and click on create. After creating this file add the below code to it. Below is the code for the tree_view_node.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
  
    <TextView
        android:id="@+id/idTvnode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@color/purple_500"
        android:padding="8dp"
        android:text="@string/my_node"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold" />
</RelativeLayout>


Step 4: Working with the Java/Kotlin Files

Now create a new class as View Holder for handling our nodes in Tree View. Here we have named the class as ViewHolder. Below is the code for the ViewHolder File. 

Java




import android.view.View;
import android.widget.TextView;
  
public class ViewHolder {
  
    TextView textView;
  
    ViewHolder(View view) {
        textView = view.findViewById(R.id.idTvnode);
    }
}


Kotlin




import android.view.View
import android.widget.TextView
  
class ViewHolder internal constructor(view: View) {
    var textView: TextView
  
    init {
        textView = view.findViewById(R.id.idTvnode)
    }
}


After creating the Viewholder class then we will move towards the implementation of TreeView in our MainActivity File. 

In 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.

Java




import android.os.Bundle;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import de.blox.treeview.BaseTreeAdapter;
import de.blox.treeview.TreeNode;
import de.blox.treeview.TreeView;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // creating a variable for tree view.
        TreeView treeView = findViewById(R.id.idTreeView);
  
        // creating adapter class for our treeview using basetree adapter. Inside base tree adapter 
        // you have to pass viewholder class along with context and your layout file for treeview node.
        BaseTreeAdapter<Viewholder> adapter = new BaseTreeAdapter<Viewholder>(this, R.layout.tree_view_node) {
            @NonNull
            @Override
            public Viewholder onCreateViewHolder(View view) {
                return new Viewholder(view);
            }
  
            @Override
            public void onBindViewHolder(Viewholder viewHolder, Object data, int position) {
                // inside our on bind view holder method we are setting data from object to text view.
                viewHolder.textView.setText(data.toString());
  
            }
        };
  
        // below line is setting adapter for our tree.
        treeView.setAdapter(adapter);
  
        // below tree node is a parent node of our tree node 
        // which is Geeks for Geeks.
        TreeNode root = new TreeNode("Geeks for Geeks");
  
        // below node is the first child node of our 
        // root node ie Geeks for Geeks.
        TreeNode DSAchildNode = new TreeNode("DSA");
  
        // below node is the second child of our 
        // root node ie Geeks for Geeks.
        TreeNode AlgoChildNode = new TreeNode("Algorithm");
  
        // below node is the third child of our 
        // root node ie Geeks for Geeks.
        TreeNode languageNode = new TreeNode("Language");
  
        // below node is the first child of our language node.
        TreeNode CchildNode = new TreeNode("C++");
  
        // below node is the second child of our language node.
        TreeNode javaChildNode = new TreeNode("Java");
  
        // below node is the first child of our DSA node.
        TreeNode arrayChild = new TreeNode("Arrays");
  
        // below node is the second child of our DSA node.
        TreeNode stringChild = new TreeNode("Strings");
  
        // below node is the first child of our Algorithm node.
        TreeNode sortingChildNode = new TreeNode("Sorting");
  
        // below lines is used for adding child nodes to our root nodes.
        root.addChild(DSAchildNode);
        root.addChild(languageNode);
        root.addChild(AlgoChildNode);
  
        // below lines is used to add languages to our 
        // Language node. we are adding c++, java 
        // to our language node.
        languageNode.addChild(CchildNode);
        languageNode.addChild(javaChildNode);
  
        // below line is used to add arrays, strings
        // to our dsa node. we are adding Arrays,
        // Strings to our DSA node.
        DSAchildNode.addChild(arrayChild);
        DSAchildNode.addChild(stringChild);
  
        // below line is used for adding sorting
        // algo to our Algorithm node.
        AlgoChildNode.addChild(sortingChildNode);
  
        // below line is for setting our root node. 
        // Inside our root node we are passing 
        // "root" as our root node.
        adapter.setRootNode(root);
    }
}


Kotlin




import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import de.blox.treeview.BaseTreeAdapter
import de.blox.treeview.TreeNode
import de.blox.treeview.TreeView
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // creating a variable for tree view.
        val treeView = findViewById<TreeView>(R.id.idTreeView)
  
        // creating adapter class for our treeview 
        // using basetree adapter. Inside base tree adapter 
        // you have to pass viewholder class along with 
        // context and your layout file for treeview node.
        val adapter: BaseTreeAdapter<Viewholder> = object : BaseTreeAdapter<Viewholder?>(this, R.layout.tree_view_node) {
                fun onCreateViewHolder(view: View?): Viewholder {
                    return Viewholder(view)
                }
  
                fun onBindViewHolder(viewHolder: Viewholder, data: Any, position: Int) {
                    // inside our on bind view holder method we 
                    // are setting data from object to text view.
                    viewHolder.textView.setText(data.toString())
                }
            }
  
        // below line is setting adapter for our tree.
        treeView.setAdapter(adapter)
  
        // below tree node is a parent node of our 
        // tree node which is Geeks for Geeks.
        val root = TreeNode("Geeks for Geeks")
  
        // below node is the first child node of
        // our root node ie Geeks for Geeks.
        val DSAchildNode = TreeNode("DSA")
  
        // below node is the second child of our
        // root node ie Geeks for Geeks.
        val AlgoChildNode = TreeNode("Algorithm")
  
        // below node is the third child of our 
        // root node ie Geeks for Geeks.
        val languageNode = TreeNode("Language")
  
        // below node is the first child 
        // of our language node.
        val CchildNode = TreeNode("C++")
  
        // below node is the second
        // child of our language node.
        val javaChildNode = TreeNode("Java")
  
        // below node is the first child of our DSA node.
        val arrayChild = TreeNode("Arrays")
  
        // below node is the second child of our DSA node.
        val stringChild = TreeNode("Strings")
  
        // below node is the first child of our Algorithm node.
        val sortingChildNode = TreeNode("Sorting")
  
        // below lines is used for adding 
        // child nodes to our root nodes.
        root.addChild(DSAchildNode)
        root.addChild(languageNode)
        root.addChild(AlgoChildNode)
  
        // below lines is used to add languages 
        // to our Language node. we are adding
        // c++, java to our language node.
        languageNode.addChild(CchildNode)
        languageNode.addChild(javaChildNode)
  
        // below line is used to add arrays, 
        // strings to our dsa node. we are adding
        // Arrays,Strings to our DSA node.
        DSAchildNode.addChild(arrayChild)
        DSAchildNode.addChild(stringChild)
  
        // below line is used for adding sorting
        // algo to our Algorithm node.
        AlgoChildNode.addChild(sortingChildNode)
  
        // below line is for setting our root node.
        // Inside our root node we are passing
        // "root" as our root node.
        adapter.setRootNode(root)
    }
}


Output:

TreeView Output



Last Updated : 22 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads