Is it possible to change actionbar tab indicator programmatically
How can i change programmatically the selected tab indicator of my action bar ? i have read about tab styling, and Tab.setCustomView() method, but none of these helps :
With tab styles, i can change the indicator color, but it will remain for all tabs (i want to have an indicator for each tab).
With tab custom view, i have used a layout with a
TextView
for tab title, andView
for managing the indicator color. In the java i change theView
's background dynamically, but the problem with that is theView
's background doesn't match tabs bounds.
<TextView
android:id="@+id/custom_tab_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:gravity="center|center_horizontal"
android:textStyle="bold"/>
<View
android:id="@+id/custom_tab_view"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"/>
Can somebody tell me where i'am wrong ? Is there another way to do it ? Thanks
I have succeeded to implement what i wanted by using @Padma's answer to generate my tab indicator backgrounds : i needed 5 selectors : green, yellow, blue, orange and red. So i created 5 xml drawables
(tabs_selector_red.xml, tabs_selector_blue.xml, etc...
) :
tabs_selector_green.xml :
<!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
<!-- Pressed -->
<!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>
<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>
I also created a layer-list
for each xml background :
layer_bg_selected_tabs_green.xml
<item>
<shape android:shape="rectangle" >
<solid android:color="@color/tab_green" />
<padding android:bottom="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
And finally, in the Java
, i switch the background dynamically buy using selected tab's custom view
and index
:
private static final int[] TABS_BACKGROUND = {
R.drawable.tabs_selector_orange, R.drawable.tabs_selector_green,
R.drawable.tabs_selector_red, R.drawable.tabs_selector_blue,
R.drawable.tabs_selector_yellow };
/*
BLA BLA BLA
*/
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
RelativeLayout tabLayout = (RelativeLayout) tab.getCustomView();
tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]);
tab.setCustomView(tabLayout);
/* ... */
}
Now let's add some screenshots :
//your tab bar should be
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/Wrap"
android:background="@drawable/tabs_selector"
android:gravity="center_horizontal|bottom"
android:minHeight="@dimen/size_fourty"
>
<TextView
android:id="@+id/custom_tab_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:gravity="center|center_horizontal"
android:textStyle="bold"/>
</RelativeLayout>
//your tabs_selector.xml should like this
<!-- Non focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
<!-- Focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
<!-- Pressed -->
<!-- Non focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>
<!-- Focused states -->
<item android:drawable="@drawable/layer_bg_unselected_tabs" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>
// your layer_bg_unselected_tabs should be like this
<item>
<shape android:shape="rectangle" >
<solid android:color="@color/red" />
<padding android:bottom="2dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="@color/gray" />
</shape>
</item>
// your layer_bg_selected_tabs should be like this
<item>
<shape android:shape="rectangle" >
<solid android:color="@color/red" />
<padding android:bottom="8dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="@color/gray" />
</shape>
</item>