Customize the Activity Layout

By default, AbstractBlocklyActivity fills the screen with one large workspace. This workspace is defined by the blockly_unified_workspace.xml, a layout that composes the workspace, toolbox, and trash together.

An empty Blockly Unified Workspace inside the Blockly Simple

This layout is loaded into the activity by onCreateContentView:

protected View onCreateContentView(int containerId) {
    return getLayoutInflater().inflate(R.layout.blockly_unified_workspace, null);

Applications can overload this method to use their own view. Two examples of this can be found in SplitActivity and TurtleActivity:

protected View onCreateContentView(int parentId) {
    View root = getLayoutInflater().inflate(R.layout.split_content, null);
    mGeneratedTextView = (TextView) root.findViewById(;

    return root;

In both of these cases, the revised content layout simply includes blockly_unified_workspace.xml beside the execution environment or code view:

<include layout="@layout/blockly_unified_workspace" />

Include Blockly UIs Directly

While blockly_unified_workspace makes it easy to add some extra UI beside the Blockly workspace, more advanced layouts can be achieved by including the Blockly UIs directly.

The default implementation in AbstractBlocklyActivity defers this setup to BlocklyActivityHelper which looks for the following fragment ids:

  • blockly_workspace: The WorkspaceFragment that defines the primary working area.
  • blockly_categories: An optional CategorySelectorUI which is used in a toolbox to change block categories. The default implementation is a CategorySelectorFragment.
  • blockly_toolbox_ui: The BlockListUI from which the user can drag new blocks to the workspace. While technically optional, this is the most common way to add blocks to the workspace. The default implementation is a FlyoutFragment.
  • blockly_trash_ui: An optional BlockListUI that lists all the recently deleted blocks. The default implementation is a FlyoutFragment.

Activities can override onCreateContentView to build or inflate any layout with these fragments placed anywhere in the app. Examples of using a custom layout containing these fragments can be found in the Activities linked to by FlyoutDemos.

Check the JavcDoc documentation for each of the above fragments for details on the fragment configuration options / XML layout attributes.

See blockly_unified_workspace.xml for an example.

Control Buttons

In addition to the fragments, BlocklyActivityHelper looks for four view ids to use as buttons.

  • blockly_zoom_in_button: Zoom-in (enlarge) the workspace view.
  • blockly_zoom_out_button: Zoom-out (shrink) the workspace view.
  • blockly_center_view_button: Reset the workspace view.
  • blockly_trash_icon: Open or close the trash list, if present and closeable. It also acts as the drop target for deleting blocks.

In blockly_unified_workspace, these buttons are stacked on the right-hand side (or on the left in right-to-left languages) of the workspace.

The workspace buttons in the lower-right corner.