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…
