如何在标签栏图标上添加线

Question

This is my tabbar example, and I want to add a layout as follows: lines on left, right, top and bottom of each icon like this image:

Currently my screen is like this:

My full code is below, how do I add lines on each icon?

    public class TabSample extends TabActivity {
/** Called when the activity is first created. */

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    setTabs() ;
}
private void setTabs()
{
    addTab("payments", R.drawable.tab_home, ArrowsActivity.class);
    addTab("My Account", R.drawable.tab_home, ArrowsActivity.class);

    addTab("Spend Analyzer", R.drawable.tab_home, ArrowsActivity.class);
    addTab("Notification", R.drawable.tab_home, ArrowsActivity.class);
    addTab("Help", R.drawable.tab_home, ArrowsActivity.class);
}

private void addTab(String labelId, int drawableId, Class<?> c)
{
    TabHost tabHost = getTabHost();
    Intent intent = new Intent(this, c);
    TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId); 

    View tabIndicator =  
     LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
    TextView title = (TextView) tabIndicator.findViewById(R.id.title);
    title.setText(labelId);
    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
    icon.setImageResource(drawableId);

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





          <------------ main.xml-------------------------->



          <?xml version="1.0" encoding="utf-8"?>

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

    <FrameLayout android:id="@android:id/tabcontent"
        android:layout_width="fill_parent" 
        android:layout_height="0dip"
        android:layout_weight="1" />

    <TabWidget android:id="@android:id/tabs"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="0"  />
</LinearLayout>
     </TabHost> 

             <------------------- tab_home.xml---------------------->



         <?xml version="1.0" encoding="utf-8"?>

     <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/user"
    android:state_selected="true" />
<item android:drawable="@drawable/user_grey" />
     </selector> 




           <----------- tab_indicator.xml------------------->





           <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="0dip"
 android:layout_height="40dip"    
 android:layout_weight="1"
 android:orientation="vertical"



    android:padding="1dp">

 <ImageView android:id="@+id/icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:src="@drawable/icon"

 /> 

   <TextView android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" 
    android:layout_centerHorizontal="true"
    android:textSize="8dp"
    style="?android:attr/tabWidgetStyle"
    />    
   </RelativeLayout>



    <!----style.xml--------->





            <?xml version="1.0" encoding="utf-8"?>

 <resources>
<style name="app_theme" parent="android:Theme.NoTitleBar">

</style>    
   </resources> 

Answer 1

You can add manually line in your tab_indicator layout file

You can adjust my following code as per your need:

ex: Horizontal line

<View
    android:layout_height="1dp"
    android:id="@+id/line"
     android:layout_width="fill_parent"
      android:background="#0066CC" />

ex: Vertical line

<View
    android:layout_height="7dp"
    android:id="@+id/line"
     android:layout_width="1dp"
      android:background="#0066CC" />

Answer 2

ok..i just edit my new answer

its working..so dont talk that it does nt add line btwn every image

your tab_indicator.xml:--


<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dip"
        android:layout_height="60dip"
        android:background="#ffffff"
         android:layout_weight="1" >

    <View
        android:id="@+id/line1"
        android:layout_width="1dp"
        android:layout_height="60dip"
        android:background="#0066CC" />

    <TextView
        android:id="@+id/title"
        style="?android:attr/tabWidgetStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/icon"
        android:text="abc"
        android:textSize="8dp" />

    <View
        android:id="@+id/line3"
        android:layout_width="fill_parent"
        android:layout_height="1dp"

        android:layout_toRightOf="@+id/line1"
        android:background="#0066CC" />

    <View
        android:id="@+id/line2"
        android:layout_width="1dp"
        android:layout_height="60dip"
        android:layout_toRightOf="@+id/line3"
        android:background="#0066CC" />

    <View
        android:id="@+id/line4"
        android:layout_width="fill_parent"
        android:layout_height="1dp"
     android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/line1"
        android:background="#0066CC" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="30dip"
       android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/icon" />

</RelativeLayout>

first try this code..nd change it as per your need.