{"id":3382,"date":"2011-05-06T09:07:34","date_gmt":"2011-05-06T07:07:34","guid":{"rendered":"http:\/\/blog.jteam.nl\/?p=3382"},"modified":"2011-05-06T09:07:34","modified_gmt":"2011-05-06T07:07:34","slug":"android-basics-applying-some-ui-patterns","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/android-basics-applying-some-ui-patterns\/","title":{"rendered":"Android basics – Applying some UI patterns"},"content":{"rendered":"

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<\/a> item. I was really helped by the source code of the Google I\/O Schedule app<\/a>. In this post I will explain how I used several layouts to create my app.<\/p>\n

<\/p>\n

Action bar<\/h3>\n

\"actionbar\"<\/a>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.<\/p>\n

The XML layout: <\/p>\n

\n
\n    <LinearLayout style="@style\/TitleBar">\n        <ImageView style="@style\/TitleBarAction"\n                   android:src="@drawable\/title_bar_logo"\/>\n        <ImageView style="@style\/TitleBarSeparator"\/>\n\n        <TextView style="@style\/TitleBarText"\n                  android:text="JTeam"\/>\n\n        <ImageView style="@style\/TitleBarSeparator"\/>\n\n        <ImageButton style="@style\/TitleBarAction"\n                     android:src="@drawable\/ic_title_home_default"\n                     android:onClick="onHomeClick"\/>\n    <\/LinearLayout>\n<\/pre>\n
The XML file for the style (styles.xml<\/span>):<\/p>\n
\n    <style name="TitleBar">\n        <item name="android:id">@+id\/title_container<\/item>\n        <item name="android:layout_width">fill_parent<\/item>\n        <item name="android:layout_height">45dip<\/item>\n        <item name="android:orientation">horizontal<\/item>\n        <item name="android:background">#4b08a3<\/item>\n    <\/style>\n\n    <style name="TitleBarAction">\n        <item name="android:layout_width">45dip<\/item>\n        <item name="android:layout_height">fill_parent<\/item>\n        <item name="android:background">@drawable\/title_button<\/item>\n    <\/style>\n\n    <style name="TitleBarSeparator">\n        <item name="android:layout_width">1px<\/item>\n        <item name="android:layout_height">fill_parent<\/item>\n        <item name="android:background">#40ffffff<\/item>\n    <\/style>\n\n    <style name="TitleBarText">\n        <item name="android:layout_width">0dp<\/item>\n        <item name="android:layout_height">fill_parent<\/item>\n        <item name="android:layout_weight">1<\/item>\n        <item name="android:gravity">center_vertical<\/item>\n        <item name="android:textSize">18sp<\/item>\n        <item name="android:paddingLeft">12dip<\/item>\n        <item name="android:paddingRight">12dip<\/item>\n        <item name="android:textStyle">bold<\/item>\n        <item name="android:textColor">#ffffffff<\/item>\n        <item name="android:singleLine">true<\/item>\n        <item name="android:ellipsize">end<\/item>\n    <\/style>\n<\/pre>\n
In your activity you need to implement the onClick<\/span> of the home button.<\/p>\n
\n
\n     public void onHomeClick(View v) {\n        startActivity(new Intent(this, HomeActivity.class));\n    }\n<\/pre>\n
Dashboard<\/h3>\n
\"dashboard\"<\/a>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.<\/p>\n
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 \u201cfull\u201d dashboard could look like.<\/p>\n
<\/h3>\n
The XML layout (main.xml<\/span>):<\/p>\n
\n
\n<?xml version="1.0" encoding="utf-8"?>\n<LinearLayout xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\n              android:id="@+id\/home_root"\n              android:orientation="vertical"\n              android:layout_width="fill_parent"\n              android:layout_height="fill_parent"\n              android:background="#ffffffff">\n\n    <!-- Actionbar -->\n    <LinearLayout style="@style\/TitleBar">\n        ...\n    <\/LinearLayout>\n\n    <!-- Buttons -->\n    <LinearLayout android:orientation="vertical"\n                  android:layout_width="fill_parent"\n                  android:layout_height="wrap_content"\n                  android:layout_weight="1"\n                  android:padding="6dip">\n        <LinearLayout android:orientation="horizontal"\n                      android:layout_width="fill_parent"\n                      android:layout_height="wrap_content"\n                      android:layout_weight="1">\n            <Button android:id="@+id\/home_btn_users"\n                    style="@style\/HomeButton"\n                    android:onClick="onEmployeesClick"\n                    android:text="Employees"\n                    android:drawableTop="@drawable\/btn_employees"\/>\n            <Button android:id="@+id\/home_btn_player_availability"\n                    style="@style\/HomeButton"\n                    android:onClick="onCalendarClick"\n                    android:text="Calendar"\n                    android:drawableTop="@drawable\/btn_calendar"\/>\n        <\/LinearLayout>\n\n        ...\n\n    <\/LinearLayout>\n<\/LinearLayout>\n<\/pre>\n
The activity (HomeActivity.java<\/span>):<\/p>\n
\n
\npublic class HomeActivity extends Activity {\n    @Override\n    public void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.main);\n    }\n\n    public void onEmployeesClick(View v) {\n        startActivity(new Intent(this, EmployeesActivity.class));\n    }\n}\n<\/pre>\n
ProcessDialog<\/h3>\n
\"processdialog\"<\/a>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<\/a>.<\/p>\n
I created a subclass of the AsyncTask that overrides three methods.<\/p>\n