Android custom tab selection indicator with an image

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: https://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. https://i.stack.imgur.com/Hg5sT.png

score 1 · Accepted Answer · answered Apr 14 '14 at 06:52

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.

it didn't resolve my problemes, but gave me ideas to. I'll accept this answer — user3346173, Apr 16 '14 at 13:54

Android custom tab selection indicator with an image

1 Answers1