Android Tech

The more we share, the more we get

Title (Part 2) – Customize your Android application’s title


There are many ways to change the default title in Android application with many styles. And this is a series posts about this subject. Hope it will be useful.

The basic way to change the title, that is you will replace the default by your title image. So that, you can make your own beautiful title image and just load them on your application. To do that, you can follow below steps:

1. First of all, you have to create a layout file to load your image, ex: window_title.xml in res>layout folder:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  	xmlns:android="http://schemas.android.com/apk/res/android"
  	android:orientation="horizontal"
	android:layout_width="fill_parent"
	android:layout_height="35dip"
	android:gravity="center_vertical"
	android:paddingLeft="5dip"
	android:background="#323331">

	<ImageView
		android:id="@+id/header"
		android:src="@drawable/header"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"/>

</LinearLayout>


Explain:

“android:orientation=”horizontal” “: does not really take effect in this example. You can remove it because it’s used to identify the direction of arrangement between objects.

For example:

“android:orientation=”horizontal” “

“android:orientation=”vertical” “

“android:layout_width=”fill_parent” “: this area layout will have the width full fill the width of the screen.

If you modify it to another value, ex: 80dip, it’ll look like this:

The image object inside it looks scaled to be smaller and the width of this layout is 80dip.

“android:layout_height=”35dip” “: this area layout will have the height exactly at 35dip. If you change to 15dip, it’ll look like this:

The image object inside it looks scaled to be smaller and the height of this layout is 15dip.

“android:gravity=”center_vertical” “: used to align the text if have, you can remove this attribute in this example. Insert a textview with this param to see the effect like this:


“android:paddingLeft=”5dip” “: the padding space between the margin of layout to it’s content

The result when adjust to value ‘0’ or remove it:

“android:background=”#323331” “: the background color of this layout area. You can change it to blue for example:

“android:id=”@+id/header” “: ID of the image view control
“android:src=”@drawable/header” “: the image path to load

“android:layout_width=”wrap_content”, android:layout_height=”wrap_content” “: the control will have the width and the height fixed with their content.You can see the image, there is no padding space from its content to the margin

2. After that, you will create a style file contain your new style which application need to know. ex: custom_style.xml in res>values folder

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<style name=”CustomWindowTitleBackground”>
<item name=”android:background”>#323331</item>
</style>
<style name=”CustomTheme” parent=”android:Theme”>
<item name=”android:windowTitleSize”>35dip</item>
<item name=”android:windowTitleBackgroundStyle”>@style/CustomWindowTitleBackground</item>
</style>
</resources>

Explain:

<style name=”CustomWindowTitleBackground”>
        <item name=”android:background”>#323331</item>
</style>

Define a yourself style (used for replacing the default style of title bar). This style has item with background value is #323331. This background won’t be seen when the layout from window_title.xml is loaded.

When your custom layout has the height is greater than the default value of a title bar, you need to adjust the following attribute.

“<item name=”android:windowTitleSize”>35dip</item>”

Replace the default title style with your style:

<item name=”android:windowTitleBackgroundStyle”>
                @style/CustomWindowTitleBackground
</item>

Put them all in a theme:

<style name=”CustomTheme” parent=”android:Theme”>
            …
</style>

3. Apply your new style to application by insert this code to the configure file “AndroidManifest.xml”:

<application android:icon=”@drawable/icon” android:label=”@string/app_name” android:theme=”@style/CustomTheme”>

4. In event onCreate() of application’s  main activity, replace default title with new one:

public class TitleVersion1Activity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        setContentView(R.layout.main);
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
    }
}

Explain:

“requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);”: Enable extended window features (custom title bar).

“getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);”: Set the custom title to the application window.

The first note that with this example, we must set the custom title (or other custom feature) before we display it on the screen. It mean, we can’t show that feature on the screen and after that tell it to disappear, it will be not completely to it parent object, and a crash will happen. So you can see, we call requestWindowFeature() before we show the screen.

The second is if you call function setFeatureInt() before call setContentView(), it will set the custom title for you, and immediately this custom title will be disappear because we load the default layout (the title of this layout won’t show out because we have already set using custom title for this feature)

The result will like this:


You can download example from here

Note: If you have problem with copy code, try to re-type the quotation.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: