Android Tech

The more we share, the more we get

Title (Part 3) – Customize your Android application’s title in advanced


In the following example, I will create a custom title which has a small text and image on the right. I will look like this:

When you click on button “News”, a title with text “News” and small image will appear

The similar result when you click on button “Info”

 

  So, how can we do that?

The main idea to do this is: You have 4 activities:

–         Custom activity: use to load your custom title, below activities use methods extend from this

–         Main activity: loaded when you start your application

–         News activity: called when you click button “News”

–         Info activity: called when you click button “Info”

1. First, we do at the previous post (Customize your Android application’s title) to load main activity with custom title bar. Note that in file window_title.xml, we define 2 more controls are: Text View and Image View control to be used by other activities.

<LinearLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_weight=”1″
android:gravity=”right|center_vertical”
android:paddingRight=”5dip”>

<TextView
android:id=”@+id/title”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”11dip”
android:paddingRight=”5dip” />

<ImageView
android:id=”@+id/icon”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”/>

</LinearLayout>


2. As you see, we have 3 more activities. Now we’ll create CustomWindow activity to load your custom title on application.

package android.titlebar;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomWindow extends Activity {
protected TextView title;
protected ImageView icon;

@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);

title = (TextView) findViewById(R.id.title);
icon  = (ImageView) findViewById(R.id.icon);
}
}


It’s easy to find out that we have moved the process from main activity in the previous post to this activity, and insert 2 more variables. The reason why we have to insert these variables in this activity is: other activities will inherit this activity, define these variables and attach them to their controls, so child activities can interact with these controls too.

3. In main activity (inherit from CustomWindow activity), we define process functions for onClick event and attach to these controls.

package android.titlebar;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class TitleVersion1Activity extends CustomWindow {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

Button b1 = (Button) findViewById(R.id.b1);
b1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(TitleVersion1Activity.this, News.class);

startActivity(intent);
}
});

Button b2 = (Button) findViewById(R.id.b2);
b2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(TitleVersion1Activity.this, Info.class);

startActivity(intent);
}
});
}
}


When user click on button (News or Info), approximate activity will appear

4. Now, we’ll continue to create more 2 left activities: News activity and Info activity. The main process of these activities is set up the value of Text View control and image resource of the Image View control inherit from CustomWindow activity. So that, when user switch to these screen, the text and image will be displayed.

– News activity:

package android.titlebar;

import android.os.Bundle;

public class News extends CustomWindow {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.news);

this.title.setText(“News”);
this.icon.setImageResource(R.drawable.menu_news);
}
}


The layout content of this view is just the text view control display “This is News page…”

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:padding=”10dip”>

<TextView
android:id=”@+id/b1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”25dip”
android:text=”This is News page ….”/>

</LinearLayout>


– Info activity:

package android.titlebar;

import android.os.Bundle;

public class Info extends CustomWindow {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.info);

this.title.setText(“Info”);
this.icon.setImageResource(R.drawable.menu_info);
}
}


The layout content of this view is just the text view control display “This is Info page…”

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:padding=”10dip”>

<TextView
android:id=”@+id/b1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”25dip”
android:text=”This is info page …”/>

</LinearLayout>


5. All of the resources image for this example are stored in res>drawable folder


You can download source code from here

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: