Creating custom tabhost like in chrome browser for Android

Question

I want to create custom tabhost for browser like tabs. I am confused about how to apply it for a layout like in chrome browser tab as in the image.

Here is what I have tried. I want to know how to create that edges with slope as in the image.

tab_selected.xml

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#DCDCDC" />

        <corners
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp" />
    </shape>
</item>
<item
    android:bottom="2dp"
    android:left="1dp"
    android:right="1dp"
    android:top="1dp">
    <shape android:shape="rectangle" >
        <solid android:color="#DCDCDC" />
        <corners
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
    </shape>
</item>

tab_unselected.xml

<item android:top="10dp">
    <shape android:shape="rectangle" >
        <solid android:color="#AAAAAA" />
    </shape>
</item>
<item android:bottom="2dp">
    <shape android:shape="rectangle" >
        <solid android:color="#AAAAAA" />

        <corners
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />

    </shape>
</item>

I hope it can be done using Pathshape in XML. Can anyone point me out for a reference? Unable find a reference on PathShape

Answer 1

put you page in a FrameLayout and also a hashmap(with their specific names). then you can change tab like this

  FrameLayout fl =new FrameLayout(context);
  HashMap<String,LinearLayout> tabs =new HashMap<String,LinearLayout>(); 

  LinearLayout tab =new LinearLayout(context);
  fl.addView(tab);
  tabs.put("home",tab);

  tab =new LinearLayout(context);
  fl.addView(tab);
  tabs.put("events",tab);



private void changeTab(String tabKey) {
    for (java.util.Map.Entry<String, LinearLayout> e : tabs.entrySet()) {
        if (e.getKey().compareTo(key) == 0) {
            e.getValue().setVisibility(View.VISIBLE);
        } else {
            e.getValue().setVisibility(View.INVISIBLE);
        }
    }
 }


 use this to change tab:

  changeTab("home");

NOTE: you must set fl as contentview of activity or add it another view and set it as contentview

Answer 2

It is working fine with two nine patch images. One for active tab and one for inactive tab.