Custom TabWidget Android Tab Indicator

FirstLaw picture FirstLaw · Mar 6, 2012 · Viewed 9.4k times · Source

Okay, so i am making an android app that has tabs, now my problem is that the tab widget isn't uniform across the diffrent android versions or devices. I want to make it to be the same on any android this is my tab activity

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class Cook extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.cook_layout);

  TabHost tabHost = getTabHost();

    // Tab for Snacks
    TabSpec snackspec = tabHost.newTabSpec("Snacks");
    // setting Title and Icon for the Tab
    snackspec.setIndicator("Snacks", getResources().getDrawable(R.drawable.cook_icon_tab_snacks));
    Intent snacksIntent = new Intent(this, Cook_tab_snacks.class);
    snackspec.setContent(snacksIntent);



    // Tab for Mains
    TabSpec mainspec = tabHost.newTabSpec("Mains");
    mainspec.setIndicator("Mains", getResources().getDrawable(R.drawable.cook_icon_tab_snacks));
    Intent mainsIntent = new Intent(this, Cook_tab_mains.class);
    mainspec.setContent(mainsIntent);

    // Tab for Desserts
    TabSpec dessertspec = tabHost.newTabSpec("Desserts");
    dessertspec.setIndicator("Desserts", getResources().getDrawable(R.drawable.cook_icon_tab_snacks));
    Intent dessertsIntent = new Intent(this, Cook_tab_desserts.class);
    dessertspec.setContent(dessertsIntent);


    // Adding all TabSpec to TabHost
    tabHost.addTab(snackspec); // Adding snacks tab
    tabHost.addTab(mainspec); // Adding mains tab
    tabHost.addTab(dessertspec); // Adding desserts tab
}

}

I also have my XML layout :

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

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"   
android:layout_width="fill_parent"
android:layout_height="fill_parent"

>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
    <FrameLayout
        android:id="@android:id/tabcontent"
        android:background="@drawable/gradient_bg"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
</LinearLayout>

I made a new indicator xml which is like the main android tab indicator v4 I followed and searched alot of blogs , i couldn't find my answer ... I really want to make the android tabs uniform across all android versions and to make the colors nice , since orange and yellow dont really fit with the color theme in my app Help please!!!! I cant seem to find a way to fix it... Cheers

Answer

FirstLaw picture FirstLaw · Mar 15, 2012

okay i found a solution. here is the code:

import android.app.TabActivity;
import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class Cook extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.cook_layout);

  TabHost tabHost = getTabHost();

    // Tab for Snacks
    TabSpec snackspec = tabHost.newTabSpec("Snacks");
    // setting Title and Icon for the Tab
    snackspec.setIndicator(makeTabIndicator(getResources().getDrawable(R.drawable.cook_icon_tab_snacks)));
    Intent snacksIntent = new Intent(this, Cook_tab_snacks.class);
    snackspec.setContent(snacksIntent);



    // Tab for Mains
    TabSpec mainspec = tabHost.newTabSpec("Mains");
    mainspec.setIndicator(makeTabIndicator( getResources().getDrawable(R.drawable.cook_icon_tab_snacks)));
    Intent mainsIntent = new Intent(this, Cook_tab_mains.class);
    mainspec.setContent(mainsIntent);

    // Tab for Desserts
    TabSpec dessertspec = tabHost.newTabSpec("Desserts");
    dessertspec.setIndicator(makeTabIndicator( getResources().getDrawable(R.drawable.cook_icon_tab_snacks)));
    Intent dessertsIntent = new Intent(this, Cook_tab_desserts.class);
    dessertspec.setContent(dessertsIntent);


    // Adding all TabSpec to TabHost
    tabHost.addTab(snackspec); // Adding snacks tab
    tabHost.addTab(mainspec); // Adding mains tab
    tabHost.addTab(dessertspec); // Adding desserts tab
}


//making the tab view:
private View makeTabIndicator(Drawable drawable){
ImageView Tabimage = new ImageView(this);
LayoutParams LP = new           LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT,1);
LP.setMargins(1, 0, 1, 0);
Tabimage.setLayoutParams(LP);
Tabimage.setImageDrawable(drawable);
Tabimage.setBackgroundResource(R.drawable.tabview);
return Tabimage;


}}

I dont know weather or not i need the cook_layout anymore i'll see if i can remove it or leave it later... right now i just want to get it all working and later i'll come round by for a clean and tiding up hope that helps you guys out there that stumble upon this question! cheers