Eclipse

This tutorial assumes you have installed the Android SDK and Eclipse, 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 -> Project command in Eclipse.
2. Select the Android Application Project wizard.
3. Enter DiagramApp in the Application Name field.
4. Keep the default settings on Configure Project screen.
5. Keep the default settings on Configure Launcher Icon screen.
6. Check Create Activity and select Blank Activity on the Create Activity screen.
7. Enter DiagramActivity as Activity name on the last screen and click Finish.
8. Expand DiagramApp -> libs in Package Explorer.
9. Drag DroidDiagram.jar from your file manager to the libs folder in Eclipse. Now you can use classes from the com.mindfusion.diagramming namespace in this project.
10. Expand DiagramApp -> res -> layout in Package Explorer.
11. Open activity_diagram.xml and switch to XML view.
12. Add a DiagramView element to the layout:

XML

<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=".DiagramActivity" >

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

</RelativeLayout>

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.

Save and restore the diagram view

As of version 1.5.1, this point is obsolete and state is now saved automatically. You could still use similar 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.

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

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