In this tutorial we will explain an easy way to create and customize a mind mapping, hierarchy or tree view in android studio using Mindo android library, which brings an easy approach to implement this with its full functionality.

Adding the dependency

As mentioned in the github repo, we will add the dependency in two steps:

Step 1. Add it in your root build.gradle at the end of repositories:

1
2
3
4
5
6
	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Step 2. Add the dependency

1
2
3
	dependencies {
	        implementation 'com.github.JagarYousef:Mindo:2.0.0'
	}

XML

In our xml layout, we will only add the MindMappingView:

1
2
3
4
5
<me.jagar.mindmappingandroidlibrary.Views.MindMappingView
    android:id="@+id/mind_mapping_view"
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Be aware, you need to add background color to display the connections.

Java

In our activity we will init the mindMappingView:

1
2
3
4
5
6
7
8
9
private MindMappingView mindMappingView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mindMappingView = findViewById(R.id.mind_mapping_view);

}

Adding the root

Now we are ready to go and add our items, so will start with our root or the central item which will be at the center of the view and then we can add child items to it:

1
2
3
4
5
//Creating the root item
Item root = new Item(MainActivity.this , "The title of the root", "The content of the root", true);

//Adding the root item to the mindMappingView
mindMappingView.addCentralItem(root, false);

I have used true for the default style of the root item, I can customize it later or I can set it to false so I only get a LinearLayout with two vertically sorted TextViews (Title and Content). For sure you can customize those TextViews as well.

Adding the childs

We will create 4 items then adding them as child of the root in the four different sides of the root:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
//Creating childs
Item child1 = new Item(MainActivity.this, "Child1 Title", "Child1 Content", true);
Item child2 = new Item(MainActivity.this, "Child2 Title", "Child2 Content", true);
Item child3 = new Item(MainActivity.this, "Child3 Title", "Child3 Content", true);
Item child4 = new Item(MainActivity.this, "Child4 Title", "Child4 Content", true);

//Adding childs to the different sides of the root
mindMappingView.addItem(child1, root, 200, 15, ItemLocation.TOP, true, null);
mindMappingView.addItem(child2, root, 200, 15, ItemLocation.RIGHT, true, null);
mindMappingView.addItem(child3, root, 200, 15, ItemLocation.BOTTOM, true, null);
mindMappingView.addItem(child4, root, 200, 15, ItemLocation.LEFT, true, null);

Adding Connection Text Messages

We can add textviews on the connection between the root and the different items. For this we will create the ConnectionTextMessage and init it when adding the child to its parent (as shown in the above step):

1
2
3
4
5
6
7
8
ConnectionTextMessage connectionTextMessage = new ConnectionTextMessage(MainActivity.this);
connectionTextMessage.setText("This is a text\n on the connection");

//some customization
connectionTextMessage.setBackgroundColor(Color.GRAY);
connectionTextMessage.setTextColor(Color.WHITE);

mindMappingView.addItem(child4, root, 400, 15, ItemLocation.LEFT, true, connectionTextMessage);

Adding Sub-Childs

We can add childs to the child of the parent and we can set child for these themselves, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Item subchild1 = new Item(MainActivity.this, "Subchild1 Title", "Subchild1 Content", true);
Item subchild2 = new Item(MainActivity.this, "Subchild2 Title", "Subchild2 Content", true);
Item subchild3 = new Item(MainActivity.this, "Subchild3 Title", "Subchild3 Content", true);

//Some customization
subchild1.getTitle().setTextColor(Color.WHITE);
subchild2.getTitle().setTextColor(Color.WHITE);
subchild3.getTitle().setTextColor(Color.WHITE);
subchild1.getContent().setTextColor(Color.WHITE);
subchild2.getContent().setTextColor(Color.WHITE);
subchild3.getContent().setTextColor(Color.WHITE);

mindMappingView.addItem(subchild1, child2, 200, 15, ItemLocation.RIGHT, true, null);
mindMappingView.addItem(subchild2, child2, 200, 15, ItemLocation.RIGHT, true, null);
mindMappingView.addItem(subchild3, child2, 200, 15, ItemLocation.RIGHT, true, null);

Adding Custom Connections

We can add a CustomConnection between any two items in the mindMappingView

1
2
3
4
5
6
7
8
//I will add a new subchild on the top of its parent (child2)

Item subchildToConnect = new Item(MainActivity.this, "SubChildToConnect Title", "SubchildToConnect Content", true);
mindMappingView.addItem(subchildToConnect, child2, 200, 15, ItemLocation.TOP, true, null);

//Now I will connect between the right of this new subchild and the right of child1

mindMappingView.addCustomConnection(subchildToConnect, ItemLocation.LEFT, child1, ItemLocation.RIGHT, null, 8, "#D81B60", 15, 20);

Handling events

All views are extended from other android default views so we can use the default listener, except the drag able items, we will need to use the library OnItemClickedListener as following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
mindMappingView.setOnItemClicked(new OnItemClicked() {
    @Override
    public void OnClick(Item item) {
        if (item == root){
            Toast.makeText(MainActivity.this, "You have clicked the root", Toast.LENGTH_LONG)
                    .show();
        }else if (item == child1){
            Toast.makeText(MainActivity.this, "You have clicked the Child1", Toast.LENGTH_LONG)
                    .show();
        }
    }
});

Customization

As mentioned, the views are extended from default android views so we can customize them as we do for the default one. I will give an example of customizing the subChildToConnect:

  • We create sub_bg.xml:
1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="0dp" />
    <gradient android:startColor="@color/colorPrimary" android:endColor="@color/colorPrimaryDark" />
    <stroke android:color="#FFEB3B" android:dashWidth="10dp" android:width="3dp" />
</shape>
  • Now we do the customization before adding the child and then creating its custom connection:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
//I will add a new subchild on the top of its parent (child2)
Item subchildToConnect = new Item(MainActivity.this, "SubChildToConnect Title", "SubchildToConnect Content", true);

//We customize
subchildToConnect.setBackgroundResource(R.drawable.sub_bg);
subchildToConnect.getTitle().setTextColor(Color.WHITE);
subchildToConnect.getContent().setTextColor(Color.CYAN);
mindMappingView.addItem(subchildToConnect, child2, 400, 15, ItemLocation.TOP, true, null);

//Now I will connect between the right of this new subchild and the right of child1
mindMappingView.addCustomConnection(subchildToConnect, ItemLocation.LEFT, child1, ItemLocation.RIGHT, null, 8, "#D81B60", 15, 20);