Alignment text of actionbar tab? - android

I try to customize actionbar tabs. Look on the picture:
My code:
<style name="ActionBarTabBar" parent="#android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:showDividers">end</item>
<item name="android:divider">#drawable/actionbar_tab_divider</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:background">#drawable/actionbar_tab_bg</item>
<item name="android:paddingLeft">50dp</item>
<item name="android:paddingRight">0dp</item>
</style>
<style name="ActionBarTab" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:showDividers">none</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:gravity">center</item>
</style>
<style name="CustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:listSelector">#style/ListView</item>
<item name="android:actionBarTabBarStyle">#style/ActionBarTab</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabBar</item>
</style>
I would like to align the text of tabs to center. When I try to set up showDividers to value middle, divider is not visible. It is visible with values beggining or end.

After more attempts, I've got desired result.
This is my code, that works properly.
<style name="ActionBarTabBar" parent="#android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/actionbar_tab_bg</item>
<item name="android:paddingLeft">30dp</item>
<item name="android:paddingRight">30dp</item>
</style>
<style name="ActionBarTab" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/actionbar_tab_divider</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:gravity">center</item>
</style>
<style name="CustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarTabBarStyle">#style/ActionBarTab</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabBar</item>
</style>
It was needed to specify the style for Widget.Holo.Light.ActionBar.TabView and for this item set up the divider.

Delete styles you don't need to override in order to style your tabs like you described:
<style name="ActionBarTabBar" parent="#android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:divider">#drawable/actionbar_tab_divider</item>
<item name="android:background">#drawable/actionbar_tab_bg</item>
</style>

Related

Change text color and size of actionbar

I try to change text color and size of my actionbar through the style resources:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Example3" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarItemBackground">#drawable/selectable_background_example3</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Example3</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Example3</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Example3</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Example3</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Example3</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_example3</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_example3</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Example3</item>
</style>
<style name="ActionBar.Solid.Example3" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background">#drawable/ab_solid_example3</item>
<item name="android:backgroundStacked">#drawable/ab_stacked_solid_example3</item>
<item name="android:backgroundSplit">#drawable/ab_bottom_solid_example3</item>
<item name="android:progressBarStyle">#style/ProgressBar.Example3</item>
</style>
<style name="Theme.Example3.ActionBar.Solid.Example3.TitleTextStyle" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textColor">#color/white</item>
</style>
<style name="ActionBar.Transparent.Example3" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/ab_transparent_example3</item>
<item name="android:progressBarStyle">#style/ProgressBar.Example3</item>
</style>
<style name="PopupMenu.Example3" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example3</item>
</style>
<style name="DropDownListView.Example3" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_example3</item>
</style>
<style name="ActionBarTabStyle.Example3" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_example3</item>
</style>
<style name="DropDownNav.Example3" parent="#android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_background_ab_example3</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example3</item>
<item name="android:dropDownSelector">#drawable/selectable_background_example3</item>
</style>
<style name="ProgressBar.Example3" parent="#android:style/Widget.Holo.Light.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_example3</item>
</style>
<style name="ActionButton.CloseMode.Example3" parent="#android:style/Widget.Holo.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_example3</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Example3.Widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu.Example3</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Example3</item>
</style>
</resources>
The above style.xml contains following code part, which should change text color and size, but it happens nothing on my actionbar:
<style name="Theme.Example3.ActionBar.Solid.Example3.TitleTextStyle" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textColor">#color/white</item>
</style>
What is wrong?
Thanks!!
<item name="android:titleTextStyle">#style/Theme.Example3.ActionBar.Solid.Example3.TitleTextStyle</item>
is missing in <style name="ActionBar.Solid.Example3">
The problem is that you need to link the third block of style from inside the second block of style:
<style name="ActionBar.Solid.Example3" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background">#drawable/ab_solid_example3</item>
<item name="android:backgroundStacked">#drawable/ab_stacked_solid_example3</item>
<item name="android:backgroundSplit">#drawable/ab_bottom_solid_example3</item>
<item name="android:progressBarStyle">#style/ProgressBar.Example3</item>
<item name="android:titleTextStyle">#style/Theme.Example3.ActionBar.Solid.Example3.TitleTextStyle</item>
</style>

ActionBarSherLock divider style

Does anyone knows,
How do i set a line in between ActionBar tab bar and title bar, because i am using same color for both, that looks odd,
i am using style as:
<style name="Theme.MyTheme" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
<item name="actionBarTabStyle">#style/customActionBarTabStyle</item>
</style>
here i set the color,
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#4B4B4B</item>
<item name="background">#4B4B4B</item>
</style>
<style name="customActionBarTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="background">#4B4B4B</item>
<item name="android:background">#4B4B4B</item>
</style>
Try using something like this :
<style name="Theme.Dreams" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:actionBarTabBarStyle">#style/ActionBarTabBarStyle.Dreams</item>
</style>
<style name="ActionBarTabBarStyle.Dreams" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:background">#drawable/ic_tabbar_background</item>
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/ic_tabbar_divider</item>
<item name="android:dividerPadding">0dp</item>
</style>

How to change the tab text color of ActionBarSherlock? [duplicate]

This question already has answers here:
How to change the text color of action bar sherlock
(3 answers)
Closed 9 years ago.
I have tried multiple different ways to change the tab text color to actionbarshelock to white and it simply does not work. Here is my styles.xml file.
<style name="Theme.Test" parent="#style/Theme.Sherlock.Light">
<item name="actionBarItemBackground">#drawable/selectable_background_test</item>
<item name="popupMenuStyle">#style/PopupMenu.Test</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Test</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Test</item>
<item name="actionDropDownStyle">#style/DropDownNav.Test</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Test</item>
<item name="actionModeBackground">#drawable/cab_background_top_test</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_test</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Test</item>
<item name="android:actionBarItemBackground">#drawable/selectable_background_test</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Test</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Test</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Test</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Test</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Test</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_test</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_test</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Test</item>
</style>
<style name="ActionBar.Solid.Test" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="background">#drawable/ab_solid_test</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_test</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_test</item>
<item name="progressBarStyle">#style/ProgressBar.Test</item>
<item name="android:background">#drawable/ab_solid_test</item>
<item name="android:backgroundStacked">#drawable/ab_stacked_solid_test</item>
<item name="android:backgroundSplit">#drawable/ab_bottom_solid_test</item>
<item name="android:progressBarStyle">#style/ProgressBar.Test</item>
<item name="android:titleTextStyle">#style/Test.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/Test.ActionBar.TitleTextStyle</item>
<item name="actionBarTabTextStyle">#style/MyTabTextStyle</item>
<item name="android:actionBarTabTextStyle">#style/MyTabTextStyle</item>
<item name="android:actionBarStyle">#style/YOURTHEME.ActionBarStyle</item>
<item name="actionBarStyle">#style/YOURTHEME.ActionBarStyle</item>
</style>
<style name="YOURTHEME.ActionBarStyle" parent="Widget.Sherlock.Light.ActionBar">
<item name="android:titleTextStyle">#style/YOURTHEME.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/YOURTHEME.ActionBar.TitleTextStyle</item>
</style>
<style name="YOURTHEME.ActionBar.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyTabTextStyle" parent="style/Widget.Sherlock.Light.ActionBar.TabText">
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/white</item>
</style>
<style name="Test.ActionBar.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="ActionBar.Transparent.Test" parent="#style/Widget.Sherlock.Light.ActionBar">
<item name="background">#drawable/ab_transparent_test</item>
<item name="progressBarStyle">#style/ProgressBar.Test</item>
<item name="android:background">#drawable/ab_transparent_test</item>
<item name="android:progressBarStyle">#style/ProgressBar.Test</item>
</style>
<style name="PopupMenu.Test" parent="#style/Widget.Sherlock.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_test</item>
</style>
<style name="DropDownListView.Test" parent="#style/Widget.Sherlock.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_test</item>
</style>
<style name="ActionBarTabStyle.Test" parent="#style/Widget.Sherlock.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_test</item>
</style>
<style name="DropDownNav.Test" parent="#style/Widget.Sherlock.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_test</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_test</item>
<item name="android:dropDownSelector">#drawable/selectable_background_test</item>
</style>
<style name="ProgressBar.Test" parent="#style/Widget.Sherlock.Light.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_test</item>
</style>
<style name="ActionButton.CloseMode.Test" parent="#style/Widget.Sherlock.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_test</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Test.Widget" parent="#style/Theme.Sherlock">
<item name="popupMenuStyle">#style/PopupMenu.Test</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Test</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Test</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Test</item>
</style>
I want to make my text color white but I have no idea how to accomplish this. I'd appreciate if anyone can help me with this.
Thanks!
I got it to work.
This should be in the theme
<item name="actionBarTabTextStyle">#style/tabtextcolor</item>
<item name="android:actionBarTabTextStyle">#style/tabtextcolor</item>
This should be where you define the tab text color.
<style name="tabtextcolor" parent="#style/Widget.Sherlock.ActionBar.TabText">
<item name="android:textColor">#android:color/white</item>
</style>

Changing The Style Of Actionbar Overflow

I am using Theme.Holo in My Current android app.
Above is the overflow UI from my current theme.
I want to customize overflow menu's background color to RGB (245, 243, 239), and the font color to RGB (64, 64, 64).
Following is the style.xml I am using
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/CustomActivityTheme.ActionBar</item>
<item name="android:actionMenuTextColor">#000000</item>
<item name="android:divider">#drawable/action_bar_div</item>
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverflow</item>
</style>
<style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/overflow</item>
</style>
<style name="CustomActivityTheme.ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/actionbar_bg</item>
<item name="android:titleTextStyle">#style/CustomActivityTheme.ActionBar.Text</item>
<item name="android:subtitleTextStyle">#style/CustomActivityTheme.ActionBar.Text</item>
</style>
<style name="CustomActivityTheme.ActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textColor">#000000</item>
<item name="android:textSize">16sp</item>
</style>
<style name="activated" parent="android:Theme.Holo">
<item name="android:background">?android:attr/activatedBackgroundIndicator</item>
</style>
<!-- style for removing the floating dialog -->
<style name="CustomDialogTheme">
<item name="android:windowIsFloating">false</item>
<item name="android:windowNoTitle">true</item>
</style>
<!-- style for transparent image resource activity -->
<style name="Theme.Transparent" parent="android:Theme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowAnimationStyle">#style/MyAnimation.Window</item>
</style>
<!-- Animations for a non-full-screen window or activity. -->
<style name="MyAnimation.Window" parent="#android:style/Animation.Dialog">
<item name="android:windowEnterAnimation">#anim/grow_from_middle</item>
<item name="android:windowExitAnimation">#anim/shrink_to_middle</item>
</style>
<!-- style for transparent audio and video resource activity -->
<style name="Theme.Transparent_Player" parent="android:Theme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowAnimationStyle">#style/MyPlayerAnimation.Window</item>
</style>
<!-- Animations for a non-full-screen window or activity. -->
<style name="MyPlayerAnimation.Window" parent="#android:style/Animation.Dialog">
<item name="android:windowEnterAnimation">#anim/grow_from_action_bar</item>
<item name="android:windowExitAnimation">#anim/shrink_to_action_bar</item>
</style>
How can I customize theme to match overflow menu's background color to RGB (245, 243, 239), and the font color to RGB (64, 64, 64) in above code?
Thanks in advance..
to change text color you can use :
<item name="android:textAppearanceLargePopupMenu" >#style/m_textAppearanceLargePopupMenu</item>
<item name="android:textAppearanceSmallPopupMenu" >#style/m_textAppearanceSmallPopupMenu</item>
<style name="m_textAppearanceLargePopupMenu" parent="#android:style/TextAppearance.Holo.Widget.PopupMenu.Large">
<item name="android:textColor">#FFF</item>
</style>
<style name="m_textAppearanceSmallPopupMenu" parent="#android:style/TextAppearance.Holo.Widget.PopupMenu.Small">
<item name="android:textColor">#FFF</item>
</style>
this will change the popup menu text color to white
Try this:
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo">
...
<item name="android:popupMenuStyle">#style/MyPopupMenu</item>
...
</style>
<style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:background">#f5fdef</item>
</style>
I found it at this post
<style name="MyActionBar3" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/ActionBarBackground</item>
</style>
<style name="MyActionBarDropDownStyle" parent="">
<item name="android:background">#00FF00</item>
<item name="android:divider">#ff0000</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">10sp</item>
</style>
<style name="MyTextStyle" parent="#style/Widget.AppCompat.Light.Base.ListPopupWindow">
<item name="android:popupBackground">#FF0000</item>
</style>
Apply the style to android:textAppearanceLargePopupMenu" item's attribute

Action Bar Sherlock dropdown spinner divider

How can I hide dividers in action bar dropdown menu navigation?
Here is divider which I want to hide:
http://s10.postimage.org/4sjqjxltl/4nk4k.png
I tried following in styles:
<style name="MyActionBar" parent="Widget.Sherlock.Light.ActionBar">
<item name="android:background">#drawable/actionbar_bg_shape</item>
<item name="background">#drawable/actionbar_bg_shape</item>
<item name="android:showDividers">none</item>
<item name="android:divider">#00000000</item>
<item name="android:cacheColorHint">#00000000</item>
<item name="android:dividerHeight">0px</item>
</style>
<style name="MyDropDownNav" parent="Widget.Sherlock.Light.Spinner.DropDown.ActionBar">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">#drawable/actionbar_bg_shape</item>
<item name="android:popupBackground">#drawable/actionbar_dropdown_bg_shape</item>
<item name="android:dropDownSelector">#drawable/dropdown_nav_selector</item>
<item name="android:dropDownWidth">175dp</item>
<item name="android:dropDownHeight">50dp</item>
<item name="android:showDividers">none</item>
<item name="android:divider">#null</item>
<item name="android:cacheColorHint">#00000000</item>
<item name="android:dividerHeight">0px</item>
<item name="background">#drawable/actionbar_bg_shape</item>
</style>
<style name="Theme.Test.ICS" parent="Theme.Sherlock.Light">
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
<item name="actionDropDownStyle">#style/MyDropDownNav</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarDivider">#drawable/icon</item>
<item name="android:actionBarDivider">#drawable/icon</item>
</style>
I've also tried with changing divider property to color or drawable.
But divider is still present in dropdown menu navigation, no effect at all. Any ideas would be really helpful.
You need to extend the Widget.Sherlock.ListView.DropDown style like this:
<style name="Theme.YourTheme" parent="Theme.Sherlock">
<item name="dropDownListViewStyle">#style/YourThemeDropDownListView</item>
<item name="android:dropDownListViewStyle">#style/YourThemeDropDownListView</item>
</style>
<style name="YourThemeDropDownListView" parent="Widget.Sherlock.ListView.DropDown">
<item name="android:divider">#null</item>
</style>
It's worth to note, that divider Height must be specified to edit divider's color.
<style name="YourThemeDropDownListView" parent="Widget.Sherlock.ListView.DropDown">
<item name="android:divider">#color/White</item
<item name="android:dividerHeight">5dp</item>
</style>

Categories

Resources