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
Related
I want to change the background of alert dialog title in theme.
I do following changes in theme:
<style name="NgTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:dialogTheme">#style/NgDialogTheme</item>
<item name="android:alertDialogTheme">#style/NgAlertDialogTheme</item>
</style>
<style name="NgDialogTheme" parent="#android:style/Theme.Holo.Light.Dialog">
<item name="android:background">#android:color/transparent</item>
<item name="android:windowTitleStyle">#style/NgWindowTitleStyle</item>
</style>
<style name="NgAlertDialogTheme" parent="#style/NgDialogTheme">
</style>
<style name="NgWindowTitleStyle" parent="android:TextAppearance.Holo.DialogWindowTitle">
<item name="android:background">#318d99</item>
<item name="android:textColor">#fff</item>
</style>
I expected that background of title becomes #318d99. But only background of text is #318d99:
How can I change white frame around the title to #318d99?
Also the frame around the dialog isn't transparent. How can I fix it?
There are some valuable posts about this already and very closely related to your question.
Google's post on customizing this is possibly worth looking at first:
https://sites.google.com/site/androidhowto/how-to-1/customize-alertdialog-theme
Take a look at this blog post:
http://blog.supenta.com/2014/07/02/how-to-style-alertdialogs-like-a-pro/
Specifically, go to Part 5: Styling the Background.
To summarize, they suggest that you will probably have to
Stop inheriting from Holo
Give your main theme an alertDialogStyle
Then create a style with the following attributes, which you can get a reference to here: http://developer.android.com/reference/android/R.styleable.html#AlertDialog
You'll want to create a new style that inherits from the default alertdialog theme (this is discussed in both posts I mentioned above):
<style name="CustomDialogTheme" parent="#android:style/Theme.Dialog">
<item name="android:bottomBright">#color/white</item>
<item name="android:bottomDark">#color/white</item>
<item name="android:bottomMedium">#color/white</item>
<item name="android:centerBright">#color/white</item>
<item name="android:centerDark">#color/white</item>
<item name="android:centerMedium">#color/white</item>
<item name="android:fullBright">#color/orange</item>
<item name="android:fullDark">#color/orange</item>
<item name="android:topBright">#color/blue</item>
<item name="android:topDark">#color/blue</item>
</style>
I'm trying to learn how to Style my application using the styles.xml file and I need some clarification on a few things to understand it.
In an Item, what is the difference between setting android:actionbarstyle and just actionbarstyle ? I know that in this particular case, I have to define both, but why? And what about all other cases, for example android:colorPrimary and just colorPrimary? In that case I get an error saying that android:colorPrimary can only be used with min API level 21. So does someone have a good explanation on what the android: prefix does and how it affects my app?
Is there a reference to the different parent styles, such as parent="#style/Widget.AppCompat.Light.ActionBar and what they mean? How do I find a list of the different parent styles available for a specific item and what I can "override" in them? Right now, it's mostly guessing on my part....
Just as a reference, I'm posting my current styles.xml file.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="MyTheme"/>
<style name="MyTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/MyTheme.ActionBarTheme</item>
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
<item name="drawerArrowStyle">#style/MyTheme.DrawerArrowStyle</item>
<item name="android:actionOverflowButtonStyle">#style/MyTheme.OverFlow</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="android:homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="colorControlNormal">#color/my_green</item>
<item name="colorControlActivated">#color/my_forest</item>
<item name="colorControlHighlight">#color/my_deep_green</item>
</style>
<style name="MyTheme.ActionBarTheme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- This sets the BACK arrow to white. Otherwise it's black. Must be placed in the theme-->
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/my_green</item>
<item name="background">#color/my_green</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyTheme.DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/white</item>
</style>
<style name="MyTheme.OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#color/white</item>
</style>
</resources>
I will try my best to explain and will concentrate on:
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
These attributes are regularly available with API level 21. In general you use attributes with the "android" prefix.
If you define all your styles in the styles.xml of your values folder and if you are using app compat, then you need both.
Without the prefix the attributes applies for pre L devices. i.e. App Compat. To get it work for L devices and higher you need to specifiy the attribute again with the "android" prefix.
And to get the other Android styles you can step into them, like you step into classes and the implementations. For Mac I press the command button and then click with the mouse on the specific style.
I'm trying to create a custom styling for the ActionBar. Specifically i'm trying to change the menu item color.
I applied these stylings:
<style name="MyActionBar" parent="#style/Widget.Sherlock.Light.ActionBar">
<item name="android:actionMenuTextAppearance" tools:ignore="NewApi">#style/MyActionBarMenuText</item>
<item name="android:background">#drawable/actionbar_bg</item>
<!-- Support library compatibility -->
<item name="actionMenuTextAppearance">#style/MyActionBarMenuText</item>
<item name="background">#drawable/actionbar_bg</item>
</style>
<style name="MyActionBarMenuText" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Menu">
<item name="android:actionMenuTextColor" tools:ignore="NewApi">#color/actionbar_text</item>
<item name="actionMenuTextColor">#color/actionbar_text</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
The background is applying but the menu text colour is not. What am i missing?
I know this was asked many times, but none of the solutions helped me.
Finally got it, Since android:actionMenuTextColor is defined in Theme.Sherlock.Light I needed to add it to my main custom theme which inherits from it and not to the style that inherits from Widget.Sherlock.Light.ActionBar:
<style name="MyTheme" parent="#style/Theme.Sherlock.Light">
<item name="android:actionBarStyle" tools:ignore="NewApi">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor" tools:ignore="NewApi">#color/actionbar_text</item>
<item name="actionMenuTextColor">#color/actionbar_text</item>
</style>
I'm want to change the up icon with applying the following style to my activity, but it doesn't work and but I still get the default black '<' icon.
Can anyone find out what is missing here?
<style name="AppTheme.ActionBar" parent="#style/Theme.Sherlock.Light">
<item name="actionBarStyle">#style/actionBarStyle</item>
<item name="android:actionBarStyle">#style/actionBarStyle</item>
</style>
<style name="actionBarStyle" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="android:background">#drawable/header_bar</item>
<item name="background">#drawable/header_bar</item>
<item name="android:homeAsUpIndicator">#drawable/up_indicator</item>
<item name="homeAsUpIndicator">#drawable/up_indicator</item>
<item name="android:displayOptions">homeAsUp|showHome</item>
<item name="displayOptions">homeAsUp|showHome</item>
</style>
If I remember correctly, I worked around this issue by moving you should move the android:homeAsUpIndicator and homeAsUpIndicator elements into the main theme declaration. In other words, try:
<style name="AppTheme.ActionBar" parent="#style/Theme.Sherlock.Light">
<item name="actionBarStyle">#style/actionBarStyle</item>
<item name="android:actionBarStyle">#style/actionBarStyle</item>
<item name="android:homeAsUpIndicator">#drawable/up_indicator</item>
<item name="homeAsUpIndicator">#drawable/up_indicator</item>
</style>
<style name="actionBarStyle" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="android:background">#drawable/header_bar</item>
<item name="background">#drawable/header_bar</item>
<item name="android:displayOptions">homeAsUp|showHome</item>
<item name="displayOptions">homeAsUp|showHome</item>
</style>
Not sure whether I also had to move up the displayOptions, but you may want to give that a go too in case above doesn't work right away.
By the way, I find naming a style AppTheme.ActionBar and then inheriting from Theme.Sherlock.Light rather confusing. If it were an ActionBar specific style, I would've expected something like Widget.Holo.Light.ActionBar (or any of the other widget styles) as the parent. If it's your main theme, I'd name it accordingly. Up to you of course.
Edit: Updated answer after Jake's comment.
I am using ActionBarSherlock 4.0.2.
I need a fully transparent action bar (without the neon color bottom divider). Hence, I have the following style:
<style name="AppTheme" parent="#style/Theme.Sherlock">
<item name="windowActionBarOverlay">true</item>
<item name="icon">#drawable/ic_home</item>
<item name="titleTextStyle">#style/ActionBarCompatTitle</item>
<item name="android:windowFullscreen">true</item>
</style>
By using above code, I will still have the following effect.
In order to disable the background, I put the following code in SherlockFragmentActivity#onCreate. Then the problem gone.
getSupportActionBar().setBackgroundDrawable(null);
However, I would like to see the solution being implemented in styles.xml instead of Java code, as I have many other devices with different screen configuration. I modified the styles.xml to the following, without using the previously mentioned fix in the Java code.
<style name="AppTheme" parent="#style/Theme.Sherlock">
<item name="windowActionBarOverlay">true</item>
<item name="icon">#drawable/ic_home</item>
<item name="titleTextStyle">#style/ActionBarCompatTitle</item>
<item name="android:windowFullscreen">true</item>
<item name="android:background">#drawable/transparent</item>
<item name="background">#drawable/transparent</item>
</style>
However, the neon divider still visible. It seems that my fix using android:background and background does not work. Am I missing something?
<style name="AppTheme" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.Sherlock.ActionBar">
<item name="background">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
</style>