This walkthrough shows how to build user interface following the Android UI pattern in just a few steps.
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 this tutorial on how to do that.
Part I: Action Bar
To use the actionbar widget, follow these steps:
1. Define the xml layout for the action bar
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 |
// 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 dashboard widget, follow these steps:
1. Define the xml layout for the dashboard
|
1 2 3 4 5 6 7 8 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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
|
1 2 3 4 5 6 7 8 |
// 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
|
1 |
qact.show(anchor); |