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.

enter image description here

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

You can't create those as a xml drawable, a nine patch is more appropriate. — user, Apr 17 '13 at 05:32
@Luksprog I was hoping for doing it through programmatically with PathShape. Is it possible through that? — intrepidkarthi, Apr 17 '13 at 12:19
if you use you can not show more than 5 tab .. will that be okay for you? — stinepike, May 05 '13 at 04:54

score 1 · Answer 1 · answered May 02 '13 at 00:45

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

answered May 02 '13 at 00:45

bmavus

892
1
7
21

Thanks for the answer. I need this solution too. But my question is mainly about the designing of tabs. – intrepidkarthi May 02 '13 at 17:41
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) – bmavus May 04 '13 at 11:49
okay. Currently I am trying out nine patch images. I will update the results soon. – intrepidkarthi May 06 '13 at 00:01
@intrepidkarthi 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. – TheFlash May 06 '13 at 07:49

score 0 · Accepted Answer · answered Jul 15 '13 at 12:53

0

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

answered Jul 15 '13 at 12:53

intrepidkarthi

3,104
8
42
75

But how did you add separate listener to delete icon on the tab? – Akhilesh Sk Apr 19 '14 at 11:14
@AkhileshSk using the tab id that I use – intrepidkarthi Apr 20 '14 at 07:28

Creating custom tabhost like in chrome browser for Android

2 Answers2