Geek asks and answers

How to change the style and color of a tab using the AppCompat library

I am making a small program in which I use tabs with fragments to make it stylish, I used Style Generator and my experience was good with that.

Now I want to slightly change the existing look of my tabs, this time I'm talking about the tab style .

first screen shot of my simple stylish ActionBar

enter image description here

, , , , , ( , : - IOS WINDOWS)

styles.xml:

<resources>

    <style name="Theme.Compatstyle4" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="actionBarItemBackground">@drawable/selectable_background_compatstyle4</item>
        <item name="popupMenuStyle">@style/PopupMenu.Compatstyle4</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Compatstyle4</item>
        <item name="actionBarTabStyle">@style/ActionBarTabStyle.Compatstyle4</item>
        <item name="actionDropDownStyle">@style/DropDownNav.Compatstyle4</item>
        <item name="actionBarStyle">@style/ActionBar.Solid.Compatstyle4</item>
        <item name="actionModeBackground">@drawable/cab_background_top_compatstyle4</item>
        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_compatstyle4</item>
        <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Compatstyle4</item>

                <!-- Light.DarkActionBar specific -->
        <item name="actionBarWidgetTheme">@style/Theme.Compatstyle4.Widget</item>

    </style>

    <style name="ActionBar.Solid.Compatstyle4" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@drawable/ab_solid_compatstyle4</item>
        <item name="backgroundStacked">@drawable/ab_stacked_solid_compatstyle4</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid_compatstyle4</item>
        <item name="progressBarStyle">@style/ProgressBar.Compatstyle4</item>
    </style>

    <style name="ActionBar.Transparent.Compatstyle4" parent="@style/Widget.AppCompat.ActionBar">
        <item name="background">@drawable/ab_transparent_compatstyle4</item>
        <item name="progressBarStyle">@style/ProgressBar.Compatstyle4</item>
    </style>

    <style name="PopupMenu.Compatstyle4" parent="@style/Widget.AppCompat.PopupMenu">    
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_compatstyle4</item>  
    </style>

    <style name="DropDownListView.Compatstyle4" parent="@style/Widget.AppCompat.ListView.DropDown">
        <item name="android:listSelector">@drawable/selectable_background_compatstyle4</item>
    </style>

    <style name="ActionBarTabStyle.Compatstyle4" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_compatstyle4</item>
    </style>

    <style name="DropDownNav.Compatstyle4" parent="@style/Widget.AppCompat.Spinner.DropDown.ActionBar">
        <item name="android:background">@drawable/spinner_background_ab_compatstyle4</item>
        <item name="android:popupBackground">@drawable/menu_dropdown_panel_compatstyle4</item>
        <item name="android:dropDownSelector">@drawable/selectable_background_compatstyle4</item>
    </style>

    <style name="ProgressBar.Compatstyle4" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_compatstyle4</item>
    </style>

    <style name="ActionButton.CloseMode.Compatstyle4" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
        <item name="android:background">@drawable/btn_cab_done_compatstyle4</item>
    </style>

    <!-- this style is only referenced in a Light.DarkActionBar based theme -->
    <style name="Theme.Compatstyle4.Widget" parent="@style/Theme.AppCompat">
        <item name="popupMenuStyle">@style/PopupMenu.Compatstyle4</item>
        <item name="dropDownListViewStyle">@style/DropDownListView.Compatstyle4</item>
    </style>

</resources>

:

+3
2

.

  • ActionBAr, tabstyle , .

    <!-- All customizations that are NOT specific to a particular API-level can go here. -->

<item name="actionBarTabStyle">@style/CustomActionBarTabs</item>
<item name="actionBarTabTextStyle">@style/CustomActionBarTabs_TextColor</item>

  • , .

    <!-- action bar tab styles -->
<style name="CustomActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
   <item name="android:background">@drawable/tab_indicator_ab_custom_actionbar_style</item>
   <item name="android:textColor">#666666</item>
</style>

  • , .

    <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_custom_actionbar_style" />

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

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

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_custom_actionbar_style" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_custom_actionbar_style" />
</selector>
+6

        

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

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

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

0

More articles:


All Articles