Setting selected TAB with a small triangle below it

Question

I want my tabs to show like in the image with small triangle below it.Is this possible ?If yes, then help me with some codes or documentation.

a.ch. · Accepted Answer · 2014-09-12T11:30:44.510

I think, the following approach is the simplest one. You just need to setup the following drawable (actually, it's Android's default drawable for tabs) as a background of the tabs:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
    <!-- Pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
</selector>

where tab_press, tab_focus and tab_selected drawables would be png's (I'd prefer 9-patches) with down-arrow and transparent region near it. tab_unselected drawable wouldn't have this arrow, but still would have same transparent region. The only thing left to do is to specify negative bottom margin for your TabWidget. Its value is determined by the height of the arrow (do not forget to use density independent units):

explanatory scheme

but on setting negative margin on tabwidget , the arrow is cuts when list view is scrolled up — Ravi, Jul 10 '13 at 06:12
I guess, it's because of the incorrect Z-order of the elements: `TabWidget` should have higher Z-order than `ListView`, i.e. it should be defined later in xml. — a.ch., Jul 10 '13 at 10:11

score 0 · Answer 2 · answered Mar 07 '12 at 03:04

tab_0_info.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_menu_yourImg_selected"
        android:state_selected="true" />
    <item android:drawable="@drawable/ic_menu_yourImg" />
</selector>


private void addTab(int resouceTabId, int drawableId,
        Class<? extends ActivityGroup> groupActivityClass)
{
    Intent intent = new Intent(this, groupActivityClass);
    TabHost.TabSpec spec = tabHost.newTabSpec("tab" + resouceTabId);

    View tabIndicator = LayoutInflater.from(this).inflate(
            R.layout.tab_indicator, getTabWidget(), false);

    TextView title = (TextView) tabIndicator.findViewById(R.id.title);
    title.setText(resouceTabId);
    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
    icon.setImageResource(drawableId);

    spec.setIndicator(tabIndicator);
    spec.setContent(intent);
    tabHost.addTab(spec);

}

//addTab(R.string.yourTabTitle, R.drawable.tab_0_info, YourGroup.class);

score -2 · Answer 3 · answered Mar 02 '12 at 07:49

You can add images to layout with tabs:

<RelativeLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="0dip" />
    <FrameLayout
        android:fadingEdge="none"
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0px"
        android:layout_below="@android:id/tabs"
        android:layout_alignParentBottom="true"
        android:padding="0px" />
    <ImageView 
        ....
        android:id="@+id/down_arrow_left"/>
    <ImageView 
        ....
        android:id="@+id/down_arrow_right"/>
</RelativeLayout>

and add listener in your tab activity:

getTabHost().setOnTabChangedListener(new OnTabChangeListener() {
        public void onTabChanged(String tabId) {
            if (tabId.equels("left")){
                findViewById(R.id.down_arrow_left).setVisibility(View.VISIBLE);
                findViewById(R.id.down_arrow_right).setVisibility(View.INVISIBLE);
            } else if (tabId.equels("right")){
                findViewById(R.id.down_arrow_left).setVisibility(View.INVISIBLE);
                findViewById(R.id.down_arrow_right).setVisibility(View.VISIBLE);
            }
        }
    });

Setting selected TAB with a small triangle below it

3 Answers3

Linked