I'm trying to remove the divider between the tabs in an ActionBar (actually an ActionBarSherlock) altogether; i.e. no image between tabs and no gap between the tabs either (I'm using a tiled image background in the tabs). Ideally, I'd like the dividers removed in the XML, rather than in code.
I've tried a few approaches, but nothing seems to be working, such as:
<style name="Theme.MyTheme.ActionBarTab" parent="Widget.Sherlock.ActionBar.TabBar">
<item name="android:divider">#null</item>
<item name="divider">#null</item>
<item name="actionBarDivider">#drawable/empty</item>
<item name="android:showDividers">none</item>
</style>
Turns out I was setting the wrong style. The android:showDividers attribute does work, but when it's applied to the style that inherits from the Widget.Sherlock.ActionBar.TabBar style. So the relevant bits of XML are:
<style name="Theme.Client" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="android:actionBarTabBarStyle">#style/Theme.Client.ActionBarTabBar</item>
<item name="actionBarTabBarStyle">#style/Theme.Client.ActionBarTabBar</item>
</style>
<style name="Theme.Client.ActionBarTabBar" parent="Widget.Sherlock.ActionBar.TabBar">
<item name="android:background">#drawable/tab_bar_bg_tiled</item>
<item name="background">#drawable/tab_bar_bg_tiled</item>
<item name="android:showDividers">none</item>
</style>
Related
I'm using the Android appcompat library to create a custom action bar. That all works. On devices not using the v11 theme (values folder) a bottom border does not appear as it should not. But when v11+ devices use the theme (in the values-v11 folder of course) there is a bottom border. It's a thin 1dp type border. I have a custom background applied for the actionbar and this all works on version < v11, just an annoying extra bottom border is added on v11+ devices ;-]
Now I found via another SO article where the user was using ActionBarSherlock that the base theme needed to be Theme.X and not theme.X.Light.x to resolve this issue (with no explanation as to why). I applied this same logic (I'm using android's appcompat, not sherlock one) and it worked for removing the border but then other style issues came up with radio buttons, etc, taking on the non-light theme. So I want to keep the base theme as 'Theme.AppCompat.Light' and get rid of the bottom border on the actionbar. Again, it doesn't show up on devices < v11.
Screen shots (Theme.AppCompat.Light/Theme.AppCompat):
My theme (same in values folder minus the android prefacing):
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
Through the power of SO my question was finally answered! I tried everything the OP in the below link tried and more over the last two days. Somehow I didn't see this SO thread (I wasn't using search terms 'divider', methinks).
What worked for me was to have the no window overlay property set to null. I see that setting the window color may work on some higher version of android (4.2.x+) as well, so I decided to set both. Here is the SO link with the solution(s) to this nasty feature (bug?): link
My final values-v11/themes.xml -
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
If user2545146 answer doesn't work on lollipop.
call setElevation on the actionbar from the activity.
getSupportActionBar().setElevation(0);
The only thing that worked for me was
AppBarLayout appBarLayout = findViewById(R.id.my_app_bar_layout);
appBarLayout.setOutlineProvider(null);
api >= 21 only
I'm trying to apply some styles to my app. I've created a custom theme for the ActionBar using this actionbarstylegenerator.
But I want to change also in my app, the stock blue Holo color, to a red one, at least on buttons.
So, I have the custom theme for the ActionBar (Compat), and for the other side, a custom theme to change the Holo color.
In my app, I have defined the custom theme for the Actionbar, and I want to set the custom Holo theme inside the Actionbar's theme, but I don't know how to call, or where can I find the item name's whose define the variable you want to modify.
This is, I need to set this:
<style name="ColorTheme" parent="android:Theme.Black">
<item name="android:checkboxStyle">#style/CheckBoxColorTheme</item>
<item name="android:buttonStyle">#style/ButtonColorTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonColorTheme</item>
</style>
Inside of this:
<style name="Theme.CustomActionBarTheme" parent="#style/Theme.AppCompat">
<item name="actionBarItemBackground">#drawable/ab_selectable_background</item>
<item name="popupMenuStyle">#style/PopupMenu</item>
<item name="dropDownListViewStyle">#style/DropDownListView</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="actionDropDownStyle">#style/DropDownNav</item>
<item name="actionBarStyle">#style/ActionBar.Transparent</item>
<item name="actionModeBackground">#drawable/cab_background_top_customactionbartheme</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_customactionbartheme</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode</item>
</style>
Maybe you need to do this?
<style name="ColorTheme" parent="Theme.CustomActionBarTheme">
<item name="android:checkboxStyle">#style/CheckBoxColorTheme</item>
<item name="android:buttonStyle">#style/ButtonColorTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonColorTheme</item>
Once again I'm fighting with ActionBar styles for SDK 14 and above. I'm trying to remove/reduce spacing between Tab icons since the default spacing does not fit well in my design. Currently my style looks like:
<style name="sMain" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/mTabAreaBackground</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
</style>
<style name="mTabAreaBackground" parent="#android:style/Widget.Holo.ActionBar.Solid">
<item name="android:backgroundStacked">#2b2f33</item>
</style>
<style name="ActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#android:color/transparent</item>
<!-- below attributes have no effect -->
<item name="android:width">0dp</item>
<item name="android:height">0dp</item>
</style>
I "removed" the active Tab indicator by making it transparent since my Tab icons already have one. I assumed that the spacing between Tab icons was somehow related to the Tab indicator, which was still there though I made it transparent. Therefore I tried to apply a width and height of 0 in the same style (inherited from style/Widget.Holo.ActionBar.TabView). I don't know if my assumption was incorrect or I'm doing something wrong, I also could not find any documentation/examples related to adjusting spacing between Tab icons.
Any suggestions are appreciated.
AFAIK, the spacing is because of the padding on the TabView.
You should changing the padding on the TabView something like below.
<style name="ActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#android:color/transparent</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
</style>
The default padding on the TabView seems to be 16dp.
I'm using a custom theme that inherits from DarkActionBar and I want to customize dropdown menu to be white like when using Light Holo theme.
I've been able to change the background to white using:
<style name="MyTheme" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
</style>
<style name="MyDropDownNav">
<item name="android:background">#drawable/spinner_background_white</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_whyite</item>
<item name="android:dropDownSelector">#drawable/selectable_background_white</item>
</style>
But I haven't any clue of how to change the text color to black. Because after setting white drawable the problem is that text isn't visible because is white on white background.
I answer myself after some investigation.
In addition to question's styling you need to:
Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
Then final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>
Where drawables in myapp_DropDownNav are white background ones that you can generate with ActionBar Style generator in Android Asset Studio
Try setting itemTextAppearance. That should achieve what you want.
I have stumbled on what may be the simplest way to do this. I was working with the AppCompat library.
<style name="ApplicationTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
<item name="actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
</style>
My advice is to simply inherit from the Sherlock.Light theme and change the applicable fields to the Dark values. For my app, we wanted a white "up" icon, and white text for the action labels. I don't provide dark versions of my actionbar icons, so they are all white anyway. So after several hours messing around with it and following different people's suggestions, I finally found what I was looking for in the ABS themes file.
I inherit from Sherlock.Light (well, technically HoloEverywhereLight.Sherlock but...) and change:
<item name="android:actionMenuTextColor">#color/White</item>
<item name="actionMenuTextColor">#color/White</item>
<item name="android:homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="android:dividerVertical">#drawable/abs__list_divider_holo_dark</item>
<item name="dividerVertical">#drawable/abs__list_divider_holo_dark</item>
That's it. It's way simpler and easier than trying to extend classes, restyle things in code, etc.
Many of my questions about "styling" actionbar tabs were answered by adamp in this thread on tab style, but I am still struggling with my arriving at the desired presentation.
Specifically, I am attempting to do what adamp suggested in the following fragment from my styles.xml file, but, I cannot get the inherited (Widget.holo.actionbar) feature of a light blue line to appear under the selected tab nor is there any indication of selection:
<style name="MyTheme" parent="android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="android:style/Widget.Holo.ActionBar">
<item name="android:actionBarTabTextStyle">#style/customActionBarTabTextStyle</item>
<item name="android:actionBarTabStyle">#style/customActionBarTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/customActionBarTabBarStyle</item>
</style>
<style name="customActionBarTabTextStyle" parent="#style/CustomActionBar">
<item name="android:textColor">#2966c2</item>
<item name="android:textSize">20sp</item>
<item name="android:typeface">sans</item>
</style>
<style name="customActionBarTabStyle" parent="#style/CustomActionBar">
<!-- <item name="android:background">#drawable/actionbar_tab_bg</item> -->
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
</style>
<style name="customActionBarTabBarStyle" parent="#style/CustomActionBar">
<item name="android:paddingLeft">240dp</item>
</style>
Can someone explain why the thin blue line selection behavior of the Honeycomb Gallery Sample App does not work for me?
New insight since this was written: the problem here, I think, is that the style I have created to overide ActionBarTabStyle is entirely bogus:
<style name="customActionBarTabStyle" parent="#style/CustomActionBar">
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
</style>
I need to specify the correct parent of this style per "Theme.holo"....how can one find where the default style is so it can be specified as a parent?
Thanks
To specify the correct parents for actionbar style in API 11, Check doc here:
https://developer.android.com/training/basics/actionbar/styling.html