Implementing Tree View in PSLab Android App
When a task expands over sub tasks, it can be easily represented by a stem and leaf diagram. In the context of android it can be implemented using an expandable list view. But in a scenario where the subtasks has mini tasks appended to it, it is hard to implement it using the general two level expandable list views. PSLab android application supports many experiments to perform using the PSLab device. These experiments are divided into major sections and each experiments are listed under them.
The best way to implement this functionality in the android application is using a multi layer treeview implementation. In this context three layers are enough as follows;
This was implemented with the help from a library called AndroidTreeView. This blog will outline how to modify and implement it in PSLab android application.
Basic Idea
Tree view implementation simply follows the data structure “Tree” used in algorithms. Every tree has a root where it starts and from the root there will be branches which are connected using edges. Every edge will have a parent and child. To reach a child, one has to traverse through only one route.
Setting Up Dependencies
Implementing tree view begins with setting up dependencies in the gradle file in the project.
compile 'com.github.bmelnychuk:atv:1.2.+'
Creating UI for tree view
The speciality about this implementation is that it can be loaded into any kind of a layout such as a linearlayout, relativelayout, framelayout etc.
final TreeNode Root = TreeNode.root(); Root.addChildren( // Add child nodes here ); // Set up the tree view AndroidTreeView experimentsListTree = new AndroidTreeView(getActivity(), Root); experimentsListTree.setDefaultAnimation(true); [LinearLayout/RelativeLayout].addView(experimentsListTree.getView());
Creating a node holder
Trees are made of a collection of tree nodes. A holder for a tree node can be created using an object which extends the BaseNodeViewHolder class provided by the library. BaseNodeViewHolder requires a holder class which is generally static so that it can be accessed without creating an instance which nests textviews, imageviews and buttons.
Once the holder extends the BaseNodeViewHolder, it should override two methods as follows;
@Override public View createNodeView(final TreeNode node, ClassContainingNodeData header) { } @Override public void toggle(boolean active) { }
createNodeView() which inflate the view and toggle() method which can be used to toggle clicks on the tree node in the UI.
The following code snippet shows how to create an object which extends the above mentioned class with the overridden methods.
public class ExperimentHeaderHolder extends TreeNode.BaseNodeViewHolder<ExperimentHeaderHolder.ExperimentHeader> { private ImageView arrow; public ExperimentHeaderHolder(Context context) { super(context); } @Override public View createNodeView(final TreeNode node, ExperimentHeader header) { final LayoutInflater inflater = LayoutInflater.from(context); final View view = inflater.inflate(R.layout.header_holder, null, false); TextView title = (TextView) view.findViewById(R.id.title); title.setText(header.title); arrow = (ImageView) view.findViewById(R.id.experiment_arrow); return view; } @Override public void toggle(boolean active) { arrow.setImageResource(active ? arrow_drop_up : arrow_drop_down); } public static class ExperimentHeader { public String title; public ExperimentHeader(String title) { this.title = title; } } }
Creating a TreeNode
Once the holder is complete, we can move on to creating an actual tree node. TreeNode class requires an object which extends the BaseNodeViewHolder class as mentioned earlier. Also it requires a viewholder which it can use to inflate the view in the tree layout. The viewholder can be a different class. The importance of this different implementation can be explained as follows;
TreeNode treeNode = new TreeNode(new ExperimentHeaderHolder.ExperimentHeader(“Title”)) .setViewHolder(new ExperimentHeaderHolder(context));
In the Saved Experiments section of PSLab android application, all the three levels shouldn’t implement the toggle behavior as a user clicks on the experiment (last level item), he doesn’t expect the icon to change like the ones in headers where an arrow points up and down when he clicks on it. In this case we can reuse a holder which has the title attribute while creating only a holder which does not override the toggle function to ignore icon toggling at the last level of the tree view. This explanation can be illustrated using a code snippet as follows;
new TreeNode(new ExperimentHeaderHolder.ExperimentHeader(“Title”)) .setViewHolder(new IndividualExperimentHolder(context));
Creating parent nodes and finally the Root node
The final part of the implementation is to create parent nodes to group up similar experiments together. The TreeNode object supports a method call addChild() and addChildren(). addChild() method allows adding one tree node to the specific tree node and addChildren() method allows adding many tree nodes at the same time. Following code snippet illustrates how to add many tree nodes to a node and make it a parent node.
treeDiodeExperiments.addChildren(treeZener, treeDiode, treeDiodeClamp, treeDiodeClip, treeHalfRectifier, treeFullWave);
Setting a click listener
Click listener is a very important implementation. Each tree node can be attached with a click listener using the interface provided by the library as follows;
treeNode.setClickListener(new TreeNode.TreeNodeClickListener() { @Override public void onClick(TreeNode node, Object value) { } });
The value object is the class attached to the holder and its attributes can be retireved by casting it to the specific class using casting methods;
String title = ((ExperimentHeaderHolder.ExperimentHeader) value).title;
Resources:
- Android TreeView library: https://github.com/bmelnychuk/AndroidTreeView
- Tree Data structure: https://www.tutorialspoint.com/data_structures_algorithms/tree_data_structure.htm
- Android Expandable ListView: http://rajeshandroiddeveloper.blogspot.sg/2013/03/simple-expandable-list-view.html
