Note: In order to follow this walkthrough in your own development environment, you have to setup your development environment to use the DroidUX. If you haven't done so, please see this tutorial.

Initialize the DroidUX library in your Application

To use the DroidUX library in your application, you need to initialize it first. See Using DroidUX Library In Your Project for more information.

Part I: Action Bar

To use the action bar widget, follow these steps:

1. Define the xml layout for the action bar

<com.droidux.widget.appbar.EnhancedColorAppBar
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res/com.droidux.tutorial"
  style="?attr/dux_appbarStyle"
  android:id="@+id/actionBar"
  android:background="@drawable/actionbar_bg"
  app:dux_color="#00E5FF"
  app:dux_separator="@drawable/actionbar_separator"
  app:dux_separatorWidth="auto"
  app:dux_drawableEffect_type="colorize"
  app:dux_drawableEffect_colors="@color/action_effect_colors"
   />

For more information on the custom attributes used in this example, please see the reference (you can see it online here).

2. Initialize the action bar layout

        // start the layout of the action bar
        actionBar.beginLayout()
            // add a title
            .setTitleAction(new ActionItem().setIcon(R.drawable.logo_appbar_full))
            // add progress bar to the right of the title, overlaid with "refresh" action
            .setProgressAction(new ActionItem("Refresh").setIcon(R.drawable.ic_actbar_refresh).setOnActionListener(listener))
            // add actions to the right of the progress bar
            .addAction(new ActionItem("Bookmarks").setIcon(R.drawable.ic_actbar_books).setOnActionListener(listener))
            .addAction(new ActionItem("Search").setIcon(R.drawable.ic_actbar_search).setOnActionListener(listener))
        // end the layout
        .endLayout();

Part 2: Dashboard

To use the , follow these steps:

1. Define the xml layout for the dashboard

    <com.droidux.widget.dashboard.MultiPageDashboard
      style="?attr/dux_dashboardMultiPageStyle"
      android:id="@+id/dashboard"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      app:dux_drawableEffect_type="colorize"
      app:dux_drawableEffect_colors="@color/action_effect_colors"
      />

2. Initialize the dashboard layout

        // start the dashboard layout
        dashboard.beginLayout()
            // add actions
            .addAction(new ActionItem("Delicious").setIcon(R.drawable.ic_dashboard_delicious).setOnActionListener(listener))
            .addAction(new ActionItem("Digg").setIcon(R.drawable.ic_dashboard_digg).setOnActionListener(listener))
            .addAction(new ActionItem("Facebook").setIcon(R.drawable.ic_dashboard_facebook).setOnActionListener(listener))
            .addAction(new ActionItem("Flickr").setIcon(R.drawable.ic_dashboard_flickr).setOnActionListener(listener))
            .addAction(new ActionItem("GMail").setIcon(R.drawable.ic_dashboard_gmail).setOnActionListener(listener))
            .addAction(new ActionItem("last.fm").setIcon(R.drawable.ic_dashboard_lastfm).setOnActionListener(listener))
            .addAction(new ActionItem("LinkedIn").setIcon(R.drawable.ic_dashboard_linkedin).setOnActionListener(listener))
            .addAction(new ActionItem("Picasa").setIcon(R.drawable.ic_dashboard_picasa).setOnActionListener(listener))
            .addAction(new ActionItem("Twitter").setIcon(R.drawable.ic_dashboard_twitter).setOnActionListener(listener))
        // end the layout
        .endLayout();

Part 3: Quick Actions

To use the quick-action widget, follow these steps:

1. Define the layout of the quick action

        // start the action layout
        qact.beginLayout()
            // add actions
            .addAction(new ActionItem("Bookmark 1").setIcon(R.drawable.ic_mact_bookmark1).setOnActionListener(listener))
            .addAction(new ActionItem("Bookmark 2").setIcon(R.drawable.ic_mact_bookmark2).setOnActionListener(listener))
            .addAction(new ActionItem("Bookmark 3").setIcon(R.drawable.ic_mact_bookmark3).setOnActionListener(listener))
        // end layout
        .endLayout();

2. Show the quick-action widget

        qact.show(anchor);