5

How do I get my tab buttons to look like enter image description here

What would be the simplest way to do this if I have a drawable in that shape too???

Aalok Sharma
  • 1,025
  • 2
  • 12
  • 26
  • 1
    Creating xml layouts for selectors but they dont fit in properly for the native tabs – Aalok Sharma May 02 '12 at 07:42
  • Do you have a specific question? Which part of the implementation are you having problems with? – Jason Robinson May 02 '12 at 07:53
  • basically, I've tried using tabspec.setindicator method with the drawable,but that does'nt fit in properly with the layout,I've also tried a custom xml layout in that method too,so I wanted to knw if there was any other way I could change the native look n feel of the tabs – Aalok Sharma May 02 '12 at 07:58

3 Answers3

3

simply you can implement tabs to your application like this

in onCreate method

TabHost tabHost = getTabHost();
tabHost.setCurrentTabByTag("First");

TabSpec firstTab = tabHost.newTabSpec("First");  
firstTab.setIndicator("firstTab",getResources().getDrawable(R.drawable.ic_action_first)); //drawable 1
firstTab.setContent(R.id.first_content);    //View
tabHost.addTab(firstTab);

TabSpec secondTab = tabHost.newTabSpec("Second");
secondTab.setIndicator("secondTab",getResources().getDrawable(R.drawable.ic_action_second)); //drawable 2
secondTab.setContent(R.id.second_content);    //View
tabHost.addTab(secondTab);

TabSpec thirdTab = tabHost.newTabSpec("Third");
thirdTab.setIndicator("thirdTab",getResources().getDrawable(R.drawable.ic_action_third)); //drawable 3
thirdTab.setContent(R.id.third_content);    //View
tabHost.addTab(thirdTab);

tabHost.setCurrentTab(0);

in xml file

<TabHost android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost">
    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
        <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" />
        <FrameLayout android:id="@android:id/tabcontent" android:layout_width="wrap_content" android:layout_height="wrap_content" >

            <LinearLayout android:id="@+id/first_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <TextView android:text="first_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout android:id="@+id/second_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <TextView android:text="second_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout android:id="@+id/third_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <TextView android:text="third_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
            </LinearLayout>
        </FrameLayout>

    </LinearLayout>
    </TabHost>

call your drawable at getResources().getDrawable(R.drawable.drawableid));

Hassy31
  • 2,793
  • 3
  • 21
  • 37
  • 1
    re-size your drawables.go to android assert studio and generate tab icons using your drawables.here is the link http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html pls don't forget to rate my answer :) – Hassy31 May 02 '12 at 09:54
1

Something that you could do in your activity : 

private TabHost mTabHost ;
@Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_layout);

        mTabHost = (TabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup();
        // We create a webview for one tab for example
        WebView wv = new WebView(this);
        // add url and options on this webview
        setupTab(wv, "My Title");
}
private void setupTab(final View view, final String tag) {
        View tabview = createTabView(mTabHost.getContext(), tag);
        TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
            public View createTabContent(String tag) {return view;}
        });

        mTabHost.addTab(setContent);
    }
// this is the method for customize tabs
    private static View createTabView(final Context context, final String text) {
        View view = LayoutInflater.from(context).inflate(R.layout.layout_tabwidget_custom, null);
        TextView tv = (TextView) view.findViewById(R.id.tabsText);
        tv.setText(text);
        return view;
    }

In the R.layout.layout_tabwidget_custom :

<?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/selector_tab_bg"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dip" >

    <TextView
        android:id="@+id/tabsText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textColor="@drawable/selector_tab_text"
        android:textSize="15dip" />

</LinearLayout>
Alexandre B.
  • 495
  • 1
  • 4
  • 16
0

I have done similar work like this. Since Android does not help much is customizing tabs, I just make four tabs button and put it at the end of each xml file. All your Activities would be look similar in this way and it would give a view like Tabs.

MrWaqasAhmed
  • 1,479
  • 12
  • 12