Android basics - Applying some UI patterns

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.