Change the color of the tab indicator on Android

Asked

Viewed 1,368 times

2

android xml android-layout
  • 1

    If the settings you used are the same ones I saw when I opened (no loss), missed you specify the Style compatibility as AppCompat. The current one is like Holo, which ignores some specific style settings of AppCompat.

  • Actually I put as Appcompat, the link that should not have loaded this option :/ I checked the Xmls and all have this compatibility...

  • 1

    Okay, he lost the information, sorry. By the way... How are you doing these tabs? Using the ActionBar.NAVIGATION_MODE_TABS? Or is using another library?

  • I’m using Fragments: android.support.v4.app.Fragmenttabhost and tabs with Tabwidget. I managed to change the background of the tabs, but the indicator I could not change in any way :'(

  • 1

    Try to do the following, I can not test but I think it will work (if I give it as an answer). Itere on the children of TabWidget (using getChildAt(...) and getChildCount) and use the setBackgroundResource like the drawable tab_indicator_ab generated by Style Generator). This after you have set up all the Tabs.

  • Sorry, I am extremely novice on Android, how would I iterate on the Tabwidgets? 
 mTabHost.addTab(mTabHost.newTabSpec("simple").setIndicator("A"), Teste1.class, null);
 mTabHost.addTab(mTabHost.newTabSpec("contacts").setIndicator("B"), Teste2.class, null);

A "mTabHost" é um FragmentTabHost, tem um método chamado getTabWidget, it returns all Tabwidgets or only the last?

  • 1

    I will assemble an answer exemplifying how it should be done.

  • Thank you very much, thank you very much!

Show 3 more comments

1 answer

2


The FragmentTabHost returns the TabWidget (only one), which is the View responsible for drawing these tabs. Each child is a different tab.

The color setting of Tab of Style Generator applies only to Tab of ActionBar.

In your case you’re using the TabHost and the TabWidget, and that style does not apply to them, unfortunately.

To customize the tab, you need to recover the TabWidget and stylize each child. That way:

// Assim como voce mencionou
TabWidget tabWidget = mTabHost.getTabWidget();

// Como o TabWidget eh um ViewGroup, ele tem filhos e podemos iterar
// sobre os mesmos
int childCount = tabWidget.getChildCount();

for(int i = 0; i < childCount; ++i) {
    View child = tabWidget.getChildTabViewAt(i);
    // Que eh o mesmo que
    //View child = tabWidget.getChildAt(i);
    // Vide o codigo fonte

    // O Drawable vai variar conforme o nome do seu tema, confirme se tem
    // algum nome parecido com esse e altere aqui
    child.setBackgroundResource(R.drawable.tab_indicator_ab);
}

Use this code at the end of the TabHost.

The archive tab_indicator_ab.xml that is in the directory /res/drawable is very similar to this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_ab" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_ab" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_ab" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_ab" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_ab" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_ab" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_ab" />
</selector>

  • Thank you again, it worked perfectly... Not wanting to abuse but I came up with a question: You recommend the use of Actionbar Tab or Tabhost and Tabwidget?

  • 1

    Actionbar’s Tab is very simple, it’s just a Tab that has a ActionBar.TabListener linked. It has no link to the contents of the Tab, it means that you have to manage it (be with FragmentManager or otherwise). It is widely used in conjunction with the ViewPager, update each other. In TabHost it obliges you to provide the content (Fragment or View), so it is more rigid, but it is simpler. I think it will depend on the use case, synchronize the ActionBar Tab with the ViewPager is much more boring but works.

  • Ok, thank you very much. You helped me very much, it caught me for 2 days... Thank you!

Browser other questions tagged android xml android-layout

You are not signed in. Login or sign up in order to post.