CODEWITHSUNDEEP
androidandroid-styles
user2059935
user2059935

Reputation: 971

android change tab indicator style

This is my style

<style name="MyCustomTheme" parent="@style/Theme.AppCompat">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="android:actionBarTabStyle">@style/customActionBarTabStyle</item>
        <item name="actionMenuTextColor">#fff</item>
    </style>
<style name="customActionBarTabStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">

        <!-- tab indicator -->
        <item name="android:background">#ac0910</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_tab_indicator</item>
    </style>

I got this result: enter image description here but if i changed my xml to this: enter image description here 

    <!-- tab indicator -->
    <item name="android:background">@drawable/actionbar_tab_indicator</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_tab_indicator</item>
</style>

I got this result:

This is my @drawable/actionbar_tab_indicator

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

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

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

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="false"
          android:drawable="@drawable/tab_unselected_focused" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="false"
          android:drawable="@drawable/tab_selected_focused" />


<!-- STATES WHEN BUTTON IS PRESSED -->

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

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="true"
          android:drawable="@drawable/tab_unselected_pressed" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="true"
          android:drawable="@drawable/tab_selected_pressed" />
</selector>

the most important part is

@drawable/tab_selected_pressed @drawable/tab_unselected_pressed @drawable/tab_selected_pressed ...

are images like rectange and fill in colors. this is what i though is the indicator

Upvotes: 1

Views: 3929

Answers (1)

Sujeet Kumar Mehta
Sujeet Kumar Mehta

Reputation: 2811

create a custom layout in the xml as

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/tab_button_drawable"
android:orientation="vertical"
android:padding="10dp" > <TextView
    android:id="@+id/tab_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@drawable/text_navigator_color_drawable"
    android:textSize="14dp" /></LinearLayout>

and create a method which will return a custom view than define as this after defining the tab view 

public View createTabView(final Context context, final String text) {
    View view = LayoutInflater.from(context).inflate(R.layout.tab_layout,
            null);
    TextView tv = (TextView) view.findViewById(R.id.tab_text_view);
    tv.setText(text);
    return view;
}

tabSpec.setIndicator(createTabView(tabHost.getContext(), tabWidgetTextView.getText().toString()));

Upvotes: 1

Related Questions