带有图像的Android自定义标签选择指示器

Question

I am relatively new to android, and I was really wondering if it is possible to customize tab selection as in the image( URL: http://i.stack.imgur.com/Hg5sT.png ) . As you see in the image, there is a little triangular shape(an image) pointing downward when a tab is selected. If yes, how can this be achieved xml/java. I tried having a background image in the tab but it didn't appear as expected. I researched a lot online, but couldn't find how to do this.

Thank you for your patience and cooperation. http://i.stack.imgur.com/Hg5sT.png

Answer 1

If you want to achieve this you must create two images for a single tab . And change them on selection

MainActivity

public class MainActivity extends TabActivity
{
    TabHost tabHost;

    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tabHost = getTabHost();

        TabSpec spec;

        Intent intent;

        //Home Tab
        View view1 = LayoutInflater.from(MainActivity.this).inflate(R.layout.home, null);  //  R.layout.home  is the home.xml where you have entered two image 

        intent = new Intent(MainActivity.this, Firstclass.class);

        spec = tabHost.newTabSpec("HOME").setIndicator(view1)
                .setContent(intent);

        tabHost.addTab(spec);

        //Calendar Tab
        View view2 = LayoutInflater.from(MainActivity.this).inflate(R.layout.calendar_tab, null);

        intent = new Intent(MainActivity.this, Calendar.class);

        spec = tabHost.newTabSpec("CALENDAR").setIndicator(view2)
                .setContent(intent);

        tabHost.addTab(spec);

Home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/home_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:layout_centerInParent="true"
        android:background="@drawable/selector1" />

</RelativeLayout>

@drawable/selector1

selector1.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/home_selected" android:state_selected="true"></item>
    <item android:drawable="@drawable/home_unselect" android:state_selected="false"></item>

</selector>

on state_selected the image wil be home_selected but on unselected state the image will be replaced you have to create these two xml files for each tab. And your problem will be solved.