Android Dialog Theme and Window Decorations

Posted on July 11, 2009, 2:01 pm, by Keith, under Development.

While working on my first Android project, I ran into an interesting problem; how to add an icon to the window title of my application’s about dialog. My search for a solution only led to others asking this same question without any answers. Here is my solution to the problem in the hope that it may save you some time engineering your own.

Creating the activity for the about dialog was quite simple. The activity displays copyright notices, license information and the version of the application package.

Base Activity Components

Application manifest file (AndroidManifest.xml): 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.zunisoft.critters"
    android:versionCode="1"
    android:versionName="1.0.0">
    <application
    	android:icon="@drawable/icon"
    	android:label="@string/app_name">
        <activity
        	android:name=".Critters"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
        	android:name=".activities.about.About"
        	android:label="@string/about_title">
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="3" />
</manifest>

Activity source (About.java): 

package com.zunisoft.critters.activities.about;
 
import static com.zunisoft.critters.Constants.APP_TAG;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.TextView;
 
import com.zunisoft.critters.R;
import com.zunisoft.critters.utility.Android;
 
/**
 * Application about box activity. This class displays information about the
 * application to the user.
 * 
 * @author krdavis
 */
public class About extends Activity {
	// Activity tag used by logging APIs
	private static final String ACT_TAG = "About";
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		Log.d(APP_TAG, ACT_TAG + " -> onCreate()");
 
		// Initialize the layout
		super.onCreate(savedInstanceState);
 
		setContentView(R.layout.about);
 
		// Set the application version
		TextView text = (TextView) this.findViewById(R.id.app_version);
		text.setText(Android.getPackageVersion(this));
 
	}
}

Layout source (about.xml): 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:background="@color/about_background"
   	android:layout_width="fill_parent"
   	android:layout_height="fill_parent"
   	android:padding="15dip">
   	<LinearLayout
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:orientation="horizontal"
	    android:isScrollContainer="true"
	    android:scrollbars="vertical">
	    <LinearLayout
	    	android:layout_width="wrap_content"
	    	android:layout_height="fill_parent"
	    	android:orientation="vertical">
			<ImageView
	   			android:src="@drawable/icon"
	        	android:layout_width="wrap_content"
	        	android:layout_height="wrap_content"
	        	android:layout_gravity="top"
	        	android:layout_marginRight="10dp" />
	       <LinearLayout
	    	android:layout_width="wrap_content"
	    	android:layout_height="fill_parent"
	    	android:orientation="vertical"/>
	    </LinearLayout>
	    <LinearLayout
	    	android:layout_width="fill_parent"
	    	android:layout_height="fill_parent"
	    	android:orientation="vertical">
	    	<TextView
	      		android:text="@string/app_name"
	      		android:textStyle="bold"
	      		android:textColor="@color/about_text"
	      		android:layout_width="wrap_content"
	      		android:layout_height="wrap_content" />
	      	<TextView
	      		android:id="@+id/app_version"
	      		android:textColor="@color/about_text"
	      		android:textSize="11.5sp"
	      		android:layout_width="wrap_content"
	      		android:layout_height="wrap_content" />
	   		<TextView
	      		android:text="@string/about_text"
	      		android:textColor="@color/about_text"
	      		android:textSize="12.5sp"
	      		android:layout_width="wrap_content"
	      		android:layout_height="wrap_content"
	      		android:layout_marginTop="8dp" />
	      	<TextView
	      		android:text="@string/about_code_copyright"
	      		android:textColor="@color/about_text"
	      		android:textSize="11.0sp"
	      		android:layout_width="wrap_content"
	      		android:layout_height="wrap_content"
	      		android:layout_marginTop="8dp" />
	      	<TextView
	      		android:text="@string/about_art_copyright"
	      		android:textColor="@color/about_text"
	      		android:textSize="11.0sp"
	      		android:layout_width="wrap_content"
	      		android:layout_height="wrap_content"
	      		android:layout_marginTop="3dp" />
	      	<TextView
	      		android:text="@string/about_license"
	      		android:textColor="@color/about_text"
	      		android:textSize="11.0sp"
	      		android:layout_width="wrap_content"
	      		android:layout_height="wrap_content"
	      		android:layout_marginTop="8dp" />
	      	<TextView
	      		android:text="@string/about_url"
	      		android:textColor="@color/about_text"
	      		android:textSize="11.0sp"
	      		android:layout_width="wrap_content"
	      		android:layout_height="wrap_content"
	      		android:layout_marginTop="8dp"/>
	    </LinearLayout>
	</LinearLayout>
</ScrollView>

The above code and layout produces the following result:

About Activity

Applying the Android Dialog Theme

The previous example while all well and good, doesn’t give a result that looks like a typical about dialog. To get the effect of a pop-up window, we can use the Android dialog theme. All that is needed is a small change to the application’s manifest file (AndroidManifest.xml): 

<activity
        android:name=".activities.about.About"
        android:label="@string/about_title"
        android:theme="@android:style/Theme.Dialog">
</activity>

The result is starting to look like a real about dialog:

Android Dialog Theme

Adding the Window Decorations

The final piece of the puzzle is adding an icon to the window’s title area. I wanted to add this little extra as it makes my application look a little more “native”. Google Android applications such Maps decorate the about dialog in this manner.

I made the following changes to the About activity’s onCreate() method (About.java): 

// Initialize the layout
super.onCreate(savedInstanceState);
 
Window w = getWindow();
w.requestFeature(Window.FEATURE_LEFT_ICON);
 
setContentView(R.layout.about);
 
w.setFeatureDrawableResource(Window.FEATURE_LEFT_ICON,
	android.R.drawable.ic_dialog_info);

The final result:

Final Result

  • Digg
  • del.icio.us
  • DZone
  • LinkedIn
  • Technorati
  • Google Bookmarks
  • Reddit
  • StumbleUpon
Tags:
Comment (RSS)  |  Trackback

9 Comments

  1. Terje says:
    July 27, 2009 at 1:09 pm

    So how do you close the activity and go back to the one in the background?

  2. Keith says:
    July 27, 2009 at 1:15 pm

    Use the back button…

  3. Terje says:
    July 28, 2009 at 8:40 am

    Ok, but what if i wanted a close button at the end? How would i go about closing the dialog window?

    Thanks

  4. Keith says:
    July 29, 2009 at 6:33 am

    Call finish() in the button’s onClick() event listener.

  5. Evgeny says:
    August 25, 2009 at 3:03 pm

    Very usefull. May I use it in my app?

    Thanks!

  6. Keith says:
    August 25, 2009 at 3:12 pm

    Absolutely, the solution is presented to help others.

  7. Evgeny says:
    August 25, 2009 at 4:40 pm

    attribute android:autoLink=”web” will make the link clickable if you define it as an html link in your resources

  8. Keith says:
    August 26, 2009 at 6:18 am

    Thanks for the pointer! I added it myself shortly after writing this post.

  9. Ravi says:
    June 7, 2010 at 1:57 pm

    Very useful tutorial.
    Thanks.

Leave a Reply

«
»