Android Studio

This tutorial assumes you have installed Android Studio 4 or higher version, and have unarchived the DroidDiagram distribution archive.

Create Android project

Let's create an Android application project and add the diagram library to it:

1. Select the File -> New -> New Project command in Android Studio.
2. Select "Empty Activity" on the "Project Template" screen, click Next.
3. Enter "DiagramApp" in the project's configuration Name field and click Finish.
4. Select "Project" from the Project drop-down.
5. Expand DiagramApp -> app -> libs.
6. Ctrl+Drag DroidDiagram.aar from your file manager to the libs folder in Android Studio, click OK.
7. Open project's build.gradle and add flatDir{dirs 'libs'} to allprojects -> repositories configuration.
8. Open app's build.gradle and add implementation(name:'DroidDiagram', ext:'aar') to dependencies.
9. Now you can use classes from the com.mindfusion.diagramming package in this project.
10. Expand DiagramApp app -> src -> main -> res -> layout.
11. Open activity_main.xml and switch to the Code view.
12. Add a DiagramView element to the layout:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.mindfusion.diagramming.DiagramView
        android:id="@+id/diag_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</androidx.constraintlayout.widget.ConstraintLayout>

If you run the application now, you will be able to draw diagram nodes on the touch screen if the finger touches an empty area of the view, or draw links between the nodes when the finger initially touches a node. You can scroll the view by dragging it with two fingers.

Using the diagramming API

In this section we'll show how to handle diagram events, defined in the DiagramListener interface, and how to change properties of diagram elements. Lets add an event listener to the diagram via anonymous class derived from DiagramAdapter, which provides empty implementations for all events from DiagramListener:

Java

import com.mindfusion.diagramming.Diagram;
import com.mindfusion.diagramming.DiagramAdapter;
import com.mindfusion.diagramming.DiagramView;
...

DiagramView diagView;

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_diagram);

    diagView = (DiagramView)findViewById(R.id.diag_view);

    Diagram diagram = diagView.getDiagram();
    diagram.addDiagramListener(new DiagramAdapter()
    {
    });
}

Add an image to the project's assets folder. From the nodeCreated event handler we'll show that image when the user draws a new node, and will also set the node's text label:

Java

diagram.addDiagramListener(new DiagramAdapter()
{
    Bitmap image1;    @Override
    public void nodeCreated(NodeEvent e)
    {
        if (image1 == null)
        {
            try
            {
                image1 = BitmapFactory.decodeStream(
                    getAssets().open("image1.png"));
            }
            catch (IOException ex)
            {
                ex.printStackTrace();
            }
        }

        if (e.getNode() instanceof ShapeNode)
        {
            ShapeNode shape = (ShapeNode)e.getNode();
            shape.setImage(image1);
            shape.setText("Hello, Android!");
            shape.setTextFormat(
                new TextFormat(Align.Center, Align.Far));
        }
    }
});

If you run the application now and draw several nodes and links, you should see something similar to this image:

Here are some additional features of the component you could experiment with:

• Call the setBehavior method to specify how DroidDiagram should interpret user input, for example, what kind of nodes it creates.
• Call methods of the Factory class, whose instance is returned by the getFactory method of Diagram, to create diagram elements programmatically.
• Apply layout algorithms, such as LayeredLayout, TreeLayout, SpringLayout and OrthogonalLayout.

Browse the next sections of this help file to get conceptual overview of the library's programming interface.

Save and restore the diagram view

Obsolete
As of version 1.5.1, this point is obsolete and state is now saved automatically. You could still use following approach if you prefer rebuilding the diagram from already loaded model data. In that case, set android:saveEnabled="false" for the DiagramView in order to disable built-in state management.

If you change the tablet orientation (and screen rotation is not locked), you will notice that all content of the Diagram is lost. This happens because Android recreates the current Activity when the screen is rotated. Since in most cases a diagram will represent your own data, the DiagramView control does not save and restore the diagram content automatically, but assumes you will rebuild it from the restored data. However, in this example we will show how to save and restore the diagram using built-in serialization methods. First, add a DiagramView field to the Activity, and initialize it from onCreate:

Java

DiagramView diagView;

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_diagram);
    diagView = (DiagramView)findViewById(R.id.diag_view);
}

Override the onSaveInstanceState method to save the current diagram in the state Bundle. Call the saveToString method of DiagramView to save both the diagram content and the view state, such as scroll position and zoom level:

Java

@Override
protected void onSaveInstanceState(Bundle outState)
{
    outState.putString("diagram", diagView.saveToString());
    super.onSaveInstanceState(outState);  
}

Override onRestoreInstanceState to load the previously saved diagram:

Java

@Override
protected void onRestoreInstanceState(Bundle savedInstanceState)
{
    super.onRestoreInstanceState(savedInstanceState);
    if (savedInstanceState.containsKey("diagram"))
    {
        diagView.loadFromString(
            savedInstanceState.getString("diagram"));
    }
}

If you run the application now, rotating the tablet should no longer erase the diagram content.