Android Developer: How to make Custom Menu Bar –Tabs in Android Application and How to Hook the menu button to show/hide a custom tab bar

I find this Example from the Website and share At the Blogs Which I will update time to time .By using this example one can we use it as tab Activity in android or it will be become more useful to Menu Bar.

The subject of this tutorial is how to create your own custom menu bar that will be shown and hidden when user clicked the menu button on his/her device.

There are many other uses for this example and it just isn’t limited to a menu or tab bar. For example, you can use this to show and hide a panel that contains whatever content you want to be shown. It could be used for contextual help or Media Player controls, etc.

Custom Menu Panel

The basis of this example is the layout. I have found that the RelativeLayout is superior for creating great layouts that perform well across devices. If you want to learn more about what a Relative Layout can do for you I highly recommend that you check out Working with Multiple Android Screens in the Motorola Android Technical Library. For the purpose of this tutorial… I haven’t followed everything that I should have as far as creating a good cross device application by defining my layouts using dip (Density Independent Pixels)… but this is just an example. Now let’s get to it.

The main layout for the application contains 2 Relative Layouts, a Text View, a Tab Host, aTabWidget and a View. In particular, I want to point out the layout_align ParentBottom attribute of the panel Relative Layout. This attribute is one of 4 separate attributes that allow you to place a Relative Layout on any side of the parent layout. I also want to bring your attentions to the visibility attribute which allows us to set the layout as hidden. Using “gone” makes the layout to be completely hidden, as if the view had not been added.

/res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>

The second layout is for each individual tab. I am not going to go into how to customize the tabs in this tutorial.

/res/layout/tabs_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/tabsLayout"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="@drawable/tab_bg_selector"
  android:padding="5px"
  android:gravity="center"
  android:orientation="vertical">
  <ImageView
  android:id="@+id/tabsIcon"
  android:layout_width="36px"
  android:layout_height="36px">
  </ImageView>
  <TextView
  android:id="@+id/tabsText"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="5px"
  android:text=""
  android:textSize="12px"
  android:textColor="@drawable/tab_text_selector">
  </TextView>
</LinearLayout>

The first activity is called CustomMenuBar.java

package com.androidvogue.example.custommenubar;

import android.app.TabActivity;

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.view.KeyEvent;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.TabHost;

import android.widget.TabHost.TabContentFactory;

import android.widget.TabHost.TabSpec;

import android.widget.TextView;

public class CustomMenuBar extends TabActivity {

private TabHost mTabHost;

private static RelativeLayout mMenuPanel;

private TextView content;

private final static String WEBSITE = "http://www.android-vogue.blogspot.com";

// This isn't necessary but it makes it nice to determine which tab I am on in //the switch statement below

private static class TabItem {

public final static int SEARCH = 0;

public final static int SHARE = 1;

public final static int WEBSITE = 2;

public final static int SETTINGS = 3;

public final static int QUIT = 4;

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

setupViews();

}

private void setupViews() {

content = (TextView) findViewById(R.id.content);

content.setText(getString(R.string.search));

mMenuPanel = ((RelativeLayout) findViewById(R.id.menuPopup));

mMenuPanel.setVisibility(View.GONE);

mTabHost = (TabHost) findViewById(android.R.id.tabhost);

mTabHost.setup();

mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);

addActivityTab(new TextView(this), "Search", R.drawable.search, new Intent(CustomMenuBar.this, Search.class));

addActivityTab(new TextView(this), "Share", R.drawable.heart, new Intent(CustomMenuBar.this, Share.class));

addMethodTab(new TextView(this), "Website", R.drawable.globe);

addActivityTab(new TextView(this), "Settings", R.drawable.tools, new Intent(CustomMenuBar.this, Settings.class));

addMethodTab(new TextView(this), "Quit", R.drawable.power);

mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

@Override

public void onTabChanged(String arg0) {

if (mMenuPanel != null) {

if (mMenuPanel.getVisibility() == View.VISIBLE) {

toggleMenu();

}

switch (mTabHost.getCurrentTab()) {

case TabItem.SEARCH:

content.setText(getString(R.string.search));

break;

case TabItem.SHARE:

content.setText(getString(R.string.share));

break;

case TabItem.WEBSITE:

content.setText(getString(R.string.website));

final Intent visit = new Intent(Intent.ACTION_VIEW);

visit.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

visit.setData(android.net.Uri.parse(WEBSITE));

// Use a thread so that the menu is responsive when clicked

new Thread(new Runnable() {

public void run() {

startActivity(visit);

}

}).start();

break;

case TabItem.SETTINGS:

content.setText(getString(R.string.settings));

break;

case TabItem.QUIT:

content.setText(getString(R.string.quit));

new Thread(new Runnable() {

public void run() {

CustomMenuBar.this.finish();

// The following makes the Android Gods frown upon me

android.os.Process.killProcess(android.os.Process.myPid());

System.exit(0);

}

}).start();

break;

default:

break;

}

// Handle click on currently selected tab - hide menu bar

// IMPORTANT: This listener has to appear AFTER the tabs are added

// Unfortunately, This doesn't work when the current tab contains an activity (except for tab 0)

// If you only have method tabs then it works perfect

mTabHost.getTabWidget().getChildAt(mTabHost.getCurrentTab()).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v)

{

toggleMenu();

}

});

//if you want to reset the current tab

// mTabHost.setCurrentTab(0);

}

});

}

// Use this method to add an activity or intent to the tab bar

private void addActivityTab(final View view, final String tag, int iconResource, Intent intent) {

View tabview = createTabView(mTabHost.getContext(), tag, iconResource);

TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview)

.setContent(intent);

mTabHost.addTab(setContent);

}

// Use this method if you only want the tab to execute a method

private void addMethodTab(final View view, final String tag, int iconResource) {

View tabview = createTabView(mTabHost.getContext(), tag, iconResource);

TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview)

.setContent(new TabContentFactory() {

public View createTabContent(String tag) {

return view;

}

});

mTabHost.addTab(setContent);

}

private static View createTabView(final Context context, final String text,

int iconResource) {

View view = LayoutInflater.from(context)

.inflate(R.layout.tabs_layout, null);

TextView tv = (TextView) view.findViewById(R.id.tabsText);

tv.setText(text);

ImageView icon = (ImageView) view.findViewById(R.id.tabsIcon);

icon.setImageResource(iconResource);

return view;

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_MENU) {

toggleMenu();

return true;

} else {

return super.onKeyDown(keyCode, event);

}

public static void toggleMenu() {

if (mMenuPanel.getVisibility() == View.GONE) {

mMenuPanel.setVisibility(View.VISIBLE);

} else {

mMenuPanel.setVisibility(View.GONE);

}

Here is one of the example activities that are set as content for the activity tabs. I will only publish this one because they are identical.

Search.java

package com.androidvogue.example.custommenubar;

import android.app.Activity;

import android.os.Bundle;

import android.view.KeyEvent;

import android.widget.TextView;

public class Search extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setupViews();

}

private void setupViews() {

/* Search Tab Content */

TextView textView = new TextView(this);

textView.setText(getString(R.string.search));

setContentView(textView);

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_MENU) {

CustomMenuBar.toggleMenu();

return true;

} else {

return super.onKeyDown(keyCode, event);

}

The code in CustomMenuBar.java is commented and you should be able to follow what it does… I am going to concentrate on the primary subject of this tutorial which is hooking the menu button and displaying and hiding the menu panel. First, it is very easy to hook the menu button. This is accomplished by overriding the onKeyDown method of the activity and catching the KeyEvent for the menu button. If you look at the KeyEvent page in the SDK documentation you can see that there are many KeyEvent constants that allow you to hook almost any key.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
  if (keyCode == KeyEvent.KEYCODE_MENU) {
toggleMenu(); // show or hide the menu as required
  return true;
  } else {
  return super.onKeyDown(keyCode, event);
  }
}

The next important part is the toggleMenu()_ method which just sets the visibility of the panel. Notice that the modifier of the method is static. This allows us to call this method from another activity. I will go into more detail below.

public static void toggleMenu() {
if (mMenuPanel.getVisibility() == View.GONE)

{

mMenuPanel.setVisibility(View.VISIBLE);
  } else {
    mMenuPanel.setVisibility(View.GONE);
  }
}

Now look at Search.java above. You will notice that it also has the Overriden onKeyDown method. This is because only the currently active Activity can catch KeyEvents. So we have to Override that method in each of the activities that we are using. The difference in these activities is that they don’t have access to the panel… only CustomMenuBar has access to it… so the workaround to be able to toggle the menu is to call the method directly in CustomMenuBar. This is the static call I mentioned above. Notice that in Search.java I am calling toggleMenu() like CustomMenuBar.toggleMenu();.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
  if (keyCode == KeyEvent.KEYCODE_MENU) {
CustomMenuBar.toggleMenu();
  return true;
  } else {
  return super.onKeyDown(keyCode, event);
  }
}

Android Developer

Wednesday 20 April 2011

How to make Custom Menu Bar –Tabs in Android Application and How to Hook the menu button to show/hide a custom tab bar

No comments:

Post a Comment

Search This Blog