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

Bollard

You can't create those as a xml drawable, a nine patch is more appropriate. – Rutaceous

@Luksprog I was hoping for doing it through programmatically with PathShape. Is it possible through that? – Bollard

@Bollard have you found any solution – Wanonah

if you use you can not show more than 5 tab .. will that be okay for you? – Expunge

Working fine with nine patch images. – Bollard

Answer 1

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

Bollard

But how did you add separate listener to delete icon on the tab? – Survance

@AkhileshSk using the tab id that I use – Bollard

Answer 2

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

Rank

Thanks for the answer. I need this solution too. But my question is mainly about the designing of tabs. – Bollard

to create tabs like that, you must create your own tab bar and tab buttons to. because as you can see active tab is on the others. you can do this putting your buttons in a relative layout and changing their z-index(I dont know name of this in android. So i use z-index in html. But I know it exists. search it) – Rank

okay. Currently I am trying out nine patch images. I will update the results soon. – Bollard

@Bollard nice thought i will try to do same..i have 1 idea...basically we can make 6 nine patch images 2 for first tab selected and deselected respectively. 2 for intermediate tabs and 2 for the last tab.According to the position we have to set the drawable. I will try to implement and then will tell you if i will success. – Ax