3

Hey all I've created Google's exmaple of a tab layout

HelloTabWidget.java:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost();  // The activity TabHost
TabHost.TabSpec spec;  // Resusable TabSpec for each tab
Intent intent;  // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, ArtistsActivity.class);

// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("artists").setIndicator("Artists",
                  res.getDrawable(R.drawable.ic_tab_artists))
              .setContent(intent);
tabHost.addTab(spec);

// Do the same for the other tabs
intent = new Intent().setClass(this, AlbumsActivity.class);
spec = tabHost.newTabSpec("albums").setIndicator("Albums",
                  res.getDrawable(R.drawable.ic_tab_albums))
              .setContent(intent);
tabHost.addTab(spec);

intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("songs").setIndicator("Songs",
                  res.getDrawable(R.drawable.ic_tab_songs))
              .setContent(intent);
tabHost.addTab(spec);

tabHost.setCurrentTab(2);

}

I know how to create my own icon to use instead of their grey and white microphone, but I can't figure out how to make my custom icon fill the entire tab. When the tab is selected it's a light grey with my pic in the middle and when not selected its a dark grey with my pic in the middle. I prefer to have my own pic fill the entire tab, and for more knowledgeable; my own choice in color to fill the tab.

GJ.
  • 10,810
  • 2
  • 45
  • 62
Clozecall
  • 101
  • 1
  • 2
  • 9
  • This is something I really don't like about Android. Standard Tabs aren't beautiful at all and if selected, the text can't be read any more. Creating a custom TabHost like you want to do, is extremely difficult. – Jonathan Roth Jan 07 '11 at 22:38

1 Answers1

3

You can use setIndicator(View view) to do more complex things with the Tab Indicator.

Try playing with this...

ImageView imgView = new ImageView(this);

// Use imgView.setImageDrawable(Drawable drawable) or
// imgView.setImageBitmap(Bitmap bitmap) to load
// the image you want into imgView

spec = tabHost.newTabSpec("artists").setIndicator(imgView).setContent(intent);

I'm not sure if it's what you want but you can (in theory) use any View class as the Indicator if ImageView doesn't work for you.

EDIT:

I tried...

    BitmapDrawable bmd = new BitmapDrawable();
    bmd = (BitmapDrawable) res.getDrawable(R.drawable.ic_tab_artists_grey);
    imgView.setImageDrawable(bmd);
Squonk
  • 48,735
  • 19
  • 103
  • 135
  • I gave this a shot, although the arists tab turned completely black. The aritsts line in HelloTabWidget now looks like: spec = tabHost.newTabSpec("artists").setIndicator(imgView).setContent(intent); tabHost.addTab(spec); not sure if thats right, if so how do I reference an image? – Clozecall Jan 08 '11 at 00:38
  • @Clozecall: See the comments in the first code I posted - sorry, I got them wrong they should be imgView.setImageDrawable or setImageBitmap. Also, see my EDIT: for an example. – Squonk Jan 08 '11 at 02:28
  • I know this will seem very noobish, but I tried: spec = tabHost.newTabSpec ("artists").bmd = (BitmapDrawable) res.getDrawable(R.drawable.ic_tab_artists_grey); iv.setImageDrawable(bmd); .setContent(intent); tabHost.addTab(spec); -----with this line at the top: BitmapDrawable bmd = new BitmapDrawable(); ----However i get an error for bmd=, iv.setImageDrawable, and .setContent, I'm not even sure if I put that line of code in correctly, I've tried different combinations for an hour, but can't get it, sorry. – Clozecall Jan 08 '11 at 15:34
  • Put the three lines of code in my second code block where the three lines of commented code are in my first code block. – Squonk Jan 08 '11 at 16:25
  • OK so I fixed the problem, I was getting an error on the line with: iv.setImageDrawable(bmd); ---where as "iv" was the error, I changed that to imgView and now it works! All that is left is to customize and play with my custom images. Thanks for your patience MisterSquonk! – Clozecall Jan 08 '11 at 17:41
  • @Clozecall: My apologies - the second code was copy/pasted from my test code where I'd used iv for my ImageView. Glad you have it working now. Using a View for the Indicator seems like a pretty flexible option, good luck with getting it to work the way you want it to. – Squonk Jan 08 '11 at 22:34