Android basics – Applying some UI patterns

by Roberto van der Linden, May 6, 2011
When I started with my Android application, I had the idea to create a home screen and an action bar just like one of the Android developers described in a blog item. I was really helped by the source code of the Google I/O Schedule app. In this post I will explain how I used several layouts to create my app.
Action bar

The action bar is a bar on the top of the screen that provides your users with quick access to common actions. In the screenshot I placed an icon in the right corner that lets the user quickly return to the home screen.
The XML layout:
    <LinearLayout style="@style/TitleBar">
        <ImageView style="@style/TitleBarAction"
                   android:src="@drawable/title_bar_logo"/>
        <ImageView style="@style/TitleBarSeparator"/>

        <TextView style="@style/TitleBarText"
                  android:text="JTeam"/>

        <ImageView style="@style/TitleBarSeparator"/>

        <ImageButton style="@style/TitleBarAction"
                     android:src="@drawable/ic_title_home_default"
                     android:onClick="onHomeClick"/>
    </LinearLayout>

The XML file for the style (styles.xml):
    <style name="TitleBar">
        <item name="android:id">@+id/title_container</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">45dip</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">#4b08a3</item>
    </style>

    <style name="TitleBarAction">
        <item name="android:layout_width">45dip</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:background">@drawable/title_button</item>
    </style>

    <style name="TitleBarSeparator">
        <item name="android:layout_width">1px</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:background">#40ffffff</item>
    </style>

    <style name="TitleBarText">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:textSize">18sp</item>
        <item name="android:paddingLeft">12dip</item>
        <item name="android:paddingRight">12dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#ffffffff</item>
        <item name="android:singleLine">true</item>
        <item name="android:ellipsize">end</item>
    </style>

In your activity you need to implement the onClick of the home button.
     public void onHomeClick(View v) {
        startActivity(new Intent(this, HomeActivity.class));
    }

Dashboard
The dashboard is often your home orientation activity and contains the main features of your application. To create a dashboard you need to create a layout file and program the behaviour of the buttons when they are clicked.
On the left you can see the dashboard that I created. I have copied the icons just to give you an impression of how a “full” dashboard could look like.

The XML layout (main.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/home_root"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="#ffffffff">

    <!-- Actionbar -->
    <LinearLayout style="@style/TitleBar">
        ...
    </LinearLayout>

    <!-- Buttons -->
    <LinearLayout android:orientation="vertical"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:padding="6dip">
        <LinearLayout android:orientation="horizontal"
                      android:layout_width="fill_parent"
                      android:layout_height="wrap_content"
                      android:layout_weight="1">
            <Button android:id="@+id/home_btn_users"
                    style="@style/HomeButton"
                    android:onClick="onEmployeesClick"
                    android:text="Employees"
                    android:drawableTop="@drawable/btn_employees"/>
            <Button android:id="@+id/home_btn_player_availability"
                    style="@style/HomeButton"
                    android:onClick="onCalendarClick"
                    android:text="Calendar"
                    android:drawableTop="@drawable/btn_calendar"/>
        </LinearLayout>

        ...

    </LinearLayout>
</LinearLayout>

The activity (HomeActivity.java):
public class HomeActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    public void onEmployeesClick(View v) {
        startActivity(new Intent(this, EmployeesActivity.class));
    }
}

ProcessDialog
The ProcessDialog allows you to load data in the background while you show your users a loading screen. The ProcessDialog can be realised with an AsyncTask.
I created a subclass of the AsyncTask that overrides three methods.

doInBackground(…) – In this method you can make the call to get your data.
onPreExecute() – In this method you can show your dialog.
onPostExecute() – This method will be executed when all data is retrieved. Here you can dismiss your dialog and add the data to your adapter.

The XML layout (activity_employees.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <!-- Actionbar -->
    <LinearLayout style="@style/TitleBar">
        ...
    </LinearLayout>

    <ListView android:id="@android:id/list"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"/>
</LinearLayout>

The activity (EmployeesActivity.java):
public class EmployeesActivity extends ListActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_employees);

        new EmployeesTask().execute();
    }

    public void onHomeClick(View v) {
        startActivity(new Intent(this, HomeActivity.class));
    }

    //================================================= EmployeesTask ==================================================

    private class EmployeesTask extends AsyncTask<Void, Void, String[]> {

        private ProgressDialog progressDialog;

        @Override
        protected String[] doInBackground(Void... voids) {
            return new String[]{"Roberto van der Linden", "Employee 2", "Employee 3"};
        }

        @Override
        protected void onPreExecute() {
            progressDialog = ProgressDialog.show(EmployeesActivity.this, "", "Loading...");
        }

        @Override
        protected void onPostExecute(String[] employees) {
            progressDialog.dismiss();
            setListAdapter(new ArrayAdapter<String>(EmployeesActivity.this, android.R.layout.simple_list_item_1, employees));
        }
    }
}

So I hope this blog helped a few of people in their journey to create a great Android app. If you want to know more about creating an app with asynchronous retrieval of data, you can read my previous blog post.